JavaScript Plugins

Inhalt dieser Seite:

Das Guppy Theme erweitert das Shopware Frontend durch spezialisierte JavaScript-Plugins, die moderne Funktionalitäten und verbesserte Benutzerinteraktionen bieten.

Plugin-Architektur

Das Guppy Theme nutzt das Shopware Plugin-System und erweitert es um eigene Komponenten:

Registrierung

javascript

// Neue Plugins
PluginManager.register('SplideSliderPlugin', SplideSliderPlugin);
PluginManager.register('UspBannerPlugin', UspBannerPlugin);
PluginManager.register('ProductBoxClickPlugin', ProductBoxClickPlugin);

// Plugin-Overrides
PluginManager.override('QuantitySelector', () => import('./js/quantity-selector.plugin'));

Plugin-Initialisierung

javascript

// Automatische Initialisierung über data-Attribute
<div data-splide-slider-plugin="true" data-splide-slider-plugin-options='{...}'>

Splide Slider Plugin

Beschreibung

Moderner Slider basierend auf der Splide.js-Bibliothek, der den Standard Tiny-Slider ersetzt.

Features

Bessere Performance: Optimiert für moderne Browser
Barrierefreiheit: Vollständige Keyboard-Navigation und Screen-Reader-Support
Responsive Design: Automatische Anpassung an verschiedene Bildschirmgrößen
Touch-Unterstützung: Native Touch-Gesten für mobile Geräte

Implementierung

javascript

export default class SplideSliderPlugin extends Plugin {
    static options = {
        splideSnippets: ""
    }
    
    init() {
        this._mountSlider(this.el, this.options.splideSnippets);
    }
    
    _mountSlider(element, options) {
        var splideSlider = new Splide(element, {
            i18n: options
        }).mount();
        
        // Autoplay-Behandlung
        const splideOptions = Object.getPrototypeOf(splideSlider.options);
        if (splideOptions.autoplay === "pause") {
            splideSlider.Components.Autoplay.play();
        }
    }
}

Verwendung

html

<div class="splide" data-splide-slider-plugin="true">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 1</li>
            <li class="splide__slide">Slide 2</li>
            <li class="splide__slide">Slide 3</li>
        </ul>
    </div>
</div>

Beschreibung

Interaktives Banner-System für Unique Selling Points mit Tooltip-Funktionalität und responsivem Verhalten.

Features

Tooltip-System: Automatische Tooltips für längere Inhalte
Responsive Anzeige: Verschiedene Anzahl von USPs je nach Bildschirmgröße
Slider-Integration: Automatisches Slider-Verhalten auf mobilen Geräten
Konfigurierbare Layouts: Standard- und Benefit-Layout verfügbar

Konfiguration

javascript

// Theme-Konfiguration
{
    "guppy-usp-active": true,
    "guppy-usp-layout": "benefits",
    "guppy-usp-layout-benefit1": "Kostenloser Versand",
    "guppy-usp-layout-benefit2": "30 Tage Rückgabe",
    "guppy-usp-layout-benefit3": "Schnelle Lieferung"
}

Responsive Verhalten

Desktop: 1-4 USPs (statisch)
Tablet: 1-2 USPs (Slider mit Endlosschleife)
Mobile: 1 USP (Slider mit Endlosschleife)

Product Box Click Plugin

Beschreibung

Erweitert die Produktbox-Funktionalität um verbesserte Klick-Interaktionen und Zugänglichkeit.

Features

Gesamte Box klickbar: Nicht nur der Produktname
Keyboard-Navigation: Vollständige Tastaturunterstützung
Focus-Management: Korrekte Focus-Behandlung
Event-Delegation: Effiziente Event-Behandlung

Implementierung

javascript

// Verbesserte Produktbox-Interaktion
document.addEventListener('click', (event) => {
    const productBox = event.target.closest('.product-box');
    if (productBox && !event.target.closest('.btn, .product-action')) {
        const link = productBox.querySelector('.product-name a');
        if (link) {
            link.click();
        }
    }
});

Custom Checkout Plugin

Beschreibung

Optimiert das Checkout-Erlebnis durch verbesserte Benutzerführung und Formular-Handling.

Features

Formular-Validierung: Erweiterte Client-Side-Validierung
Progress-Tracking: Visueller Fortschritt durch Checkout-Schritte
Auto-Save: Automatisches Speichern von Formular-Daten
Error-Handling: Verbesserte Fehlerbehandlung

Verwendung

javascript

// Automatische Aktivierung auf Checkout-Seiten
<div class="checkout-main" data-custom-checkout-plugin="true">

Quantity Selector Plugin (Override)

Beschreibung

Erweitert den Standard Quantity Selector um verbesserte Benutzerinteraktion und Validation.

Features

Input-Validation: Verhindert ungültige Eingaben
Keyboard-Support: Pfeiltasten-Navigation
Accessibility: ARIA-Labels und Screen-Reader-Support
Animation: Smooth Transitions bei Änderungen

Erweiterte Funktionalität

javascript

// Erweiterte Mengenauswahl
PluginManager.override('QuantitySelector', QuantitySelectorPlugin, '[data-quantity-selector]');

Weitere Plugins

Remove Extra H1 Plugin

Zweck: SEO-Optimierung durch Entfernung redundanter H1-Tags
Automatisch: Läuft nach DOM-Load
SEO-Konform: Verhindert multiple H1-Tags pro Seite

Delivery Information Margin Plugin

Zweck: Dynamische Margin-Anpassung für Lieferinformationen
Responsive: Anpassung an verschiedene Bildschirmgrößen
Layout-Optimierung: Verbesserte visuelle Hierarchie

Splide Slider Gallery Plugin

Zweck: Erweiterte Galerie-Funktionalität
Thumbnail-Navigation: Synchronisierte Thumbnail-Ansicht
Zoom-Integration: Nahtlose Zoom-Funktionalität
Touch-Gestures: Erweiterte Touch-Interaktionen

Zweck: Responsive Footer-Verhalten
Mobile-First: Accordion-Verhalten auf mobilen Geräten
Accessibility: Korrekte ARIA-Attribute
Animation: Smooth Collapse-Animationen

Plugin-Konfiguration im Detail

Splide Slider Optionen

Der Splide Slider unterstützt alle Splide.js Optionen:

javascript

// Über data-Attribute
<div class="splide"
     data-splide-slider-plugin="true"
     data-splide-slider-plugin-options='{
       "type": "loop",
       "perPage": 4,
       "perMove": 1,
       "gap": "1rem",
       "pagination": false,
       "arrows": true,
       "autoplay": true,
       "interval": 5000,
       "pauseOnHover": true,
       "breakpoints": {
         "1024": { "perPage": 3 },
         "768": { "perPage": 2 },
         "576": { "perPage": 1 }
       }
     }'>

Option	Typ	Standard	Beschreibung
`type`	string	`slide`	Slider-Typ: `slide`, `loop`, `fade`
`perPage`	number	`1`	Sichtbare Slides
`perMove`	number	`1`	Slides pro Bewegung
`gap`	string	`0`	Abstand zwischen Slides
`arrows`	boolean	`true`	Navigationspfeile anzeigen
`pagination`	boolean	`true`	Pagination-Dots anzeigen
`autoplay`	boolean	`false`	Automatisches Abspielen
`interval`	number	`5000`	Autoplay-Intervall (ms)
`pauseOnHover`	boolean	`true`	Pause bei Hover
`rewind`	boolean	`false`	Zum Anfang zurückspringen
`speed`	number	`400`	Animationsgeschwindigkeit (ms)
`easing`	string	`cubic-bezier(0.25, 1, 0.5, 1)`	Easing-Funktion

Splide Events

javascript

// Event-Listener hinzufügen
document.addEventListener('DOMContentLoaded', () => {
    const splideEl = document.querySelector('.splide');
    const splide = splideEl._splide; // Zugriff auf Splide-Instanz

    if (splide) {
        // Slide gewechselt
        splide.on('move', (newIndex, prevIndex) => {
            console.log(`Moved from ${prevIndex} to ${newIndex}`);
        });

        // Slider initialisiert
        splide.on('mounted', () => {
            console.log('Slider mounted');
        });

        // Autoplay gestartet/gestoppt
        splide.on('autoplay:play', () => console.log('Autoplay started'));
        splide.on('autoplay:pause', () => console.log('Autoplay paused'));
    }
});

javascript

// Theme-Konfiguration (theme.json)
{
    "guppy-usp-active": true,
    "guppy-usp-layout": "benefits",  // "benefits" oder "standard"

    // Benefits Layout (bis zu 4 USPs)
    "guppy-usp-layout-benefit1": "Kostenloser Versand ab 50€",
    "guppy-usp-layout-benefit2": "30 Tage Rückgaberecht",
    "guppy-usp-layout-benefit3": "Schnelle Lieferung",
    "guppy-usp-layout-benefit4": "Sichere Bezahlung",

    // Standard Layout
    "guppy-usp-layout-text": "Jetzt 10% Rabatt sichern!",
    "guppy-usp-layout-link": "/aktionen",
    "guppy-usp-layout-newTab": false,

    // Farben
    "guppy-usp-text-color": "#2b3136",
    "guppy-usp-hover-color": "#0042a0",
    "guppy-usp-background-color": "#EEEEEE"
}

Product Box Click Plugin

javascript

// Plugin-Verhalten anpassen
export default class ProductBoxClickPlugin extends Plugin {
    static options = {
        // Elemente, die vom Klick ausgeschlossen werden
        excludeSelectors: '.btn, .product-action, .wishlist-button, input, select',
        // Link-Selektor für die Produktseite
        linkSelector: '.product-name a, .product-image-link'
    }

    init() {
        this.el.addEventListener('click', this._onClick.bind(this));
        this.el.addEventListener('keydown', this._onKeydown.bind(this));
    }

    _onClick(event) {
        if (event.target.closest(this.options.excludeSelectors)) {
            return;
        }

        const link = this.el.querySelector(this.options.linkSelector);
        if (link) {
            link.click();
        }
    }

    _onKeydown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            this._onClick(event);
        }
    }
}

Plugin-Debugging

DevTools-Integration

javascript

// Plugin-Instanz abrufen
const element = document.querySelector('[data-splide-slider-plugin]');
const pluginInstance = window.PluginManager.getPluginInstanceFromElement(element, 'SplideSliderPlugin');

// Plugin-Optionen anzeigen
console.log(pluginInstance.options);

// Alle registrierten Plugins auflisten
console.log(window.PluginManager.getPluginList());

Häufige Probleme

Problem	Ursache	Lösung
Plugin lädt nicht	JavaScript-Fehler	Browser-Konsole prüfen
Slider zeigt keine Slides	Falsche HTML-Struktur	Splide-Klassen prüfen
Events feuern nicht	Plugin nicht initialisiert	`DOMContentLoaded` abwarten
Autoplay funktioniert nicht	`autoplay: "pause"` gesetzt	Auf `true` ändern

Eigene Plugins erstellen

Plugin-Template

javascript

import Plugin from 'src/plugin-system/plugin.class';

export default class MyCustomPlugin extends Plugin {
    static options = {
        // Standard-Optionen
        myOption: 'default-value',
        anotherOption: true
    };

    init() {
        // Plugin-Initialisierung
        this._registerEvents();
    }

    _registerEvents() {
        this.el.addEventListener('click', this._onClick.bind(this));
    }

    _onClick(event) {
        // Event-Handler
        console.log('Clicked!', this.options.myOption);
    }

    // Lifecycle: Plugin wird entfernt
    destroy() {
        // Cleanup
    }
}

Plugin registrieren

javascript

// main.js
import MyCustomPlugin from './plugins/my-custom-plugin';

window.PluginManager.register('MyCustomPlugin', MyCustomPlugin, '[data-my-custom-plugin]');

Plugin verwenden

html

<div data-my-custom-plugin="true"
     data-my-custom-plugin-options='{"myOption": "custom-value"}'>
    <!-- Inhalt -->
</div>

JavaScript Plugins ​

Plugin-Architektur ​

Registrierung ​

Plugin-Initialisierung ​

Splide Slider Plugin ​

Beschreibung ​

Features ​

Implementierung ​

Verwendung ​

USP Banner Plugin ​

Beschreibung ​

Features ​

Konfiguration ​

Responsive Verhalten ​

Product Box Click Plugin ​

Beschreibung ​

Features ​

Implementierung ​

Custom Checkout Plugin ​

Beschreibung ​

Features ​

Verwendung ​

Quantity Selector Plugin (Override) ​

Beschreibung ​

Features ​

Erweiterte Funktionalität ​

Weitere Plugins ​

Remove Extra H1 Plugin ​

Delivery Information Margin Plugin ​

Splide Slider Gallery Plugin ​

Collapse Footer Columns Plugin (Override) ​

Plugin-Konfiguration im Detail ​

Splide Slider Optionen ​

Splide Events ​

USP Banner Plugin Optionen ​

Product Box Click Plugin ​

Plugin-Debugging ​

DevTools-Integration ​

Häufige Probleme ​

Eigene Plugins erstellen ​

Plugin-Template ​

Plugin registrieren ​

Plugin verwenden ​

JavaScript Plugins

Plugin-Architektur

Registrierung

Plugin-Initialisierung

Splide Slider Plugin

Beschreibung

Features

Implementierung

Verwendung

USP Banner Plugin

Beschreibung

Features

Konfiguration

Responsive Verhalten

Product Box Click Plugin

Beschreibung

Features

Implementierung

Custom Checkout Plugin

Beschreibung

Features

Verwendung

Quantity Selector Plugin (Override)

Beschreibung

Features

Erweiterte Funktionalität

Weitere Plugins

Remove Extra H1 Plugin

Delivery Information Margin Plugin

Splide Slider Gallery Plugin

Collapse Footer Columns Plugin (Override)

Plugin-Konfiguration im Detail

Splide Slider Optionen

Splide Events

USP Banner Plugin Optionen

Product Box Click Plugin

Plugin-Debugging

DevTools-Integration

Häufige Probleme

Eigene Plugins erstellen

Plugin-Template

Plugin registrieren

Plugin verwenden