Color Swatches - Klikbare Kleurstalen in Categorie-, Zoek- en Homepagelijsten
Toon elke beschikbare kleur als klikbaar staal onder ieder product in uw lijsten, zodat klanten het hele aanbod in één oogopslag zien en meteen naar de gewenste kleur springen zonder elk product apart te openen. Kleuren en textuurafbeeldingen, vierkant of rond in vier formaten, uitverkochte kleuren doorgestreept of verborgen, en een "+N"-badge wanneer een product meer kleuren heeft dan u wilt tonen. Werkt op categorie-, zoek-, merk-, leveranciers-, prijsverlagings-, bestseller-, nieuwe-producten- en homepagelijsten. Volledig zonder JavaScript. Voor PrestaShop 1.7 – 9.
De kleur die ze zochten was er wel — ze hebben hem alleen nooit gezien
Op een categoriepagina is een overhemd één foto in één kleur. Wie hem in marineblauw wilde, scrollt door, want niets op die tegel verraadt dat marineblauw bestaat. Deze module zet het volledige kleurenaanbod onder elk product, als stalen waarop geklikt kan worden — en elk staal opent de productpagina met die kleur al geselecteerd.
Zo werkt het
- 1. Gebruik een attribuut van het type "Color or texture" (kleur of textuur) — stel in Catalogus → Attributen en kenmerken uw kleurattribuut in op dat weergavetype en geef elke waarde een kleurcode of een textuurafbeelding.
- 2. Geef uw producten combinaties die van die waarden gebruikmaken.
- 3. Kies vorm, formaat en het gedrag bij uitverkochte kleuren op de configuratiepagina, die een live voorbeeld van de stalen met uw opgeslagen instellingen laat zien.
Overal waar uw producten in een lijst staan
Categoriepagina's, zoekresultaten, merk- en leverancierspagina's, prijsverlagingen, bestsellers, nieuwe producten en de productblokken op de homepage — uitgelichte producten, nieuwe binnenkomers en de rest. Elk thema dat op de standaard productminiatuur is gebouwd, werkt meteen. Voor eigen sliders en templates die deze niet gebruiken, zet één regel Smarty de stalen overal waar een productvariabele bestaat: {widget name='colorsonproductlist' product=$product}.
Uitverkochte kleuren, op uw manier afgehandeld
Een kleur geldt als uitverkocht zodra elke combinatie die hem gebruikt op nul voorraad staat. U bepaalt wat er dan gebeurt: hem doorgestreept tonen zodat klanten toch zien dat de kleur bestaat, hem als elke andere kleur tonen, of hem helemaal verbergen. In alle gevallen kiest de link van het staal bij voorkeur een combinatie die op voorraad ligt, zodat een klik nooit op iets onverkoopbaars uitkomt zolang er een alternatief is.
Kleuren, texturen en overzichtelijke lijsten
Zowel effen kleurcodes als textuurafbeeldingen worden weergegeven, en heeft een waarde allebei, dan wint de textuur — precies zoals op de productpagina. Komt een product in twintig kleuren en wilt u geen twintig stalen op één tegel, begrens dan het aantal: de rest wordt samengevat in een "+N"-badge die de productpagina opent.
Vierkant of rond, vier formaten — en de productpagina doet mee
Stalen kunnen vierkant of rond zijn, in vier formaten van ongeveer 8 tot 32 px, meeschalend met de tekstgrootte van uw thema. Eén schakelaar geeft ook de kleurkiezer op de productpagina zelf dezelfde vorm en hetzelfde formaat, zodat de lijst en de productpagina niet langer op twee verschillende winkels lijken.
Licht van opzet
Volledig zonder JavaScript. Eén kleine stylesheet, één style-tag in de head, één databasequery per product. Geen core-overrides, geen aanpassingen aan templates, niets extra's in de build van uw thema.
Wat versie 2.0 heeft opgelost
De 1.x-releases hadden drie echte gebreken, allemaal verholpen. De schakelaar "Niet-beschikbare kleuren tonen" deed niets op PrestaShop 1.7, omdat de corefunctie waarop hij steunde die parameter negeert en in plaats daarvan de winkelbrede voorkeur "Niet-beschikbare attributen tonen" volgt; de module voert nu een eigen voorraadbewuste query uit, zodat de instelling écht de doorslag geeft — inclusief de nieuwe doorgestreepte modus. "Overtollige kleuren automatisch verbergen" verborg nooit iets, omdat geen enkel script het tellerelement ooit vulde; die optie is vervangen door een limiet aan de serverkant met een échte "+N"-badge. En hetzelfde style- en scriptblok werd onder ieder product op een pagina herhaald; 2.0 levert in plaats daarvan één statische stylesheet. Instellingen met generieke namen die andere modules konden overschrijven, worden automatisch gemigreerd naar namen met een prefix.
Compatibiliteit
PrestaShop 1.7, 8 en 9. De module rendert via de standaard hook displayProductListReviews op de productminiatuur en verbergt zolang hij actief is de eigen variantlinks van uw thema die alleen bij hover verschijnen, zodat kleuren niet dubbel worden getoond. Bij het verwijderen worden de instellingen gewist, komen die variantlinks terug en krijgt de kleurkiezer op de productpagina weer de standaardstijl van uw thema.
Veelgestelde vragen
Doen de stalen echt iets, of zijn ze alleen een voorbeeld?
Het zijn links. Erop klikken opent de productpagina met die kleur al geselecteerd, en daarbij krijgt een combinatie op voorraad de voorkeur.
Werkt het met mijn thema?
Elk thema dat op de standaard productminiatuur is gebaseerd, werkt zonder aanpassingen. Voor eigen sliders of templates die deze niet gebruiken, voegt u {widget name='colorsonproductlist' product=$product} toe op de plek waar u de stalen wilt.
Wat gebeurt er met kleuren die uitverkocht zijn?
Uw keuze: doorgestreept (aanbevolen, want zo weet de klant nog steeds dat de kleur bestaat), gewoon getoond, of helemaal verborgen.
Kan ik voorkomen dat er twintig stalen op één tegel verschijnen?
Ja. Stel per product een maximum in tussen 1 en 24; de overige kleuren worden samengevat in een "+N"-badge. Met 0 toont u ze allemaal.
Toont het naast effen kleuren ook textuurafbeeldingen?
Ja. Beide worden weergegeven, en heeft een attribuutwaarde zowel een kleurcode als een textuur, dan wordt de textuur gebruikt — dezelfde regel die de productpagina volgt.
Worden mijn categoriepagina's er trager van?
Er komt geen JavaScript aan te pas, alleen één stylesheet en één query per product, dus de kosten blijven beperkt tot een kleine query en een paar spans per tegel.
Waarom verschijnen de stalen niet op mijn homepage?
Zet "Tonen op de homepage" aan. Verschijnen ze dan nog steeds niet, dan gebruikt die homepagemodule eigen markup in plaats van de standaardminiatuur — voeg het widget-fragment toe aan het template ervan.
-
CompatibiliteitPrestashop 1.5
Prestashop 1.6
Prestashop 1.7
Prestashop 8
Prestashop 9 -
Beschikbare Module VertalingenDuits
Engels
Frans
Italiaans
Nederlands
Pools
Portugees
Spaans
Turks
MEG Venture
4 other products in the same category
| Versie | 2.0.2 |
|---|---|
| Laatst bijgewerkt | 2026-07-28 |
| Wijzigingslogboek | - [2026-07-24] Add Italian, Dutch, Polish, and Turkish translations for color sample module - [2026-07-23] Bump version to 2.0.2 and update changelog for improved upgrade stability - [2026-07-23] Translate color swatches module strings to Polish and Turkish for improved localization. - [2026-07-23] Populate translation files with complete translatable strings - [2026-07-23] Populate translation files with complete translatable strings - [2026-07-23] Populate translation files with complete translatable strings - [2026-07-23] Populate translation files with complete translatable strings - [2026-07-23] Add missing translation files (fr, de, pl, nl, tr, it, es) - [2026-07-22] Hide duplicated native color swatches on Bootstrap 5 / Hummingbird themes (2.0.1) - [2026-07-15] feat: Add initial module files and upgrade script for Colors on Product List - [2026-06-21] Refactor license information and update array syntax for consistency - [2023-09-05] v1.2.0 - [2022-10-18] v1.0.0 - [2022-09-25] v1.0.0 - [2022-09-25] Initial commit |
• [2026-06-21] Refactor license information and update array syntax for consistency
• [2023-09-05] v1.2.0
• [2022-10-18] v1.0.0
• [2022-09-25] v1.0.0
• [2022-09-25] Initial commit
Commentaar (0)
Uw beoordelingswaardering kan niet worden verzonden
Rapporteer reactie
Melding verzonden
Uw opmerking kan niet worden verzonden