Guppy Docs

Appearance

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>

USP Banner Plugin ​

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
  • 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

Copyright © 2025-heute digital.manufaktur GmbH