A. Was macht das Plugin?


Mithilfe des Plugin kannst du einfach einen Slider mit deinen wichtigsten Marken (Herstellern) im Shop anzeigen. 

Dabei kannst du die in der Wawi hinterlegten Hersteller und Hersteller Logos verwenden oder du verwendest andere.


Das Plugin

  • Bindet ganz einfach ein Banner/ Slider mit deinen Markenlogos ein
  • Verlinkt diese mit den Herstellerseiten im Shop
  • Ermöglicht bestimmte Hersteller einzublenden oder auszublenden

B. Welchen Vorteil bringt mir das?

  • Zeige deine wichtigsten Marken
  • Zeige diese im Shop an, wo auch immer du willst
  • Pflegeaufwand so gering wie möglich, keine Programmierkenntnisse


1. Hersteller Logos


Auf dieser Seite hast du eine Übersicht aller angelegten Slider. 


Du kannst neue hinzufügen oder bestehende Slider bearbeiten oder löschen.


1.1 Slider-Konfiguration:


Reiter Allgemein:

  • Name: Gib hier der Logo-Gruppe für die Standardsprache im Shop einen Namen. Stehen mehrere Sprache in Ihrem Shop zur Verfügung, dann kannst du mittels einem Klick auf "Mehrsprachigkeit" auch für diese Sprachen die Titel festlegen.
  • Aktiv: Hier kannst du die Gruppe aktivieren bzw. deaktivieren. (Ja/Nein)
  • Name anzeigen: Soll der Name im Frontend angezeigt werden? (Ja/Nein)
  • PHP Query Selektor: An welcher Stelle soll der Logo-Slider im Shop angezeigt werden?
  • Positionierung: Art der Positionierung des Sliders im Selektor (Element ersetzen/Nach Element/Vor Element/Anfang innerhalb/Ende innerhalb)
  • Seite: Auf welcher Seite soll der Slider eingebunden werden


Reiter Slider:

  • Slide-Funktion: Bei Aktivierung werden die Logos in einem Slider dargestellt, andernfalls als einfache Auflistung. (aktivieren/deaktivieren)
  • Navigation: Soll unter dem Slider eine Navigation angezeigt werden? (Ja/Nein)
  • Autoslide: Slider automatisch starten? (Ja/Nein)
  • Geschwindigkeit: Geschwindigkeit des Slide-Effekts in Millisekunden, wenn Autoslide aktiv ist.
  • Anzahl Logos anzeigen: Anzahl der Logos, die im Slider angezeigt werden sollen.
  • Anzahl Logos umblättern: Anzahl der Logos, die im Slider umgeblättert werden sollen.


Reiter Menü:

  • Menü verwenden: Sollen die Herstellerlogos im Menü eingeblendet werden? (einblenden/nicht einblenden)
  • Menü PHP Query Selektor: Welcher Menüpunkt soll erweitert werden?
  • Menü Positionierung: Wie sollen die Logos in Bezug auf den Menüpunkt positioniert werden? (Element ersetzen/Nach Element/Vor Element/Anfang innerhalb/Ende innerhalb)

Dialog "Logo-Gruppe bearbeiten" im Shop V4


Dialog "Logo-Gruppe bearbeiten" im Shop V4


1.2 Hersteller Logos Wawi:


Hier findest du Logos der Hersteller, welche über die Wawi gepflegt wurden und noch nicht im Slider sind. Per Drag & Drop kannst du die gewünschten Logos zur Pluginausgabe ziehen.


1.3 Hersteller Logos Pluginausgabe:


Hier findest du Logos der Hersteller, welche das Plugin im Frontend ausgibt. 


Per Drag & Drop kannst du die gewünschte Reihenfolge ändern. Des Weiteren kann jedes Logo individuell angepasst werden: Einfach neuen Titel, neue URL, Target (_self: URL im selben Fenster öffnen; _blank: URL im neuen Fenster öffnen) oder neues Logo wählen.


1.4 Neues Logo hinzufügen:


Durch den Klick auf den Button "neues Logo hinzufügen" hast du die Möglichkeit den Slider mit Logos zu erweitern, die nicht in der Wawi hinterlegt sind.


Dialog "Logo bearbeiten" im Shop V4


Dialog "Logo bearbeiten" im Shop V4


2. Hersteller Übersicht


Für die Hersteller Übersicht wird eine eigene CMS-Seite angelegt.


2.1 Hersteller Logos Wawi:


Hier findest du Logos der Hersteller, welche über die Wawi gepflegt wurden. Per Drag & Drop kannst du die gewünschten Logos zur Herstellerübersicht ziehen.


2.2 Hersteller Logos Übersicht:


Hier findest du Logos der Hersteller, welche das Plugin im Frontend in der Herstellerübersicht ausgibt. Per Drag & Drop kannst du die gewünschte Reihenfolge ändern.


3. Einstellungen


Hier kannst du folgendene Einstellungen festlegen:


Hersteller Logos

  • CSS inline laden: Bei 'Ja' wird der Inhalt der CSS-Datei zwischen <style></style>-Tags eingefügt.
  • Wichtig ist hier, dass im CSS absolute Pfade angegeben werden müssen.

Hersteller Übersicht

  • Sortierung: Hier kannst du auswählen, ob die Logos auf der Hersteller Übersicht alphabetisch oder manuell sortiert und angezeigt werden sollen.


4. Frontend

Slider-Beispiel im Shop V4


Slider-Beispiel im Shop V4


Als Slider wird im Frontend slick verwendet. Slick benötigt mindestens jQuery 1.7 oder höher. 


Du hast auch die Möglichkeit jeden einzelnen Slider individuell mit zusätzlichen Optionen (siehe slick-Dokumentation) zu erweitern. 


Dazu müsstest du einfach die Datei "slider.js" im Ordner "frontend/js" kopieren und in "slider_custom.js" umbenennen. 


Anschließend  kannst du nach der Zeile mit dem Inhalt "$('.jst_herstellerlogos_slider > .slick').slick();" deine Änderungen einfügen.


Das folgende Beispiel zeigt dir, wie du einen Slider responsive gestaltest:

$('#SLIDER_ID > .slick').slick("setOption", "responsive", [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 200,
      settings: "unslick" 
}], true);


SLIDER_ID setzt sich aus "jst_herstellerlogos_slider_" und einer Zahl zusammen. 


In der "frontend/template/slider.tpl" hast du auch die Möglichkeit über das Array $Sprachvar_arr auf die Plugin-Sprachvariablen zuzugreifen.