Interaktive Hotspots für Bilder SW 6

Installation über „Meine Erweiterungen“ in der Shopware Administration.

Nach der Installation und Aktivierung, steht die neue Funktionalität in den Shopware Erlebnisswelten zur Verfügung. Eine allgemeine Anleitung zu den Erlebnisswelten ist hier zu finden.
Um die neue Funktionalität zu nutzen, bitte bei den Erlebnisswelten ein bestehendes Layout auswählen bzw. ein neues anlegen. Unter der Block-Kategorie „Text & Bild“ gibt es den neuen Eintrag „Interactive Hotspots“. Nachdem dieser per Drag&Drop in das Layout gezogen wurde, kann dieser konfiguriert werden.

Konfiguration:

Basis Einstellungen

  • Hotspot hinzufügen: Einen neuen Hotspot auf dem Bild hinzufügen.
  • Bild: Das Bild, welches für die Hotspots verwendet werden soll.
  • Zeige Hotspot Liste unter dem Bild.
  • Scrollen zu Listeneintrag bei Klick.

Hotspot n

Nach dem Hinzufügen eines neuen Hotspots, erscheint ein neuer Tab mit dem Hotspot. Hierbei ist jeder Hotspot entsprechend durchnummeriert. Je Hotspot, können die folgenden Einstellungen vorgenommen werden:

  • Hotspot entfernen: Mit Klick auf den Button, wird der Hotspot gelöscht.
  • Position: Die Hotspot Position kann durch Klick auf das Bild festgelegt werden. Alternativ kann auch ein X/Y Wert eingegeben werden.
  • Hintergrund Farbe: Hintergrund Farbe des Hotspot Symbols.
  • Hintergrund Farbe Mouseover: Hintergrund MouseOver Farbe des Hotspot Symbols.
  • Symbol Farbe: Farbe des Hotspot Symbols.
  • Mouseover Symbol Farbe: MouseOver Farbe des Hotspot Symbols.
  • Mouseover Animation: Bei Auswahl einer Animation, erscheint diese beim Hotspot MouseOver.
  • Design: Bei Auswahl „Standard“ wird der Hotspot als Punkt angezeigt. Bei Auswahl „Zeichen“, kann ein beliebiger Buchstabe hinterlegt werden.
  • Zeichen: Eingabe eines Buchstaben wie beispielsweise „a“, „1“ oder „+“.
  • Animation: Bitte wählen, ob der Hotspot durch eine Animation hervorgehoben wird. Es stehen verschiedene Animationen zur Verfügung.
  • Overlay anzeigen: Auswahl ob bei Hotspot MouseOver ein Overlay angezeigt werden soll.
  • Overlay Titel: Der Titel, der im Overlay angezeigt wird.
  • Overlay Text: Der Text, der im Overlay angezeigt wird.
  • Link Typ: Auswahl zwischen „Statischer Link“ und „Produkt“ (Auswahl eines konkreten Shopware Produktes).
  • Link URL: Bitte die URL eingeben, auf die der Link zeigen soll.
  • Link Text: Hierbei handelt es sich um den Text, der verlinkt ist.
  • Link Ziel: Bei Klick auf Link kann das Verhalten gesteuert werden, ob dieser im selben Fenster oder als neues Fenster im Browser geöffnet werden.