A. Was macht das Plugin?


Mithilfe des Plugin können Sie eine einfach einen Slider mit Ihren wichtigsten Marken (Herstellern) im Shop anzeigen. 

Dabei können Sie die in der Wawi hinterlegten Hersteller und Hersteller Logos verwenden oder Sie verwenden andere.


Das Plugin

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

B. Welchen Vorteil bringt mir das?

  • Zeigen Sie Ihre wichtigsten Marken
  • Zeigen Sie diese im Shop an, wo auch immer Sie wollen
  • Pflegeaufwand so gering wie möglich, keine Programmierkenntnisse


1. Hersteller Logos


Auf dieser Seite haben Sie eine Übersicht aller Slider. Sie können neue hinzufügen oder bestehende Slider bearbeiten oder löschen.


1.1 Slider-Konfiguration:


Reiter Allgemein:

  • Name: Geben Sie hier der Logo-Gruppe für die Standardsprache im Shop einen Namen. Stehen mehrere Sprache in Ihrem Shop zur Verfügung, dann können Sie mittels einem Klick auf "Mehrsprachigkeit" auch für diese Sprachen die Titel festlegen.
  • Aktiv: Hier können Sie 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 finden Sie Logos der Hersteller, welche über die Wawi gepflegt wurden und noch nicht im Slider sind. Per Drag & Drop können Sie die gewünschten Logos zur Pluginausgabe ziehen.


1.3 Hersteller Logos Pluginausgabe:


Hier finden Sie Logos der Hersteller, welche das Plugin im Frontend ausgiebt. Per Drag & Drop können Sie 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" haben Sie 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 finden Sie Logos der Hersteller, welche über die Wawi gepflegt wurden. Per Drag & Drop können Sie die gewünschten Logos zur Herstellerübersicht ziehen.


2.2 Hersteller Logos Übersicht:


Hier finden Sie Logos der Hersteller, welche das Plugin im Frontend in der Herstellerübersicht ausgibt. Per Drag & Drop können Sie die gewünschte Reihenfolge ändern.


3. Einstellungen


Hier können Sie 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 können Sie 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. Sie haben auch die Möglichkeit jeden einzelnen Slider individuell mit zusätzlichen Optionen (siehe slick-Dokumentation) zu erweitern. Dazu müssen Sie einfach die Datei "slider.js" im Ordner "frontend/js" kopieren und in "slider_custom.js" umbenennen. Anschließend  können Sie nach der Zeile mit dem Inhalt "$('.jst_herstellerlogos_slider > .slick').slick();" Ihre Änderungen einfügen.


Das folgende Beispiel zeigt Ihnen, wie Sie einem Slider responsive gestalten:

$('#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" haben Sie auch die Möglichkeit über das Array $Sprachvar_arr auf die Plugin-Sprachvariablen zuzugreifen.