Owl-Slider mit „Kachel“-Ansicht + SEO-Markup
199,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 eine schnelle Orientierung. Zusätzlich wird ein strukturierter ItemList-Block (JSON-LD) für die Kategorien ausgegeben, um SEO-Signale sauber zu unterstützen. Die Umsetzung bleibt bewusst schlank: Vanilla JS + jQuery + Owl Carousel (CDN oder lokal).
Highlights
- Slider + Vollansicht: Umschalten zwischen Carousel und kompletter Kachelübersicht („Alle“).
- Mobile-first UX: große Touchflächen, klare Labels, sinnvolle
aria-labelundtitle-Attribute. - Fokussierte Navigation: Prev/Next-Steuerung + Toggle-Button mit Material Icons Outlined.
- SEO-Markup:
ItemList-JSON-LD listet Kategorien inkl. Name, URL und optionaler Beschreibung. - Sauber erweiterbar: Kategorien als wiederholbare Blöcke – Link, Text, Titel anpassen, fertig.
- Leichtgewichtig: keine Frameworks; nur jQuery + Owl Carousel (optional lokal bundeln).
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. fortlaufender Positionen (für klare Struktur).
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; Toggle-Text („Alle“/„Slider“) frei anpassbar.
- SEO-Markup:
@context,@id,name,urlunditemListElementan deinen Shop angleichen. - No-JS-Fallback: optional
<noscript>mit Grid-Ansicht ausgeben, damit Kategorien auch ohne JS sichtbar bleiben.
Performance & Barrierefreiheit
- Performance: kompakter Init-Block; keine zusätzlichen Requests außer jQuery/Owl/Icons (CDN).
- A11y: Buttons mit
aria-label; Links mit sprechendentitle-Attributen; Fokus-Reihenfolge bleibt logisch.
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. Du kannst die Items serverseitig via Twig (z. B. aus der Navigation) ausgeben oder per API laden. Das Snippet ist bewusst statisch gehalten, damit es in Erlebniswelten sofort ohne Template-Anpassungen läuft.
Wie ersetze ich die CDN-Ressourcen?
Lade jQuery, Owl Carousel und Material Icons in deine Theme-Assets und referenziere sie lokal. Achte darauf, die Versionen kompatibel zu halten (Optional: via Webpack/Storefront-Build bundeln).
Beeinflusst das Snippet SEO?
Der sichtbare Content (Kategorie-Links) bleibt identisch. Zusätzliches ItemList-JSON-LD kann helfen,
die Kategoriestruktur maschinenlesbar zu machen. Entscheidend bleibt aber: klare interne Verlinkung und saubere URLs.
Kann ich „Alle“ als Standardansicht setzen?
Ja. Du kannst initial die Grid-Ansicht sichtbar machen (z. B. Klasse vape-d-none entfernen bzw. umdrehen)
und den Carousel erst nach Bedarf einblenden. So erhältst du eine sehr robuste Darstellung – auch als No-JS-Fallback.
Gibt es Konflikte mit anderen Slider-Plugins oder Shopware-Plugins?
Möglich, wenn mehrere Komponenten dieselben jQuery- oder Carousel-Namespaces nutzen oder unterschiedliche jQuery-Versionen geladen werden.
Empfehlung: jQuery nur einmal laden, Owl Carousel nur einmal initialisieren und bei Bedarf per eindeutiger Wrapper-Klasse selektieren
(z. B. .slider-wrapper .owl-carousel), damit keine fremden Slider-Instanzen betroffen sind.
Anmelden
Informationen nach Produktsicherheitsverordnung (GPSR)
Kontakt für Produktsicherheitsfragen / Hersteller
Borban Systems – Inh. Boris BanaszakAn der Lehmkuhl 7
47495 Rheinberg
Deutschland
E-Mail: kontakt@borban.de
Tel.: 02843 9595-305