Dokumentation
Mit dem Article Slider kannst du Produkte deines Shops als Slider darstellen und an beliebige Stellen deines Shops einfgen - und das nicht nur ber eine manuelle Auswahl. Erstelle dynamische Slider aus unterschiedlichen Quellen wie Hersteller- und Kategorieseiten und schrnke angezeigten Produkte ber Filter weiter ein.
Du kannst sogar auf Seiten Bezug nehmen, auf denen dein Drop angezeigt wird und so hnliche Artikel oder passenden X-Selling Gruppen darstellen. Wie genau das geht, zeigen wir dir hier.
Artikelauswahl ber Datenquelle
Im Reiter "Quelle" bestimmst du die
Datenquelle
deines Article Sliders.
Folgende Mglichkeiten stehen dir zur Verfgung.
| Datenquelle |
Erklrung |
| Manuelle Auswahl |
Erlaubt die handerlesene Auswahl von Artikeln. Du kannst nach Artikelnummern und Artikelnamen suchen. |
| Kategorie |
Stellt Artikel aus einer Kategorie dar. Du kannst zustzlich whlen, ob du Produkte aus Unterkategorien einbeziehen mchtest. |
| Hersteller |
Stellt Artikel eines gegebenen Herstellers dar. |
| Merkmal |
Stellt Artikel eines gegebenen globalen Merkmalwertes dar. |
| Suche |
Sucht Artikel nach angegebenem Suchausdruck. |
| Aktuelle Kategorie/Hersteller/Merkmalwert |
Nutzt die Artikelliste als Datenquelle, auf die der Article Slider dargestellt wird. Details siehe unten. |
| Aktueller Artikel |
Nutzt bestimmte Artikellisten eines Produktes. Details siehe unten. |
| Warenkorb |
Stellt alle Artikel dar, die sich im Warenkorb befinden. |
| Global |
Stellt zunchst alle Artikel des Shops dar, die dann weiter gefiltert werden knnen. |
Beachte, dass du deine Artikelauswahl bei dynamischen Datenquelle wie Kategorie, Hersteller, Merkmalwerte oder Global weiter filtern kannst, um genau auf deine Bedrfnisse angepasste Produktslider zu erstellen. Mehr dazu weiter unten.
Aktuelle Kategorie/Hersteller/Merkmalwert
Whlst du als Datenquelle
Aktuelle Kategorie/Hersteller/Merkmalwert, werden Produkte aus der aktuellen Produkliste in deinem Article Slider erscheinen. Diese Quelle funktioniert folglich nur, wenn dein Drop auf einer Artikellisten-Seiten deines JTL-Shops (Kategorie-, Hersteller-, Merkmalwert- oder Suchseite) dargestellt wird.
Wird das Drop bspw. auf einer Kategorieseite "Blumenwiesen" dargestellt, werden im Slider zunchst Produkte aus eben dieser Kategorie angezeigt. Diese Produkte kannst du dann weiter filtern, um bspw. Bestseller, Sonderangebote oder neue Artikel dieser Kategorie anzuzeigen. Mehr zum Filtern findest du weiter unten.
Aktueller Artikel
Fgst du dein Drop auf einer Artikeldetailseite ein, ist es auch mglich als Datenquelle
Aktueller Artikel
zu verwenden.
Mit dieser Datenquellen kannst du folgende artikelbezogene Listen mit deinem Drop darstellen:
- hnliche Artikel
- Kunden kauften auch
- X-Selling Gruppen
- Artikel vom gleichen Hersteller
- Artikel aus der gleichen Kategorie
Beachte, dass diese Artikellisten mageblich durch deine Shopdaten (Merkmale der Artikel, X-Selling Gruppen) und Einstellungen im JTL-Shop bzw. der JTL-WaWi bestimmt werden. Im
JTL-Guide
findest du Informationen darber, wie du diese Daten pflegst bzw. diese Listen manipulierst.
Artikelauswahl verfeinern durch Filter
Ist deine gewhlte Datenquelle filterbar (z.B. Kategorien, Suchen, ...), kannst du im Reiter "Filter" diverse Filter festlegen, um die Auswahl deiner Slider-Artikel weiter einzugrenzen.
| Filteroption |
Erluterung |
| Suchspezialfilter |
Besondere Produkte wie Sondererangebote, Neu im Sortiment, Top Angebote, In Krze Verfgbar und Top Bewertet. |
| Kategorie-, Hersteller-, oder Merkmalfilter |
Je nach Auswahl der Datenquelle, analog zur Filterung von Artikellisten im JTL-Shop. |
| Preis von ... bis ... |
Ermglicht das Festlegen einer Preisspanne. |
Bitte beachte, dass bei Suchspezialfiltern die gleichen Regeln wie in deinem JTL-Shop selbst gelten. Ob ein Artikel als Bestseller gilt, konfigurierst du im JTL-Shop Backend, Top- und neue Artikel definierst du in der JTL-WaWi.
Mehr Informationen findest du im JTL-Guide.
Artikelanzeige anpassen
Im Reiter "Artikelanzeige" kannst du einige optische Anpassungen vornehmen.
Mit der
Sortierung
legst du fest, welche Artikel zuerst angezeigt werden sollen. Die aus den Artikellisten des JTL-Shops blichen Mglichkeiten (Name, Preis, Bewertungen, Bestseller) werden ergnzt durch Spezialflle wie
Zufall, wodurch die Artikel der Datenquelle zufllig durchgemischt werden.
Gerade bei potentiell umfangreichen Ergebissen deiner Datenquelle empfehlen wir dir, die
Artikelanzahl
zu beschrnken.
Wieviele Artikel in deinem Slider nebeneinander angezeigt werden, bestimmst du mit den Optionen
Anzahl von Artikeln nebeneinander
und der
Minimale Breite eines Artikels. Beachte, dass das Drop responsiv ist und versucht, immer 100% der Breite des Einfgeortes auszunutzen. Reicht der Platz fr deine Einstellungen nicht aus, gibt es einen "Umbruch" und es werden mitunter weniger Artikel dargestellt als von dir angegeben.
Mit der Option
Artikeltemplate
legst du fest, wie die Artikel letzendlich darsgestellt werden. Im
Standard
versucht sich der Article Slider in die Optik deines aktuellen Template einzufgen. Musst du noch mehr Kontrolle ber die Darstellung deiner Artikel innerhalb des Slides haben, nutze die Option
Eigenes Template.
Eigenes Artikeltemplate
Aktivierst du die Option
Eigenes Template, kannst du in einem separaten HTML-Control Smarty- und HTML-Code hinterlegen, um dein Article Slider individuell zu gestalten. Du hast hierbei Zugriff auf die Smarty-Variable
$sliderArticle, welche das Artikelobjekt des Artikels im Slider beinhaltet. Ein einfaches Beispiel:
<div class="my-slider-article tcenter">
<img src="{$sliderArticle->Bilder[0]->cPfadNormal}"/>
<h3 class="article-name">{$sliderArticle->cName}</h3>
<div class="article-desc">{$sliderArticle->cKurzBeschreibung|truncate:50}</div>
<div class="article-price">{$sliderArticle->Preise->cVKLocalized[$NettoPreise]}</div>
</div>
Tipp:
in EVO basierenden Templates nutzt der Article Slider Bausteine des EVO-Templates nach, hier konkret die Datei
[EVO-Root]/productlist/item_slider.tpl. nderungen an dieser Datei (bzw. in der Datei des Child-Templates) wirken sich dann auf die Slider deines Template und auch auf deine Article Slider Drops aus!
Slider konfigurieren
Schlielich hast du im Reiter "Slider" noch die Mglichkeit, Einstellungen zur Usability des Sliders vorzunehmen:
-
Navigation anzeigen: Gibt an, ob die Pfeile zur Navigation mit angezeigt werden sollen.
-
Autostart: Ist diese Option aktiviert, beginnt der Slider beim Seitenaufruf automatisch mit dem Scrollen des Inhalts.
-
Scrollsteps: Gibt an, wieviele Items beim Scrollen gewechselt werden. Ist der Wert hher als die Anzahl der sichtbaren Elemente, scrollt der Slider maximal die Anzahl der sichtbaren Elemente.
-
Scrollzeit: Gibt an, wie lang die Animation zum Scrollen bentigt. Der Wert wird in Millisekunden angegeben.
-
Umbruch bei Ende: Gibt an, ob eine "Weiter"-Navigation am Ende der Liste diese wieder zurck zum Anfang springen lsst.
Appendix
Optische Anpassungen
Hier ein paar Tipps, wie du den Slider am besten an deine Bedrfnisse anpasst. Allgemeine Tipps zum Styling von Drops findest
du im Wiki.
Der Slider versucht das Styling des ueren Containers (Standardmig
.kk-article-slider, alternativ auch die von dir in den Einstellungen vergebene Klasse) so gut wie mglich zu beachten. Setze deine Styles (margin, padding, width) also am besten auf dieses Element. Das Padding links/rechts gibt hierbei auch an, wie weit der Abstand des inneren scrollbaren Bereichs nach Auen betragen soll. Das ist bspw. ntzlich, wenn du die Navigationspfeile abndern mchtest.
.kk-article-slider {
padding: 20px; /* some breathing room */
margin: 10px 0;
width: 300px;
}
