Template-Funktionen

FLEX ist ein neues Responsive-Template für xt:Commerce 4.1 und 4.1.10. Das minimale Design, das eine flexible Darstellung in verschiedenen Geräten wie Tablets und Smartphones garantiert, erfüllt die aktuellen Anforderungen eines modernen Online-Shops. FLEX ist durch seine minimalistische Gestaltung frei an Ihr Corporate Design anpassbar und erweiterungsfähig. Es greift die klassischen Funktionen des xt:Commerce-Standard-Templates auf und macht diese mobile- bzw. tabletfähig. Zwei verschiedene Varianten von Artikellisten sorgen für Abwechslung.

FLEX basiert auf dem Bootstrap Grid System und wurde von uns, für den Einsatz im xt:Commerce Onlineshop ab Version 4.1, optimiert. FLEX = Flexibel, der Name sagt es schon. Besonders auf Mobile Geräten passt sich das Template der Umgebung an.

‚Form follows function‘ – beim FLEX (Responsive Template) folgen Funktion, Design und Inhalt sozusagen der jeweiligen Bildschirmauflösung des verwendeten Desktop, Tablet oder Smartphone. Im übertragenen Sinne bedeutet das: „FLEX“ ist ein „reagierendes Template“.

Die aktuelle Version ist mit vielen unserer Plugins erweiterbar. So lassen sich per SpecialBoxes gezielt Marketingkampagnen einsetzen, um nur ein Plugin von weit über 100 in unserem Onlineshop zu nennen.

Systemvoraussetzung

Systemvoraussetzung für dieses Plugin ist xt:Commerce ab Version 4.1. Die Aufwärtskompatibilität ist in der Regel gegeben, kann jedoch nicht zu jedem Zeitpunkt garantiert werden.

Installation

Nach der Standardinstallation des Templates müssen folgende Punkte beachtet werden:

  • Sollten die Bildtypen smallproduct in der Größe 100x100px (Klasse: default) und sidebar in der Größe 138 x 138px (Klasse: default) nicht vorhanden sein, legen Sie diese im Backend über Inhalte → Media → Bildtypen  an.
  • anschließend führen Sie das Image-Processing zum Generieren der entsprechenden Bilder durch. Unter media/images/smallproduct und media/images/sidebar sollten nun die neuen Bilder auftauchen. Wenn nicht, prüfen Sie bitte Ihre Schreibrechte!
  • Installieren und aktivieren Sie das Plugin FancyCloudZoom.
    Konfiguration:
    CloudZoom aktiviert: ja
    FancyBox aktiviert: ja
    CloudZoom für Mobile aktiviert:  ja/nein
    FancyBox für Mobile aktiviert: ja
  • Deinstallieren bzw. Deaktivieren Sie das Plugin CloudZoom. Bitte beachten Sie, dass die Plugins FancyCloudZoom und CloudZoom zwei unterschiedliche Plugins sind!!
  • Im Backend unter Shop-Einstellungen → Mandanten → Store → Mobile Template setzen Sie die Werte auf false, da durch das responsive Templateverhalten kein mobiles Template mehr benötigt wird.

Installations- und Einrichtungsservice

Falls Sie das Template nicht selbst installieren oder einrichten möchten, nutzen Sie bitte unseren (kostenpflichtigen) Installations- oder Einrichtungsservice.

Template-Anpassung

Primärfarbe / Farben des Templates einstellen (LESS Settings)

In der Datei vt_flex/javascript/style.less

  • Abschnitt 1.1. BASIC COLORS (ab ~ Zeile 68)
    @baseClr1: #XXXXXX !important; (Farbwert eintragen, z. B. #ff0000, red, rgb(255,0,0))
  • Abschnitt 1.2 MAIN COLORING (ab ~ Zeile 78)
    @default-value:false; (monochrom = true ; Verlauf = false) ;

Dieser Farbverlauf färbt beispielsweise die Titelleisten der Sidebarpanele ein, die Navigationsleiste und die Topbarleiste im Header als Verlauf oder Farbfläche.

Weitere Konfigurationsmöglichkeiten zu Farbabstufungen sind in der Datei style.less zu jedem Abschnitt dokumentiert.

Bildslider auf der Startseite einstellen

Ort im Admin: Inhalte → Contentmanger → Content → index

Im Contentbereich, den Content index öffnen und fügen Sie Ihre Bilder hinzu (Bilder bearbeiten). Die Bilder werden nun auf der Startseite als Slider ausgegeben, wenn es mehr als ein Bild ist. Ansonsten wird es nur als Standbild ausgegeben.

Detailseite, Bildansicht und Zoom

Um die korrekte Darstellung der Bildvorschau bei Mousehover über dem Produktbild zu gewährleisten, müssen folgende Schritte vorgenommen werden:

Suchen Sie aus dem Verzeichnis folgende Datei: vt_flex/xtCore/pages/product/product.html

Für diesen Schritt muss das Plugin FancyCloudZoom aktiv und die o.g. Einstellungen gesetzt sein.
Die Bilder vom Typ smallproduct müssen vorhanden sein (siehe oben), damit die more-images des Artikels angezeigt werden.

Falls Sie die xt:Commerce Version 4.1.00 und 4.1.01_pre verwenden, sind die unten stehenden Anpassungen notwendig:

Ersetzen Sie den Code (ca. Zeile 8):

durch diesen nachfolgenden Code:

Als nächstes suchen Sie in den untenstehenden Code (ca. Zeile 32)

Er wird durch folgenden Code ersetzt:

Bekannte Probleme

Paging-Problem auf der Startseite

Problem:
Bei Listen Darstellungen xt_startpage_products, xt_bestseller_products oder xt_new_products auf der Startseite kann die Nutzung des Pagings zu Seitenladefehlern führen.

Dieses Problem bezieht sich nur auf mehrsprachige Shops!!

Ursache:
Damit das Paging auf der Startseite auch bei mehrsprachigen Shops funktioniert, wurde in der Datei vt_flex/xtCore/pages/navigation/nav_pages.html eine sog. langhack-Variable hinzugefügt.

  • Lösung 1:

In allen Links (href=…) in der Datei nav_pages.html muss der Teil |replace:$langhack:’index‘ entfernt werden, wenn die Mehrsprachigkeit im Shop nicht erforderlich ist.

  • Lösung 2:

Die Variable {assign var=“langhack“ value=“$language/index“} wird um einen Slash erweitert.

Nach dem Einfügen des Slashs sieht die Variable wir folgt aus:
{assign var=“langhack“ value=“/$language/index“}

Fehlerhaftes/Unformatiertes Checkout Design

Ursache:
Dieses Problem kann mit dem Plugin Buttonlösung zusammenhängen.

  • Lösung:

Deinstallieren Sie das Plugin Buttonlösung, weil es nicht mehr benötigt wird.

Plugin xt_ship_track

Problem:
Ab der xt:Commerce Version 4.1 ist das Plugin xt_ship_and_track standardmäßig mit dabei. Dieses überschreibt die Templateigene Datei account_history_info.html.

Aus noch unbekannten Gründen lässt sich diese nicht durch ein eigenes Plugin-Template überschreiben. Das heißt, dass bei Aufruf der Bestellinfo-Seite immer das plugineigene Template geladen wird und dadurch die Darstellung unformatiert bzw. fehlerhaft aussieht.

    • Lösung:

Abhilfe kann man derzeit nur schaffen, indem man die account_history_info.html aus dem Ordner {shoproot}/templates/vt_flex/plugins/xt_ship_and_track/pages/ direkt in den entsprechenden Ordner des Plugins {shoproot}/plugins/xt_ship_and_track/pages kopiert und überschreibt.

Fehlende Boxinhalte

Wenn Sie die standardmäßige Struktur der Contentseiten geändert haben (z.B. gelöscht und neu angelegt) stimmen unter Umständen die abgefragten IDs nicht mehr, hier müssen die IDs ggf. in den folgenden Dateien nachgepflegt werden:

    • vt_flex/xtCore/boxes/box_information.html
    • vt_flex/xtCore/boxes/box_footer_left.html
    • vt_flex/xtCore/boxes/box_footer_right.html