tfm_xslider (xt:Commerce 4.2.00)

Der Startseiten-Slider für Ihren xt:Commerce 4 Shop

Das Plugin tfm_xslider ermöglicht Ihnen auf einfache Weise einen leicht zu handhabende Content-Slider an verschiedene Positionen in Ihrem Shop einzubinden.

Das besondere an dem Plugin ist, dass wir versucht haben eine Lösung zu schaffen, welche von Kunden einfach in kleine Shops integriert werden kann und gleichzeitig eine hochgradig flexible Lösung für Agenturen zu erstellen, die sich problemlos mit den verschiedensten Slider-Frameworks betreiben lässt.

Im Rahmen dieses Konzepts, haben wir neben dem Coda-Slider ebenfalls einen Modus in den Slider integriert, welcher bereits für Bootstrap-Templates vorbereitet ist.

Inhalte lassen sich in vordefinierten Positionen im Slider einbinden, außerdem besteht die Möglichkeit alle Elemente im Slider individuell per CSS zu positionieren. Als Agentur haben Sie so die Möglichkeit Ihren Kunden den Slider zu installieren und die Positionen der Inhalte zu fixieren, Ihre Kunden können danach Slider-Inhalte nach eigenen Wünschen erstellen und positionieren ohne das Stylesheet anpassen zu müssen.

Wie alle 4tfm Plugins, können Sie den xSlider ebenfalls im xt:Commerce Store bestellen.

Der Slider im Shop:

Bild mit Text und Produkten kombiniert
Bild mit Text und Produkten kombiniert
Bilderkarussell mit Text als Overlay
Bilderkarussell mit Text als Overlay
Produkt Slider
Produkt Slider

Adminbereich des Sliders:

Slider Liste
Slider Liste
So können die einzelnen Slides konfiguriert werden.
So können die einzelnen Slides konfiguriert werden.
Produkte können bequem ausgewählt werden um in die Slider eingebunden zu werden.
Produkte können bequem ausgewählt werden um in die Slider eingebunden zu werden.

Installation

Führen Sie zunächst die generelle Installationsanleitung für 4tfm-Plugins aus, bis Sie zum Schritt 4. kommen. Danach fahren Sie hier fort.

Das Plugin sollte nun im Shop installiert und aktiviert sein. Aktivieren Sie nun noch das Plugin für die Mandanten in dem Sie die Funktion nutzen wollen (Plugin-Option “Für Mandant aktivieren”) und laden Sie den Administrationsbereich mit einem Klick auf die F5 Taste neu.

Nun kopieren Sie die Datei “default_slider_bg.png”, welche dem Plugin beiliegt in den Ordner Ihre-Shop/media/images/org/ auf den Webserver Ihres Shops.

(Sie finden die Datei “default_slider_bg.png” im Plugin im Ordner tfm_xslider/images/.)

Konfiguration & Nutzung

Plugin Optionen

Option:Beschreibung:
Für Mandant aktivieren:Diese Option aktiviert das Plugin für diesen Mandanten
JS-Dateien Laden:Mit dieser Option können Sie steuern ob die Javascripte für xt_grid oder bootstrap geladen werden sollen, außerdem können Sie das einbinden der Javascripte generell deaktivieren, falls Sie Ihre eigenen Scripte nutzen wollen.*
CSS-Dateien Laden:Mit dieser Option können Sie steuern ob die Stylesheets für xt_grid oder bootstrap geladen werden sollen, außerdem können Sie das einbinden der Stylesheets generell deaktivieren, falls Sie Ihre eigenen Scripte nutzen wollen.*
HTML-Editor für Beschreibungsfelder:

Mit dieser Option können Sie steuern, ob im Backend des Shops die "Beschreibung"-Felder des Sliders bzw. der Slides einen HTML-Editor als Eingabe-Feld verwenden sollen.

Wir empfehlen dieses generell eher nicht, da es hier durchaus zu Problemen bei der Anzeige des Inhalts kommen kann. Sollten Sie den Editor jedoch mit Bedacht verwenden, dann spricht nichts dagegen diesen zu aktivieren.

* Bitte bedenken Sie, dass das deaktivieren der Scripte den Slider Funktionsunfähig macht, sofern Sie nicht andere Scripte einbinden die die Funktionalität wieder herstellen. Wir haben diese Optionen integriert um Ihnen bzw. Ihrem Dienstleister zu ermöglichen andere Slider-Scripte als die von uns integrierten zu nutzen. (Siehe auch: Entwickler-Infos)

Erstellen eines Sliders

Um einen Slider für Ihren Shop zu erstellen gehen Sie wie folgt vor:

Öffnen Sie die Slider-Übersicht mit einem Klick auf “4TFM xSlider” im Menü “Shop”. Hier können Sie neue Slider für Ihre Shops definieren.

In diesem Screenshot sehen Sie bereits zwei definierte Slider, sollten Sie das Plugin gerade installiert haben ist die Liste noch leer:

Slider Liste

Klicken Sie auf “neu” um Ihren ersten Slider zu erstellen.

Nun müssen Sie verschiedene Grundkonfigurationen machen:

Option:Beschreibung:
StatusMit dieser Option können Sie den gesamten Slider deaktivieren
CodeIn dieser Option müssen Sie einen Code definieren. Diesen nutzen wir später um den Slider im Template zu positionieren. Bitte nutzen Sie hier ein zusammenhängendes Wort ohne Umlaute und Sonderzeichen. Wir empfehlen etwas wie "Slider1", "Slider2", "Slider_Landingpage" etc.
Template

Hier müssen Sie das Tempalte für den Slider wählen. Sollten Sie xt_grid oder ein xt_grid basiertes Template benutzen, oder dieses nicht genau wissen, ignorieren Sie diese Option. (In diesem Fall wird automatisch das Template "xt_grid_default.html" benutzt.

Sollten Sie ein ein responsive "Bootstrap"-Template nutzen, wählen Sie hier "bootstrap.html".

Wichtig: Sollten Sie oder Ihr Dienstleister ein Template für Ihren Shop für den Slider erstellt haben, wird dieses hier angezeigt werden. Ggf. müssen Sie hier also ein abweichendes Template auswählen.

Slider Name & InfoDiese Felder werden von Haus aus nicht im Template angezeigt und können genutzt werden um Informationen zum Slider zu hinterlegen. Sollten Sie eine Überschrift über dem Slider einbinden wollen, dann könnten Sie z.B. dieses Feld dazu nutzen oder die Datenbank entsprechend erweitern.

Nachdem Sie alle Felder entsprechend Ihren Vorstellungen gefüllt haben speichern Sie den Slider.

Den Slider haben wir nun definiert, nun muss noch mindestens ein Slide erstellt werden, Klicken Sie auf “Slides Bearbeiten” in der Listenansicht der Slider um dieses zu machen.

Wichtig: Was ist der Unterschied zwischen Slide und Slider?

Der Slider definiert den gesamten Bereich der Animation, ein Slide ist eines der Bilder(bzw. Texte) die innerhalb des Sliders angezeigt werden. D.h. Wollen Sie Ihrem Kunden zwei Bilder im Slider auf der Startseite Ihres Shops anzeigen, dann müssen Sie einen Slider, sowie für jedes Bild einen Slide definieren.

In der folgenden Ansicht sehen Sie alle Slides die diesem Slider zugeordnet sind:

Slider Liste

Sollten Sie einen neuen Slider erstellt haben, ist diese Liste natürlich leer und Sie müssen einen neuen Slide mit einem Klick auf “Neu” anlegen.

So können die einzelnen Slides konfiguriert werden.

In diesem Bild sehen Sie einen Konfigurierten Slide.

Option:Beschreibung:
Bild (oben rechts)<p>Hier können Sie ein Bild hochladen, weches in diesem Slide als Hintergrund eingebunden wird.</p> <p>Wichtig: Laden Sie das Bild in der Breite (und ggf. Höhe) Ihres Sliders in den Shop, das Bild wird in der Originalgröße angezeigt.</p>
Slide StatusMit dieser Option können Sie diesen Slide temporär deaktivieren.
Reihenfolge<p>Mit der Reihenfolge option können Sie steuern in welcher Reihenfolge die Slides im Slider angezeigt werden.</p> <p>Hinweis: Diese Option ist mit der Version 1.0.1 in den xSlider implementiert worden und daher noch nicht auf den Screenshots abgebildet.</p>
Text PositionSollten Sie einen Text innerhalb des Slides anzeigen, können Sie mit dieser Option die Positionierung bestimmen.
Textbox BreiteSollten Sie einen Text innerhalb des Slides anzeigen, können Sie mit dieser Option die breite konfigurieren.
Produktbox PositionSollten Sie einen Produktlisting innerhalb des Slides anzeigen, können Sie mit dieser Option die Positionierung bestimmen.
Slide Überschrift & Slide TextHier können Sie Texte eintragen, welche in der Textbox als Teil des Slides angezeigt werden.
Slide LinkFalls der Slide den Kunden auf einen bestimmten Inhalt (z.B. ein Produkt oder eine Kategorie) verweisen soll, tragen Sie hier die vollständige URL ein.

Mehr zum Thema Positionierung von Inhalten finden Sie unter Positionierung von Inhalten im Slider.

Wiederholen Sie diese Schritte, bis Sie alle von Ihnen gewünschten Slides erstellt haben.

Nun muss der Slider nur noch in das Shop-Template eingebunden werden, hier finden Sie eine Beschreibung zu diesem Schritt.

Optional: Produkte im Slider anzeigen

Der xSlider ist in der Lage Produktdaten in den Slider zu laden um Ihnen die Möglichkeit zu geben diese als Teil des Slides anzuzeigen:

Um dieses zu machen, klicken Sie auf den Knopf “Produkte einbinden” in der Slide-Übersicht.

Nun öffnet sich ein Fenster in dem die diesen Slide zugeordneten Produkte angezeigt werden, falls Sie noch keine Produkte zugeordnet haben ist die Liste leer.

Sie können das Suche-Feld nutzen um nach bestimmten Produkten zu suchen und diese zu aktivieren. Suchen Sie nach einem Stern “*” um alle Produkte anzuzeigen.

Wir empfehlen hier nur 1-2 Produkte auszuwählen, da der Platz im Slider natürlich sehr begrenzt ist.

Produkte können bequem ausgewählt werden um in die Slider eingebunden zu werden.
Bild mit Text und Produkten kombiniert

Slider in Template einbinden

Nachdem Sie einen Slider und einige Slides im Backend des Shops konfiguriert haben, muss der Slider in Ihr Template eingebunden werden.

Dieses können Sie sehr einfach mit folgendem Code machen:

Sollte Ihr Slider also den Code "Shop1_Startpage" haben, müssen Sie folgenden Code in das Template einbinden:

Wichtig ist, dass Sie im Parameter “code” den Code des Sliders einfügen den Sie im Backend konfiguriert haben:

Sollte Ihr Slider also den Code “Shop1_Startpage” haben, müssen Sie folgenden Code in das Template einbinden:

Beispiel: Slider auf der Startseite:

Der wohl gängigste Ort um einen Slider in Ihren Shop einzubinden ist die Startseite, das Ergebnis sollte in etwa wie in folgendem Screenshot aussehen:

Bilderkarussell mit Text als Overlay

Um dieses zu erreichen öffnen Sie die Datei “/templates/xt_grid/index.html”. Suchen Sie folgenden Code:

(Ca. Zeile 44)

Fügen Sie danach folgenden Code ein:

(Ändern Sie hier ggf. den Code in den Code den Sie vergeben haben.)

Positionierung von Inhalten

Das xSlider-Plugin erlaubt Ihnen Inhalte in vorgefertigte Positionen innerhalb des Sliders zu positionieren, hier müssen Sie jedoch auch die zweite Option “Textbox Breite” beachten.

(Bitte beachten Sie, dass dass die Ausrichtung in Bootstrap basierten Templates im Bootstrap modus ggf. leicht an Ihr Design angepasst werden muss. Gerne erstellen wir Ihnen ein Angebot um diese Anpassungen nach Ihren Vorgaben durchzuführen.)

Position Info Screenshot

left_top

Ausrichtung: links oben

Textbox Breite: 370px

left_middel

Ausrichtung: links mittig

Textbox Breite: 370px

left_bottom

Ausrichtung: links unten

Textbox Breite: 370px

center_top

Ausrichtung: zentriert oben

Textbox Breite: 370px

center_middel

Ausrichtung: zentriert mittig

Textbox Breite: 370px

center_bottom

Ausrichtung: zentriert unten

Textbox Breite: 370px

right_top

Ausrichtung: rechts oben

Textbox Breite: 370px

right_middel

Ausrichtung: rechts mittig

Textbox Breite: 370px

right_bottom

Ausrichtung: rechts unten

Textbox Breite: 370px

hide

Hide versteckt die Textbox.

Wenn Sie keinen Text im Slider anzeigen wollen, würden wir eher empfehlen die Felder zu leeren, diese Option ist jedoch zum testen der Positionierungen sehr hilfreich.

 
custom

Mit der Option Custom aktivieren Sie die Ausgabe von eindeutigen CSS-Klassen für dieses Element.

Mit diesen Klassen können Sie die Box wenn gewünscht/erforderlich frei positionieren.

Textbox Breite: 370px

left_top

Ausrichtung: links oben

Textbox Breite: 900px

left_middel

Ausrichtung: links mittig

Textbox Breite: 800px

(Damit die Navigations-Elemente die Box nicht überdecken wurde die Breite auf 800px limitiert)

left_bottom

Ausrichtung: links unten

Textbox Breite: 900px

Entwickler-Infos

Da wir als xt:Commerce Agentur darauf angewiesen sind flexibel auf die Anforderungen unserer Kunden zu reagieren wollen wir Ihnen dieses Möglichkeiten nicht vorenthalten.

Der xSlider erlaubt Ihnen problemlos den von Ihnen bevorzugten (oder vom Kunden benötigten) Javascript-Slider einzubinden.

Um dieses zu machen gehen Sie wie folgt vor:

1. Öffnen Sie Plugin-Optionen des xSliders und setzen Sie Optionen “CSS-Dateien Laden” und “JS-Dateien Laden” auf “disabled“.

(Dieses bewirkt, dass keine Stylesheets und Javascripte aus dem Plugin geladen werden.)

2. Einbinden der Javascripte Ihres bevorzugten Sliders:

Laden Sie die Javascripte des Sliders den Sie einbinden vollen in das Verzeichnis “/templates/ihr-template/javascript/“.

Öffnen Sie die Datei “/templates/ihr-template/javascript/js.php” und fügen Sie für jedes Script diese Zeile ein:

(Passen Sie die “100” durch einen Wert an. Dieser Parameter bestimmt die Reihenfolge der Scripte.)

Nachdem Sie die Datei gespeichert haben laden Sie das Frontend des Shops neu und prüfen Sie ob die Javascripte in den Quelltext des Shops eingebunden wurden.

Ist dieses nicht der Fall, überprüfen Sie diesen Schritt.

Hinweis:

$xtMinify->add_resource() prüft vor der einbindung ob die Datei “_SRV_WEB_TEMPLATES . _STORE_TEMPLATE.’/javascript/ihr-script.js” existiert. Ist dieses nicht der Fall, wird das Script-Tag nicht generiert. D.h. der wahrscheinlichste Fehler ist, dass Sie einen Tippfehler im Dateinamen haben oder der Pfad falsch ist.

3. Einbinden der Stylesheets Ihres bevorzugten Sliders:

Laden Sie die Stylesheets des Sliders den Sie einbinden vollen in das Verzeichnis “/templates/ihr-template/css/“.

(Passen Sie die “100” durch einen Wert an. Dieser Parameter bestimmt die Reihenfolge der Scripte.)

Nachdem Sie die Datei gespeichert haben laden Sie das Frontend des Shops neu und prüfen Sie ob die Stylesheets in den Quelltext des Shops eingebunden wurden.

4. Templateausgabe an Schema des Sliders anpassen:

Öffnen Sie das Verzeichnis “/plugins/tfm_xslider/templates/boxes/” auf dem Server auf dem der Shop installiert ist. Hier finden Sie die beiden Default-Templates (“xt_grid_default.html” & “bootstrap.html“) des Sliders.

Erstellen Sie eine Kopie der Dateien in diesem Verzeichnis und geben Sie der Datei einen eindeutigen Namen.

Wenn Sie nun den Slider im Backend öffnen, sollten Sie in der Lage sein das neue Template für den Slider auszuwählen:

(Ein Beispiel für eine Liquid-Slider-Integration.)

Wählen Sie das neue Template aus und speichern Sie den Slider.

Nun müssen Sie dieses Template entsprechend der Anfoderungen des Sliders anpassen, d.h. Sie sorgen dafür, dass der HTML-Code in der Form ausgegeben wird, wie das von Ihnen verwendete Slider-Plugin dieses benötigt.

5. Positionierung der Slider-Elemente:

Folgendes Script bietet eine gute Grundlage um die Positionierung der Elemente einzubinden:

Bitte beachten Sie, dass die Elemente (da “position:absolute”) von einem relativ positionierten Element (“position:relative”) umschlossen sein müssen.