MEHR FUNKTIONEN, MEHR E-COMMERCE:

Transkript

1 MEHR FUNKTIONEN, MEHR E-COMMERCE: XT:COMMERCE TEMPLATE BB BOOTSTRAP 3

2 XT:COMMERCE TEMPLATE BB BOOTSTRAP 3 FEATURES aktuelles CSS3 Template: Das Blackbit Bootstrap Template ist ein aktuelles CSS3 Template für xt:commerce 4.1 im Twitter-Bootstrap Design. suchmaschinenfreundlich: Das Blackbit Bootstrap Template basiert auf dem suchmaschinenoptimierten Standard-Template der Version 4.1. responsive Design: Das Design ist für die Darstellung auf Desktop- und Tablet-Computer optimiert. einfache Adaption des Designs für Webentwickler: Verwenden Sie dieses Template als Grundgerüst für Ihr individuelles Shop-Design. Startseiten-Slider: Binden Sie einen auffälligen Produkt-Slider auf der Startseite Ihres Shops ein. (Hierfür ist das Plugin xt_startpage_product erforderlich; weitere Infos dazu im Kapitel Startseiten-Slider )

3 INSTALLATIONSANLEITUNG 1 Entpacken Sie die ZIP-Datei, die Sie per erhalten haben. 2 Sie erhalten folgende Verzeichnisstruktur: + /plugins! /4.1.10/bb_bootstrap3! /4.2.00/bb_bootstrap3 + /templates! /bb_bootstrap3 + /updates! /4.1.10! / /xtframework! /library/jquery/ INSTALLATION DER BENÖTIGTEN DATEIEN FÜR DAS TEMPLATE UND DES DAZUGEHÖRIGEN PLUGINS 1 Wenn Sie einen xt:commerce Shop oder eine ältere Version verwenden, kopieren Sie das Verzeichnis /plugins/4.1.10/ bb_bootstrap3 in das Verzeichnis /plugins Ihres Shops auf dem Webserver. Bei einem Shop ab der Version kopieren Sie das Verzeichnis /plugins/4.2.00/bb_bootstrap3 in das Verzeichnis /plugins Ihres Shops auf dem Webserver. 2 Kopieren Sie das Verzeichnis /templates/bb_bootstrap3 in das Verzeichnis /templates Ihres Shops auf dem Webserver. 3 Kopieren Sie das Verzeichnis /xtframework/library/ jquery/ in das Verzeichnis /xtframework/library/jquery Ihres Shops auf dem Webserver.

4 AKTIVIERUNG DES PLUGINS 1 Öffnen Sie den Administrationsbereich Ihres Shops und melden Sie sich dort als Administrator an. 2 Öffnen Sie Inhalte / Plugin / deinstallierte Plugins und installieren Sie das Plugin bb_bootstrap3 durch einen Klick auf den Button run. 3 Öffnen Sie Inhalte / Plugin / installierte Plugins und öffnen Sie den Eintrag Erweiterung für Template BB Bootstrap 3 durch einen Doppelklick oder den Button Bearbeiten. 4 Aktivieren Sie das Plugin mit Hilfe der Checkbox Plugin Status und einem anschließenden Klick auf den Button Speichern. 5 Laden Sie das Backend Ihres Shops neu (in den meisten Browsern mit der Taste F5). Durch die Installation des Plugins werden neue Ordner unterhalb des Verzeichnisses /media/images angelegt. Diese Ordner werden für neue Bildvarianten benötigt. Bitte überprüfen Sie, ob nach der Plugin-Installation folgende Ordnerstruktur in Ihrem Shop vorliegt. + /media/images/bootstrap3! /bootstrap3/startpage! /bootstrap3/startpage/carousel! /bootstrap3/thumb! /bootstrap3/icon Sofern diese Verzeichnisse nicht angelegt wurden, legen Sie diese bitte an.

5 AKTIVIERUNG DES TEMPLATES 1 Öffnen Sie Shop-Einstellungen / Mandanten / Main Store / Template und nehmen Sie dort die erforderlichen Einstellungen vor. 2 Wählen Sie im Pulldown Template das Blackbit Twitter- Bootstrap 3 Template (bb_bootstrap3) aus. 3 Wählen Sie im Pulldown jquery Version die Version Speichern Sie die neuen Einstellungen durch einen Klick auf den Button Speichern. Tipp: Sie können das Template auch als mobiles Template installieren.

6 STARTSEITEN-SLIDER Um Artikel in einem Slider auf der Startseite Ihres Shops anzuzeigen, gehen Sie wie folgt vor: 1 Öffnen Sie das Backend Ihres Shops. 2 Navigieren Sie in der linken Navigation des Backends zu Shop / Artikel und wählen Sie den gewünschten Artikel aus. 3 Bearbeiten Sie diesen und klicken Sie auf den Reiter Artikel auf Startseite anzeigen. 4 Aktivieren Sie die Checkbox Artikel auf Startseite anzeigen. 5 Klicken Sie im unteren Bereich der Bearbeitungsmaske auf die Schaltfläche Speichern. Damit der Slider auf der Startseite dargestellt wird, müssen Sie das mitgelieferte Plugin Erweiterung für Template BB Bootstrap 3 aktivieren (siehe Aktivierung des Plugins ). Sie können den Slider explizit für Ihren Mandanten aktivieren.

7 OPTIMALE BILD-EINSTELLUNGEN Das Template BB Bootstrap 3 ist für die Ausgabe quadratischer Medienvarianten optimiert (z. B. für Infobilder mit den Maßen 350 Pixel x 350 Pixel). Für eine optimale Produktpräsentation empfehlen wir Ihnen daher, die Bildformate in Ihrem Shop entsprechend anzupassen. Verwenden Sie für das Originalbild immer eine Größe von mindestens 1000 x 1000 Pixel. 1 Navigieren Sie in der West-Navigation (links) zu Inhalte / Media / Bildtypen. 2 Überprüfen Sie die Breiten- und Höhenangaben aller Bildtypen und bearbeiten Sie diese bei Bedarf. Die Bildtypen sollten das Seitenverhältnis 1:1 (Breite = Höhe) haben. 3 Nachdem Sie alle Medienvarianten angepasst haben, navigieren Sie auf derselben Ebene zum Menüpunkt Media Gallery / Artikelbilder und führen Sie das ImageProcessing durch. 4 Nach Abschluss des ImageProcessings sind die vorgenommenen Änderungen für alle Bilder im Shop umgesetzt.

8 TEMPLATE-UPDATE HINWEIS: Es ist sinnvoll, Sicherheitskopien der zu ändernden Dateien anzulegen. Template-Update-Schritte Standardmäßig ist das Template BB Bootstrap 3 für die Version xt:commerce optimiert. Je nach Version Ihres xt:commerce Shops müssen Sie bestimmte Template-Dateien austauschen. Beachten Sie dabei die Update-Schritte! Beispiel: Wenn Sie das Template für die Version nutzen wollen, müssen Sie zunächst die unten beschriebenen Template-Anpassungen für die Shop-Version und anschließend die Anpassungen für die Shop-Version durchführen. Anpassung des Templates für die Shop-Version Öffnen Sie das Verzeichnis /updates/4.1.10/. Ersetzen Sie die entsprechenden Dateien im Verzeichnis /templates/bb_bootstrap3/ durch die gleichnamigen Dateien aus dem Verzeichnis /updates/4.1.10/. Anpassung des Templates für die Shop-Version Öffnen Sie das Verzeichnis /updates/4.2.00/. Ersetzen Sie die entsprechenden Dateien im Verzeichnis /templates/bb_bootstrap3/ durch die gleichnamigen Dateien aus dem Verzeichnis /updates/4.2.00/.