Guppy Docs

English

Deutsch

English

Deutsch

Appearance

JavaScript Plugins ​

Contents of this page:

The Guppy Theme extends the Shopware frontend through specialized JavaScript plugins that provide modern functionalities and improved user interactions.

Plugin Architecture ​

The Guppy Theme uses the Shopware plugin system and extends it with custom components:

Registration ​

javascript
// New plugins
PluginManager.register('SplideSliderPlugin', SplideSliderPlugin);
PluginManager.register('UspBannerPlugin', UspBannerPlugin);
PluginManager.register('ProductBoxClickPlugin', ProductBoxClickPlugin);

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

Plugin Initialization ​

javascript
// Automatic initialization via data attributes
<div data-splide-slider-plugin="true" data-splide-slider-plugin-options='{...}'>

Splide Slider Plugin ​

Description ​

Modern slider based on the Splide.js library that replaces the standard Tiny Slider.

Features ​

  • Better Performance: Optimized for modern browsers
  • Accessibility: Full keyboard navigation and screen reader support
  • Responsive Design: Automatic adaptation to different screen sizes
  • Touch Support: Native touch gestures for mobile devices

Implementation ​

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 handling
        const splideOptions = Object.getPrototypeOf(splideSlider.options);
        if (splideOptions.autoplay === "pause") {
            splideSlider.Components.Autoplay.play();
        }
    }
}

Usage ​

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 ​

Description ​

Interactive banner system for Unique Selling Points with tooltip functionality and responsive behavior.

Features ​

  • Tooltip System: Automatic tooltips for longer content
  • Responsive Display: Different number of USPs depending on screen size
  • Slider Integration: Automatic slider behavior on mobile devices
  • Configurable Layouts: Standard and benefit layout available

Configuration ​

javascript
// Theme configuration
{
    "guppy-usp-active": true,
    "guppy-usp-layout": "benefits",
    "guppy-usp-layout-benefit1": "Free Shipping",
    "guppy-usp-layout-benefit2": "30 Day Returns",
    "guppy-usp-layout-benefit3": "Fast Delivery"
}

Responsive Behavior ​

  • Desktop: 1-4 USPs (static)
  • Tablet: 1-2 USPs (slider with infinite loop)
  • Mobile: 1 USP (slider with infinite loop)

Product Box Click Plugin ​

Description ​

Extends product box functionality with improved click interactions and accessibility.

Features ​

  • Entire Box Clickable: Not just the product name
  • Keyboard Navigation: Full keyboard support
  • Focus Management: Correct focus handling
  • Event Delegation: Efficient event handling

Implementation ​

javascript
// Enhanced product box interaction
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 ​

Description ​

Optimizes the checkout experience through improved user guidance and form handling.

Features ​

  • Form Validation: Extended client-side validation
  • Progress Tracking: Visual progress through checkout steps
  • Auto-Save: Automatic saving of form data
  • Error Handling: Improved error handling

Usage ​

javascript
// Automatic activation on checkout pages
<div class="checkout-main" data-custom-checkout-plugin="true">

Quantity Selector Plugin (Override) ​

Description ​

Extends the standard Quantity Selector with improved user interaction and validation.

Features ​

  • Input Validation: Prevents invalid inputs
  • Keyboard Support: Arrow key navigation
  • Accessibility: ARIA labels and screen reader support
  • Animation: Smooth transitions on changes

Extended Functionality ​

javascript
// Enhanced quantity selection
PluginManager.override('QuantitySelector', QuantitySelectorPlugin, '[data-quantity-selector]');

Additional Plugins ​

Remove Extra H1 Plugin ​

  • Purpose: SEO optimization by removing redundant H1 tags
  • Automatic: Runs after DOM load
  • SEO Compliant: Prevents multiple H1 tags per page

Delivery Information Margin Plugin ​

  • Purpose: Dynamic margin adjustment for delivery information
  • Responsive: Adapts to different screen sizes
  • Layout Optimization: Improved visual hierarchy
  • Purpose: Extended gallery functionality
  • Thumbnail Navigation: Synchronized thumbnail view
  • Zoom Integration: Seamless zoom functionality
  • Touch Gestures: Extended touch interactions
  • Purpose: Responsive footer behavior
  • Mobile First: Accordion behavior on mobile devices
  • Accessibility: Correct ARIA attributes
  • Animation: Smooth collapse animations

Copyright © 2025-present digital.manufaktur GmbH