Owl-Slider mit „Kachel“-Ansicht + SEO-Markup
59,00 €
Versandkostenfrei
Produktinformationen "Owl-Slider mit „Kachel“-Ansicht + SEO-Markup"
Snippet: Kategorie-Slider mit „Alle“-Ansicht + SEO-Markup (Shopware 6)
Dieses Snippet kombiniert einen modernen Kategorien-Slider mit einer umschaltbaren „Alle“-Kachelansicht. Per Klick wechselst du vom kompakten Carousel zur vollständigen Übersicht – ideal für mobile Nutzer und für eine schnelle Orientierung. Zusätzlich wird ein strukturierter ItemList-Block (JSON-LD) für die Kategorien ausgegeben, um die SEO-Signale zu stärken. Umsetzung ist bewusst schlank: Vanilla JS + jQuery + Owl Carousel.
Highlights
- Carousel + Vollansicht: Umschalten zwischen Slider und kompletter Kachelübersicht („Alle“).
- Mobile-freundlich: Buttons und Kacheln sind großflächig, mit sinnvollen
aria-labelundtitle. - Schnelle Navigation: Prev/NEXT-Steuerung und klare Labels (Material Icons).
- SEO-Boost:
ItemList-JSON-LD listet Kategorien mit Name, Beschreibung und URL. - Einfach erweiterbar: Kategorien als wiederholbare Blöcke – Link, Text, Titel anpassen, fertig.
- Leichtgewichtig: Keine schweren Frameworks; nur jQuery + Owl Carousel über CDN (oder lokal).
Was dieses Snippet genau macht
- Rendert einen Owl Carousel mit deinen wichtigsten Kategorien.
- Bindet eine „Alle“-Gridansicht mit denselben Kategorien ein und toggelt zwischen Slider/Grid.
- Reagiert auf Viewports:
0–599px: 2 Items600–999px: 3 Items≥1000px: 5 Items
- Schreibt JSON-LD (
@type: ItemList) inkl. Positionen der Kategorien.
Kompatibilität
- Shopware 6 Storefront (Standard-Theme & übliche Derivate)
- Owl Carousel 2.3.4 + jQuery 3.7.x (im Snippet per CDN eingebunden – optional lokal bundeln)
Installation (in 3 Schritten)
- HTML-Block in deine Erlebniswelt/Kategorieseite einfügen (oder in ein CMS-Element):
- Wrapper
.slider-wrapperinkl..owl-carouselund.all-items - Steuer-Buttons: Prev / Toggle „Alle“ / Next
- Wrapper
- Skripte einbinden:
jQuery+Owl Carousel-JS und -CSS (CDN oder lokal)- Init-Script (siehe Code) zum Starten des Carousels & Umschalten der Ansicht
- JSON-LD anpassen:
- Shop-Name, Domain, Kategorie-URLs und Beschreibungen ersetzen
- Positionszähler (
position) fortlaufend pflegen
Konfiguration & Anpassungen
- Kategorien bearbeiten: Pro Kachel nur Link, Text,
titleundaria-labelanpassen. - Breakpoints/Anzahl: Im
responsive-Block von Owl Carousel die Item-Zahlen je Viewport ändern. - Icons/Labels: Material-Icons-Outlined sind eingebunden; Texte des Toggle-Buttons („Alle“/„Slider“) sind frei anpassbar.
- SEO-Markup:
@context,@id,name,urlunditemListElementan deinen Shop angleichen. - No-JS-Fallback: Optional
<noscript>mit der Grid-Ansicht ausgeben oder die Klassevape-d-noneim Grid standardmäßig entfernen, wenn ohne JS beides sichtbar sein darf.
Performance & Barrierefreiheit
- Schnell: nur ein kleiner Init-Block; keine zusätzlichen Requests außer jQuery/Owl/Icons (CDN).
- A11y: Buttons mit
aria-label; Links mit sprechendentitle-Attributen.
Lieferumfang
- Komplettes Snippet (HTML + JS-Init + JSON-LD)
- Kurzanleitung (Einbau, Anpassungspunkte)
Preis
- Basic (nur Code, keine Unterstützung): €39
- Standard (Code + Anleitung + 30 Tage E-Mail-Support): €59 (Empfehlung)
- Agency-Lizenz (unbegrenzt für Kundenprojekte, ohne Support): €199
Beispiel
So kann der Kategorie-Slider mit „Alle“-Ansicht auch in anderen Bereichen genutzt werden – zum Beispiel für Lebensmittelaromen und weitere Genussprodukte.
-
Live-Demo:
Aroma-Shot.de – Lebensmittelaromen im Kategorie-Slider
Mobil und Desktop: Slider-Ansicht mit umschaltbarer „Alle“-Kachelübersicht für mehr Orientierung.
FAQ
Kann ich die Kategorien dynamisch aus Shopware ziehen?
Ja, möglich. Für eine dynamische Ausgabe können die Items serverseitig (Twig) oder per API gerendert werden. Das Snippet ist bewusst statisch gehalten, damit es in jeder Erlebniswelt sofort läuft.
Wie ersetze ich die CDN-Ressourcen?
Lade jQuery, Owl Carousel und Material-Icons in die Shop-Assets und referenziere sie lokal. Achte auf die gleiche Version.
Beeinflusst das Snippet SEO?
Der sichtbare Content bleibt gleich. Zusätzliches ItemList-JSON-LD kann Suchmaschinen helfen, die Kategoriestruktur zu verstehen.
Anmelden
Informationen nach Produktsicherheitsverordnung (GPSR)
Kontakt für Produktsicherheitsfragen / Hersteller
Borban SystemsBoris Banaszak
An der Lehmkuhl 7
47495 Rheinberg
Deutschland
E-Mail: kontakt@borban.de
Tel.: 02843 9595-305