Sehr geehrte Kunden,
als wir die mobile Shopversion ausgeliefert haben, haben viele Shopbetreiber zurecht den Nachteil bemängelt, dass man darin die Artikel, die über den Konfigurator gepflegt werden, im mobilen Shop nicht sehen konnte.
Nach ein paar Meetings und am Ende dem richtigen Konzept haben wir eine Lösung erarbeitet, die wie wir denken, auch auf diesem kleinen Display eines Smartphones einen so komplexen Konfigurator-Artikel darstellen kann.
Die Bedienung haben wir so usability-freundlich wie nur möglich geschaffen und denken das Ergebnis kann sich sehen lassen. Zunächst erscheint im Artikel anstatt des "in den WK" der Button "Konfigurieren":
danach durchläuft der Besucher in jeweils einzelnen Masken die Konfigurations-Schritte:
..sind alle Optionen gewählt, gibt es noch die Seite mit der Zusammenfassung und den evtl. Feldern für wie in diesem Beispiel einen Gravur-Wunsch-Text:
Auf dieser Seite kann man mit dem Finger auch noch auf die einzelnen Optionen klicken und diese einzeln verändern!
Legt man den Artikel in den Warenkorb, so wird darin wie gewohnt auch die Zusammenfassung der gewählten Optionen angezeigt:
Einrichten des Konfigurators für das mobile Frontend:
Bei Layout > Mobile > Template Artikeldetail muss der Code:
direkt vor:
Sieht also dann etwa so aus:
über Layout > Mobile > Template Warenkorb - Artikel vor das letzte </div> einfügen:
Sieht dann ca. so aus:
Die Optionen haben eine eigene CSS-Klasse: aa_text und option, falls man diese anpassen wollte. Für die meisten Shops, deren mobile-Design wir sehr einheitlich eingestellt haben passt die hier ausgelieferte Version.
Hinweis: Die Wörter "Ihre Konfiguration" && der Spruch darunter sind in deutsch und englisch fest eingestellt. Sollten Sie den mobilen Shop auch in anderen Sprachen mit Konfigurator nutzen, bitte bei uns mit der Übersetzung melden. Tragen wir dann hart in das jeweilige Skript ein.
Wie immer hier der Hinweis, wenn Sie das Feature für Ihre eigene mobile Version nachrüsten möchten und sich das nicht zutrauen, dann bitte einfach uns beauftragen. Ist hier eine Sache von wohl nicht mehr als 10-15 Minuten..
als wir die mobile Shopversion ausgeliefert haben, haben viele Shopbetreiber zurecht den Nachteil bemängelt, dass man darin die Artikel, die über den Konfigurator gepflegt werden, im mobilen Shop nicht sehen konnte.
Nach ein paar Meetings und am Ende dem richtigen Konzept haben wir eine Lösung erarbeitet, die wie wir denken, auch auf diesem kleinen Display eines Smartphones einen so komplexen Konfigurator-Artikel darstellen kann.
Die Bedienung haben wir so usability-freundlich wie nur möglich geschaffen und denken das Ergebnis kann sich sehen lassen. Zunächst erscheint im Artikel anstatt des "in den WK" der Button "Konfigurieren":
danach durchläuft der Besucher in jeweils einzelnen Masken die Konfigurations-Schritte:
 | -> |  |
..sind alle Optionen gewählt, gibt es noch die Seite mit der Zusammenfassung und den evtl. Feldern für wie in diesem Beispiel einen Gravur-Wunsch-Text:
Auf dieser Seite kann man mit dem Finger auch noch auf die einzelnen Optionen klicken und diese einzeln verändern!
Legt man den Artikel in den Warenkorb, so wird darin wie gewohnt auch die Zusammenfassung der gewählten Optionen angezeigt:
Einrichten des Konfigurators für das mobile Frontend:
Bei Layout > Mobile > Template Artikeldetail muss der Code:
<input type='submit' class='button2' value='Konfigurieren' style='position:absolute' data-cont="#konfigurator">
direkt vor:
<input type='submit' class='button2' value='In den Warenkorb'>
eingetragen werden.Sieht also dann etwa so aus:
...olspan=2>#lager_drop
<input type='submit' class='button2' value='Konfigurieren' style='position:absolute' data-cont="#konfigurator">
<input type='submit' class='button2' value='In den Warenkorb'></td>
</tr></form><tr>...
<input type='submit' class='button2' value='Konfigurieren' style='position:absolute' data-cont="#konfigurator">
<input type='submit' class='button2' value='In den Warenkorb'></td>
</tr></form><tr>...
über Layout > Mobile > Template Warenkorb - Artikel vor das letzte </div> einfügen:
<div data-cont='#count_#konf_text#' style='margin:5px;'><b>Ihre Konfiguration:</b><br>#konf_text</div>
Sieht dann ca. so aus:
..v class=mwst>#mwst Mwst.</div></span></td></tr></table></td></tr></table>
<div data-cont='#count_#konf_text#' style='margin:5px;'><b>Ihre Konfiguration:</b><br>#konf_text</div>
</div>
<div data-cont='#count_#konf_text#' style='margin:5px;'><b>Ihre Konfiguration:</b><br>#konf_text</div>
</div>
Die Optionen haben eine eigene CSS-Klasse: aa_text und option, falls man diese anpassen wollte. Für die meisten Shops, deren mobile-Design wir sehr einheitlich eingestellt haben passt die hier ausgelieferte Version.
Hinweis: Die Wörter "Ihre Konfiguration" && der Spruch darunter sind in deutsch und englisch fest eingestellt. Sollten Sie den mobilen Shop auch in anderen Sprachen mit Konfigurator nutzen, bitte bei uns mit der Übersetzung melden. Tragen wir dann hart in das jeweilige Skript ein.
Wie immer hier der Hinweis, wenn Sie das Feature für Ihre eigene mobile Version nachrüsten möchten und sich das nicht zutrauen, dann bitte einfach uns beauftragen. Ist hier eine Sache von wohl nicht mehr als 10-15 Minuten..