Neueste Nachrichten (in Englisch): (am laden..)
De Dokta

Responsive Shop

182 Beiträge in diesem Thema

Hi,

 

durch die zunehmende Verbreitung von Mobil-Geräten wird das Thema Responsive Layout immer wichtiger. Für die, die sich noch nicht damit befasst haben: Responsive ist ein Shop-Layout, das sich automatisch an die unterschiedlichen Wiedergabe-Medien anpasst. Der Shop sieht dadurch im normalen Internet-Browser ebenso gut aus wie z.B. auf einem Tablet-PC oder dem Smartphone - und läßt sich natürlich dort auch wie auf dem Browser nutzen.

Es gibt zwar einige Ansätze, osC auf mobile Geräte zu portieren (z.B. iOSC), diese haben aber den Nachteil, dass man quasi parallel zum Internet-Shop einen Mobil-Shop aufbauen muß - gerade wenn man viele Contribs eingebaut hat, nicht gerade ein Spass.

Seit kurzem gibt es im amerikanischen osC-Forum einen Ansatz, einen responsive osC-Shop auf der Basis von Bootstrap 3 zu entwickeln, Thread dazu hier. Das Ding ist noch in der Entwicklung, was bisher zu sehen und runterzuladen ist, sieht aber sehr vielversprechend aus.

Wer sich für das Thema interessiert, sollte sich den Thread unbedingt mal ansehen. Fragen beantwortet burt schnell und zuverlässig - mir hat er versichert, dass er zur Not mit Hilfe von google translate auch Fragen auf deutsch sich zu beantworten bemühen wird :D .

 

Gruß

J.J.

1 Person gefällt das

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hallo zusammen,

 

responsives Design ist eine feine Sache, wenn da nicht die Ladezeiten wären, die bei Shops und natürlich auch bei allen anderen Webseiten das mobile Vergnügen deutlich behindern. Wer viele Bilder hat, wird die mobilen Besucher der hohen Datenmenge wegen damit eher vergraulen als beglücken.

 

Es ist in der Tat mit einiger Arbeit verbunden, einen separaten mobilen Shop zu erstellen. Aber: sofern der "normale" Shop mit allen Contribs sauber läuft, liegt die Funktionalität weitgehend vor. Dagegen ist im CSS-Bereich einiges zu tun, um Links und andere Teile fingertauglich zu gestalten. Manche Bereiche des "normalen" Shops finde ich mobil verzichtbar – löschen ist ja meistens kein Problem. :)

 

Wichtig ist dann noch ein Script zur Mobilerkennung, das den Besucher auf die mobile Version weiterleitet. Des Weiteren halte ich eine Verlinkung von der einen auf die andere Version für sinnvoll.

 

Vor zwei Jahren habe ich die Mühe gemacht, eine separate Mobilversion zu erstellen – und werde es mit der neuen 2.3.3.4-Version wieder tun. Beide Systeme greifen auf die gleiche DB zu, auch Sprachdateien und Bilder sind alle in einem Ordner und werden bis auf wenige Ausnahmen von beiden Versionen genutzt.

 

Gruß

weinhexe

bearbeitet von weinhexe

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hi,

 

schau Dir mal den Demoshop von burt an - im Hinblick auf Ladezeiten hat er ein sehr schlankes Layout entwickelt. Der Junge weiß schon, was er tut! :D

Ich spiele gerade ein bißchen mit dem System und bin einerseits sehr angetan von diesem Bootstrap (z.B. ein Popup damit zu bauen ist im Vergleich zu jquery ein Klacks), andererseits tue ich mich etwas schwer mit dem sehr CSS-lastigen Layout, da CSS zugegeben nicht meine Welt ist.

Trotzdem: Ein interessanter Ansatz!

 

Gruß

J.J.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Mit zwei Stellen, eine für mobile anderen für normale ist nicht eine gute Sache. Sie müssen zwei Gruppen von Dateien zu erhalten! 
 
Hier arbeiten wir mit 1 Satz von Dateien und Gebäude für Mobile / Tablet - mit dem normalen Computer / Laptop-Größe perfekt funktioniert auch. 
 
Mit getrennten web-seiten ist Wahnsinn
 
--------------------------------------

 

Sorry if that translation is not so good;

 

 

 

Having two sites, one for mobile another for normal is not a good thing.  You have to maintain two sets of files!
 
Here, we are working with 1 set of files and building for Mobile/Tablet - with the normal computer / laptop size working perfectly as well.
 
Having separate sites is madness
bearbeitet von burt

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

 

Having separate sites is madness

 

 

 

Hallo,

 

das responsible Design ist auf jeden Fall sehr viel besser als ein fixes, das auf Mobilgeräten eigentlich gar nicht geht, ohne ständig hin- und herrutschen und vergrößern zu müssen. Für viele Produkte ist es sicher sehr gut geeignet.

 

Dennoch: 20 Requests mit 321 kB sind eine Menge, die je mach Mobilverbindung erst mal abgearbeitet werden muß. Bei G-Speed kommt die Seite auf 79. Meines kommt auf 7 Requests, 56 kB und G-Speed 91. Meine "madness" zeigt schon ihren Effekt. :D

 

Gruß

weinhexe

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Moin Moin,

 

also Bootstrap ist wirklich schön. Es gibt auch diverse kostenfreie Vorlagen wie http://bootswatch.com/ . Natürlich sind die Dinge nicht unbedingt auf Shopping optimiert. Interessant wäre sicher eine Studie hierzu zu sehen ob und wenn welche Version (Responsive oder Useragentswitcher) eher das Mittel der Wahl sind.

Ein schönes Beispiel für RESPONSIVE aus Bootswatch -> http://tatort-fans.de leider kein Shop aber gute Anwendungsbeispiele (Easy to use)

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hi,

 

mittlerweile steht hier ein fertiger responsivie osC-Shop zum Download bereit. Man muss nicht alles gut finden, wie das im einzelnen gelöst wurde, aber das muss man beim Standard-osC ja auch nicht und es läßt sich ja auch alles nach Belieben ändern. Auf alle Fälle ist diese Lösung 100% responsive und kann damit auf dem Desktop genauso genutzt werden, wie auf Mobil-Geräten.

 

"Fertig" ist natürlich relativ zu verstehen: Wie Standard-osC ist auch burts Lösung nur ein Rahmen, der für deutsche Verhältnisse noch stark angepasst werden muss.

 

Gruß

J.J.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hallo,

im Augenblick experimentiere ich mit dieser Version etwas herum.

Ich habe FAQDesk for v2.3.1 eingebaut und sehe, das die Seite faq.php deutlich mehr Platz einnimmt als zum Beispiel die shipping.php.

Ansonsten funktioniert das einwandfrei.

 

Meine FAQ.php sieht wie folgt aus:

 

<?php
/*
  $Id: FAQDesk 2.3

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright © 2010 osCommerce

  Released under the GNU General Public License
*/

  require('includes/application_top.php');

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_FAQ);

  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_FAQ));

  require(DIR_WS_INCLUDES . 'template_top.php');
?>

<script language="JavaScript">
    function showItem(id){
         var item = document.getElementById(id);
         if (item){
               if (!item.style.display || item.style.display == '' )
                   item.style.display = 'none';
               else
                   item.style.display = '';
         }
   }
</script>

<div class="page-header">
  <h1><?php echo HEADING_TITLE; ?></h1>
</div>

<p><?php echo TEXT_CLICK_REVEAL; ?></p>

<div class="contentContainer">
  <div class="contentText">
 
  <table border="0" width="100%" cellspacing="0" cellpadding="2">
<?php
  $faq_query = tep_db_query('select f.faq_id, fd.faq_question, fd.faq_answer, f.last_modified, f.sort_order, f.faq_status from '.TABLE_FAQ.' f,  '.TABLE_FAQ_DESCRIPTION.' fd where f.faq_id=fd.faq_id and f.faq_status and fd.language_id=' . (int)$languages_id . ' order by f.sort_order, fd.faq_question');
      $count = 1;
      while($faq = tep_db_fetch_array($faq_query)){
?>
      <tr>
         <td class="main"><b style="cursor:pointer;" onclick="showItem('faq_answer_<?php echo $faq['faq_id'];?>')"><?php echo $count . '. ' . $faq['faq_question'];?></b></td>
      </tr>
      <tr>
         <td style="padding-top:5px;display:none;" id="faq_answer_<?php echo $faq['faq_id'];?>">
            <table border="0" cellspacing="0" cellpadding="2">
               <tr>
                  <td class="main"><?php echo $faq['faq_answer'];?></td>
               </tr>
               <tr>
                  <td class="smallText"><?php echo TEXT_LAST_UPDATED . $faq['last_modified'];?></td>
               </tr>
           </table></td>
      </tr>
      <tr>
         <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10')?></td>
      </tr>
<?php
        $count++;
      }
?>
    </table>
  </div>

  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'glyphicon-chevron-right', tep_href_link(FILENAME_DEFAULT)); ?></span>
  </div>
</div>

<?php
  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>
 

 

In der shipping.php ist dort nur:

 

<div class="contentContainer">
  <div class="contentText">
    <?php echo TEXT_INFORMATION; ?>
  </div>
 

zu finden.

 

 

Was übersehe ich?

 

Danke für eure Hilfe

Gruesse

ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

UPS....Da ist wohl ein Teil meines Textes verschwunden.

Hier die Ergänzung:

 

Ich habe FAQDest vor v231 eingesetzt, was auch reibungslos funktioniert.

Die faq.php braucht aber viel mehr Platz als z.B. die shipping.php.

 

Das möchte nun angleichen.

 

Was übersehe ich?

 

Danke

ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hi,

 

das sind ja auch zwei Paar Stiefel! Die shipping holt sich schlicht einen Text aus der Sprachdatei (TEXT_INFOMATION), während in Deiner FAQ-Anwendung offenbar Fragen und Antworten in der DB hinterlegt sind.

Anpassung an Bootstrap hieße, die gesamte table-Struktur auszubauen und durch eine <div>-Struktur zu ersetzen.

 

Gruß

J.J.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Danke Dir.

 

Das ist wohl war.

Die Tablestruktur durch <div> ersetzen muss ich noch machen.

 

Ich habe das im Augenblick so gelöst: -> einfach rausgenommen

 

....

      <tr>
<!--         <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10')?></td> -->
      </tr>

.....

 

Ohne diese Zeile funktioniert es.

 

Beste Gruesse

ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Ich habe das jetzt wie folgt gelöst:

catalog/faq.php

....

<div class="page-header">
  <h1><?php echo HEADING_TITLE; ?></h1>
</div>

<p><?php echo TEXT_CLICK_REVEAL; ?></p>

<div class="contentContainer">
  <div class="contentText">
 
  <table border="0" width="100%" cellspacing="0" cellpadding="2">
<?php
  $faq_query = tep_db_query('select f.faq_id, fd.faq_question, fd.faq_answer, f.last_modified, f.sort_order, f.faq_status from '.TABLE_FAQ.' f,  '.TABLE_FAQ_DESCRIPTION.' fd where f.faq_id=fd.faq_id and f.faq_status and fd.language_id=' . (int)$languages_id . ' order by f.sort_order, fd.faq_question');
      $count = 1;
      while($faq = tep_db_fetch_array($faq_query)){
?>
      <tr>
         <td class="main"><b style="cursor:pointer;" onclick="showItem('faq_answer_<?php echo $faq['faq_id'];?>')"><?php echo $count . '. ' . $faq['faq_question'];?></b></td>
      </tr>
      <tr>
         <td style="padding-top:5px;display:none;" id="faq_answer_<?php echo $faq['faq_id'];?>">
            <table border="0" cellspacing="0" cellpadding="2">
               <tr>
                  <td class="main"><?php echo $faq['faq_answer'];?></td>
               </tr>
               <tr>
                  <td class="smallText"><?php echo TEXT_LAST_UPDATED . $faq['last_modified'];?></td>
               </tr>
           </table></td>
      </tr>
      <tr>
<!--         <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10')?></td> -->
<td><br></td>
      </tr>
<?php
        $count++;
      }
?>
    </table>
  </div>

...

 

Beste Gruesse

ollie

 

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hallo,

ich habe ein File namens bootstrap.css.map gefunden.

Ich arbeite mit einem Mac und kann dieses file nicht öffnen. Einen passenden Konverter oder ein weiteres tool habe ich im Netz nicht finden können.

Meine Frage:

Mit welchem Programm wurde diese Datei erstellt?

 

Danke für eure Hilfe

Beste Gruesse

ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Ollie;  Hallo, müssen Sie nicht öffnen oder ändern sie bootstrap.css.map - dies ist eine interne Datei, die von Chrome und Firefox verwendet wird.

 

And sorry for the poor german translation.  You must not edit or change the file it is an internal file used by Chrome and Firefox.  In fact you should not change ANY of the existing CSS or Bootstrap files, you can in fact over-ride them all to suit your site design.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hi Burt and thank you very much.

OK!! I changed some of the bootstrap-files....I added epf (extra product field) :-))

Thera are still some small bugs but it works.

 

I am looking for a manual for the "over-ride" technology as I got no experience concerning that.

I'm not afraid of books.

Do you got any suggestions?

best whishes

ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hi,

 

es gibt da eine user.css, die dafür gedacht ist, individuelle CSS-Änderungen unterzubringen. Der System-Core - das ist wohl burts Idee - sollte möglichst unangetastet bleiben.

Manual hab ich auch noch keines gesehen, aber die Site http://getbootstrap.com/ ist sehr ausführlich und informativ, wenn man sich in das System reinwursteln möchte. :rolleyes:

 

Gruß

J.J.

1 Person gefällt das

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Gruess Dich J.J.

 

ich sehe immer wieder, das in GitHub neue Änderungen an der 2334bs gemacht werden. Vollziehst Du die nach?

Anders ausgedrückt: Setzt Du das bei Dir kontinuierlich um?

 

Danke Dir

Ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hi Ollie,

 

nein, mach ich nicht. Ich verfolge mit einem Auge die Diskussion im Amiforum - wenn mich was interessiert, probier ich es aus. Sagt es mir dann zu, kommt es rein, sonst nicht. Sonst wirst Du ja nie fertig! :wacko:

Ich finde den Ansatz immer noch super, aber über Details kann man streiten. Abgesehen davon geht manches (z.B. checkout_confirmation) hierzulande schon aus rechtlichen Gründen so überhaupt nicht.

 

Gruß

J.J.

bearbeitet von De Dokta

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Danke Dir J.J.

 

Ich habe noch eine weitere Frage:

 

In maximum values kann ich unter search results für die 2334bs die Anzahl der zu zeigenden Produkte im frontend einstellen.

Diese Eingabe ist dann aber auch im adminbereich wirksam.

Wie kann ich diese Eingabe für den adminbereich umgehen?

 

Danke Dir

Ollie

 

p.s.

 

könnte für Dich auch interessant sein...

 

http://forums.oscommerce.com/topic/397466-2334bs-on-ipad-1-and-ipad-4/

bearbeitet von chilinotes

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

In maximum values kann ich unter search results für die 2334bs die Anzahl der zu zeigenden Produkte im frontend einstellen.

Diese Eingabe ist dann aber auch im adminbereich wirksam.

Wie kann ich diese Eingabe für den adminbereich umgehen?

Hi,

 

wo hat diese Einstellung denn Auswirkungen im Admin? Bei der Produktsuche? Dürfte nicht sein!

 

J.J.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

bei

- Ranking gekaufte Produkte

- Ranking besuchte Produkte

- Product Monitor 1.0

 

aber nicht bei der Produktsuche

Max products per page admin-side

 

Ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hmm,

 

das steckt z.b. in der stats_products_purchased.php hier:   $products_split = new splitPageResults($_GET['page'], MAX_DISPLAY_SEARCH_RESULTS, $products_query_raw, $products_query_numrows);
 

Du kannst 1. MAX_DISPLAY_SEARCH_RESULTS durch einen anderen Schalter (davon gibts ja einige in maximum values) ersetzen.

2. hardcoded irgendeine genehme Zahl angeben: $products_split = new splitPageResults($_GET['page'], '150', $products_query_raw, $products_query_numrows);

3. die ganze Zeile auskommentieren (dann mußt Du auch weiter unten jeweils die <td>s mit MAX_DISPLAY_SEARCH_RESULTS auskommentieren/rausnehmen), dann werden Dir immer alle Einträge auf einer Seite angezeigt. Ob es Sinn macht, mehrere 1000 Einträge auf einer Seite anzuzeigen, mußt Du wissen. :blink:

 

Product Monitor 1.0 bin ich überfragt. Ich kenne das Dingens nicht, vermute aber mal kess, dass es da genauso gestrickt ist.

 

Gruß

J.J.

bearbeitet von De Dokta

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Einen schönen Guten Abend und Danke Dir.

 

Ich habe mir in der Configuration-Group 3 jetzt eine weitere Einstellmöglichkeit geschaffen und diese MAX_DISPLAY_SEARCH_RESULTS_BACKEND genannt.

Die Originaldaten wollte ich nicht ändern, da ich nicht weiss was alles darauf zurückgreift; stats_products_purchased.php geändert und jetzt bin ich zufrieden. :)

Die Product Monitor 1.0 - Contrib greift ebenfalls darauf zurück.

 

Beste Gruesse

Ollie

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Hi,

 

irgendwie ist das Thema hier etwas eingeschlafen. :unsure:

Um dem Ganzen mal wieder etwas Leben einzuhauchen, habe ich eine für den deutschen Markt angepaßte Demo-Version von burts Bootstrap-Version (basierend auf osc 2.3.4) online gestellt. Zu finden hier.

Das Verhalten der BS-Version auf Tablets und Smartphones kann man im Firefox mit Strg + Umschalt + M simulieren.

 

Gruß

J.J.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

2 Dinge und 1 Anmerkung.

 

Anmerkung: Sehr erotisches Design. Zumindest bei der Wahl der Farben. *sabber* Sieht gut aus.

 

Ding 1: css code für die Categories Box => via PM SOFORT!  :D  Finde es toll wie die Sub-categories leicht nach rechts verrutschen wenn geöffnet.

Ding 2: Code für das "Back to top" Dings unten rechts => auch hier wieder via PM SOFORT! :D

 

In DE ist man mit anderen Dingen beschäftigt als mit dem Shop / Shopdesign. Zu viele Gesetze die man berücksichtigen muss und zu wenig Zeit um sich mal auf die Shop Funktionen und Aussehen zu konzentrieren. :P  Bin ich froh dass ich auf der anderen Seite des Erdballs lebe. ^_^

bearbeitet von Tsimi

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Erstelle ein Benutzerkonto oder melde dich an um zu kommentieren

Du musst ein Benutzerkonto haben um einen Kommentar hinterlassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Geht einfach!


Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde dich hier an.


Jetzt anmelden