Kennisgeving over de wettelijke garantie toevoegen in Magento / Adobe Commerce

De code voor Magento / Adobe Commerce

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

Meer opties, zoals weergave en taal, stel je in met de codebouwer.

Stap voor stap in Magento / Adobe Commerce

1. Maak een CMS-blok
   Maak onder Content → Blocks een nieuw blok aan en plak de widgetcode. Vanaf versie 2.4.3 opent Page Builder; gebruik daar het element ‘HTML Code’.
2. Maak een widget
   Maak onder Content → Elements → Widgets een widget van het type ‘CMS Static Block’ aan voor je thema.
3. Plaats hem
   Kies als layout-update ‘All Product Types’ en selecteer de container ‘Product View Extra Hint’. Die staat onder de knop voor de winkelwagen.
4. Leeg de cache
   Sla op, leeg de cache en controleer een productpagina.

De menunamen geven we in het Engels, zoals in de Engelse beheeromgeving.

Goed om te weten over Magento / Adobe Commerce

• Met een actieve Content Security Policy (module Magento_Csp) moet www.garantielabel.app op de whitelist staan voor scripts, afbeeldingen en verbindingen.
• JavaScript-bundling en -minificatie mogen het externe script niet meenemen.

Waar de kennisgeving hoort in Magento

Alle productpagina’s gebruiken het layoutbestand catalog_product_view.xml. Daarbovenop komen bestanden per producttype, zoals catalog_product_view_type_configurable.xml, en per afzonderlijk product, zoals catalog_product_view_sku_{sku}.xml. De kolom met prijs en koopgedeelte is de container product.info.main. Die bevat product.info.extrahint, die in het widgetformulier “Product View Extra Hint” heet.

In de Admin maak je widgets aan onder “Content → Elements → Widgets”. “Display On” bepaalt het paginatype, “Container” het gedeelte van de pagina. Kies voor productpagina’s “All Product Types” of één producttype. Voeg voor de kennisgeving in de footer een tweede layout-update toe: “All Pages” met de container “Page Footer”, bij voorkeur met data-darstellung="link".

Configureerbare producten en modelidentificatie

Een configureerbaar product verschijnt als één product met keuzelijsten. Volgens Adobe is elke variatie een apart enkelvoudig product met een eigen SKU. Het configureerbare product zelf is het kader, de prijs komt van de variaties.

De Adobe-documentatie noemt geen apart veld voor de modelidentificatie. Daarvoor maak je een productattribuut aan onder “Stores → Attributes → Product” en voeg je het toe aan je attributenset onder “Stores → Attributes → Attribute Set”. Met “Visible on Catalog Pages on Storefront” op “Yes” verschijnt het op de productpagina. Omdat elke variatie een eigen product is, kan ze een eigen modelidentificatie hebben.

Het GARAN-label vermeldt merk en modelidentificatie, dus er is één label per modelidentificatie. De widget toont één GARAN-label per placeholder en verandert niet mee met de gekozen optie. Voor een label dat bij één product hoort, gebruiken ontwikkelaars het layoutbestand van dat product (catalog_product_view_sku_{sku}.xml). Hebben variaties verschillende modelidentificaties, dan kun je die modellen beter als aparte producten beheren.

Veelvoorkomende valkuilen in Magento

• Full page cache: productpagina’s worden kant-en-klaar opgeslagen in de Page Cache. Vernieuw na wijzigingen de cachetypes Page Cache, Layouts en Blocks HTML output onder “System → Tools → Cache Management”.
• Widget gekoppeld aan het thema: elke widgetinstantie hoort bij één Design Theme. Maak na een themawissel de widget opnieuw aan voor het nieuwe thema.
• Store views: onder “Storefront Properties” kies je de store views waarin de widget verschijnt. Bij meerdere talen controleer je elke store view.
• Eigen thema: eigen layoutbestanden horen in een eigen thema. Adobe raadt af de standaard meegeleverde thema’s aan te passen, vanwege compatibiliteit en upgrades.

Meer bronnen

• Adobe Commerce: Product layouts (Engelstalig)
• Adobe Commerce: Create a widget (Engelstalig)
• Adobe Commerce: Block positions (Engelstalig)
• Adobe Commerce: Configurable product (Engelstalig)
• Adobe Commerce: Create product attributes (Engelstalig)
• Adobe Commerce: Cache management (Engelstalig)
• Adobe Commerce: Create a storefront theme (Engelstalig)
• Magento Open Source: opties van “Display On” (GitHub)

Kennisgeving over de wettelijke garantie in de orderbevestiging

Volgens de richtsnoeren van de Commissie hoort de kennisgeving ook in de bevestigingsmail. E-mailsjablonen beheer je onder Marketing → Email Templates. De officiële afbeelding kun je als afbeelding toevoegen aan het sjabloon ‘New Order’. Een losse link telt waarschijnlijk niet als duurzame gegevensdrager (Hof van Justitie van de EU, zaak C-49/11, Content Services); het veiligst zet je de kennisgeving direct in de e-mail, als afbeelding, tekst of bijlage. De officiële bestanden vind je op onze downloadpagina.

Producentengarantie? Voeg dan het GARAN-label toe

Geeft de producent kosteloos een commerciële levensduurgarantie van meer dan twee jaar voor het hele product, dan hoort ook het GARAN-label op de productpagina. Met de GARAN-labelgenerator maak je het in een paar seconden uit het aantal jaren, het merk en het model, je eerste 3 labels gratis en zonder registratie. Onder elk klaar label krijg je een insluitcode met vaste afbeeldings-URL's: je uploadt niets en plakt hem in Magento / Adobe Commerce zoals hierboven beschreven.

Liever je eigen bestanden? Upload dan de volledige en de geneste versie naar de mediabibliotheek van Magento / Adobe Commerce en vul de adressen in de widgetcode in:

<div data-garantielabel
  data-garan-voll="https://…/GARAN-MX-500.svg"
  data-garan-klein="https://…/GARAN-MX-500-genest.svg"></div>

De widget toont dan de geneste versie onder de kennisgeving over de wettelijke garantie, en één klik opent het volledige GARAN-label.

Veelgestelde vragen