dfvariantswatch: fotostaaltjes voor varianten en voorraad

Overzicht

dfvariantswatch vervangt de keuzelijsten met varianten op de productfiches van PrestaShop door aanklikbare visuele staaltjes (foto’s, kleuren of tekst), toont bij het zweven met de muis een voorbeeld van de variant in de hoofdgalerij, en geeft de voorraad van elke variant rechtstreeks op het staaltje weer.

De module verbetert de native widgets van PrestaShop met JavaScript: hij vervangt geen enkele template van het thema, waardoor hij samengaat met Classic, Hummingbird en de meeste premiumthema’s.

Installatie

1. Backoffice → Modules → Modulebeheer → Een module uploaden
2. Sleep het archief dfvariantswatch.zip erin en klik op Installeren
3. Klik op Configureren om bij de instellingen te komen

De installatie maakt de tabel df_variant_swatch, de afbeeldingsmap img/dfvariantswatch/ en de standaard configuratiewaarden aan. Er is geen enkele aanpassing aan het thema nodig.

Hoe de staaltjes werken

Per attribuut kiest de module de bron van het staaltje in deze volgorde van voorrang:

1. Afbeelding die in de backoffice is geüpload voor dat attribuut (tabblad Staaltjes per attribuut)
2. Hexadecimale kleurcode die in de backoffice is ingesteld
3. Afbeelding die automatisch is afgeleid van de eerste combinatie die dat attribuut gebruikt
4. Native kleur van PrestaShop voor het attribuut (het kleurveld van de groep)
5. Tekstlabel met de naam van het attribuut

De beveiliging voor niet-onderscheidende groepen

De automatische afleiding blijft alleen behouden als de afbeeldingen werkelijk verschillen tussen de attributen van de groep, of als de groep in PrestaShop als kleurengroep is gemarkeerd. Concreet: bij een product met een groep Maat (S, M, L, XL) waarvan alle combinaties dezelfde foto’s delen, blijven de maten tekstlabels in plaats van vier keer dezelfde foto te tonen.

Configuratie

Algemene parameters

• De module inschakelen: zet de weergave aan de frontzijde stop zonder te verwijderen
• Zweven wisselt de galerij: het voorbeeld van de variant bij het zweven over een staaltje
• De voorraadbadge tonen: de beschikbaarheid onder elk staaltje
• Uitverkochte varianten verbergen: verbergt uitverkochte staaltjes volledig in plaats van ze door te strepen
• Vorm: rond, vierkant of pil; Grootte in pixels
• Drempel voor lage voorraad: daaronder gaat de badge over op de toestand lage voorraad
• Voorraadopschriften: de drie teksten zijn aan te passen en te vertalen via Lokalisatie → Vertalingen
• Manier van gegevens laden: Inline (aanbevolen) of AJAX, zie hieronder
• Groepen zonder staaltjes: de gekozen groepen behouden hun native widget

Staaltjes per attribuut

Dit tabblad toont alle attribuutgroepen van de winkel. Per waarde kunt u een afbeelding uploaden (jpg, png, webp of gif, maximaal 2 MB, 200 bij 200 pixels aanbevolen) of een kleurcode in de vorm #RRGGBB invoeren, het huidige staaltje bekijken en een bestaand staaltje verwijderen.

Manieren van laden

Inline (standaard, aanbevolen): de variantgegevens zitten al in de pagina op het moment dat die wordt opgebouwd. Geen enkele AJAX-aanroep bij het laden, meteen zichtbare staaltjes en maximale robuustheid.

AJAX: de gegevens worden na het laden van de pagina met een aanroep opgehaald. Houd die modus voor winkels achter een agressieve full-pagecache, waar de versheid van de getoonde voorraad zwaarder weegt dan de snelheid van de weergave.

Bediening met het toetsenbord

De kiezer volgt het WAI-ARIA-patroon radiogroup: met de Tab-toets komt de focus op de gekozen variant van de groep (één tabstop per groep), met de pijlen navigeert en kiest u binnen de groep, waarbij de lijst rondloopt en niet-beschikbare varianten worden overgeslagen, en met de spatiebalk of Enter bevestigt u het staaltje met de focus. De toestanden worden via aria-checked aan schermlezers gemeld en de tooltips respecteren prefers-reduced-motion.

Aanpassing via CSS

Met de beschikbare CSS-variabelen stelt u het uitzicht bij vanuit de CSS van uw childthema, zonder de module aan te raken:

.dfvs-swatch {
    --dfvs-size: 56px;   /* grootte van de staaltjes */
}
.dfvs-swatch.dfvs-active {
    box-shadow: 0 0 0 2px #b8860b; /* ring rond de actieve variant */
}

Wilt u het voorbeeld bij zweven op een bepaald product uitschakelen, voeg dan in de producttemplate een element met het attribuut data-dfvs-disable-hover toe.

Problemen oplossen

De staaltjes verschijnen niet

• Controleer of de module in zijn configuratie is ingeschakeld
• Open de console van de browser: de module logt zijn stappen met het voorvoegsel [dfvariantswatch], waar u het aantal getoonde groepen ziet of de reden waarom er niets verschijnt
• Het product moet varianten hebben; bij een eenvoudig product verschijnt er niets, wat normaal is

De maten verschijnen als tekst en niet als foto

Dat is het verwachte gedrag van de beveiliging: de waarden van de groep delen dezelfde combinatiefoto’s. Upload in het tabblad Staaltjes per attribuut eigen afbeeldingen per maat als u toch visuals wilt (bijvoorbeeld maatpictogrammen).

Het native blok komt na een klik weer tevoorschijn

De module past het verbergen na elke AJAX-update van PrestaShop opnieuw toe. Omzeilt een sterk aangepast thema de standaardgebeurtenissen, neem dan contact op met de ondersteuning met de URL van de betrokken productfiche.

Verwijderen

Bij het verwijderen worden de tabel van de module, de geüploade afbeeldingen in img/dfvariantswatch/ en alle configuratiesleutels gewist. De foto’s van uw combinaties blijven uiteraard onaangeroerd.