Overzicht

Daarna kun je hieronder controleren of de labels op je productpagina verschijnen.

1. Open het sjabloonGa in WordPress naar Weergave → Editor → Sjablonen en open het sjabloon voor een enkel product. Heb je een klassiek thema, ga dan meteen naar stap 4.
2. Voeg een blok inVoeg onder het blok met de knop ‘In winkelwagen’ een blok ‘Aangepaste HTML’ in.
3. Plak de codePlak de widgetcode en sla het sjabloon op. Hij geldt dan voor alle productpagina's.
4. Klassiek themaZonder blokeditor geef je de code in je child theme weer via de hook woocommerce_single_product_summary met prioriteit 35, of je gebruikt een snippet-plugin.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open de Shopping ExperienceGa in de Administration naar Content → Shopping Experiences en open de lay-out van je productpagina's, of maak een nieuwe aan van het type ‘Product page’.
2. Voeg de placeholder inVoeg onder de koopbox een blok met een tekstelement toe, schakel over naar de broncodeweergave en voeg <div data-garantielabel></div> in.
3. Laad het scriptVoeg de regel met widget.js toe via het thema (bijvoorbeeld in base.html.twig) of via een plugin voor eigen scripts, sla de lay-out op en wijs hem toe aan de producten.
4. Alternatief in het themaOntwikkelaars breiden in hun eigen thema het sjabloon van de koopbox (buy-widget.html.twig) uit met de placeholder en laden het script in de head van het sjabloon.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open de productpaginaOpen in de Wix Editor de productpagina van Wix Stores. Wijzigingen daar gelden voor alle producten.
2. Voeg het element toeGa naar ‘Add Elements’ → ‘Embed Code’ en kies het element ‘Embed HTML’.
3. Plak de codePlak de widgetcode, sleep het element onder de knop voor de winkelwagen en maak het groot genoeg, zodat de hele afbeelding zichtbaar is.
4. PubliceerPubliceer de site en controleer een productpagina.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open het productsjabloonOpen in de Designer onder Pages het ‘Products Template’.
2. Voeg een Code Embed toeSleep het element ‘Code Embed’ uit het Add-paneel onder de knop Add to Cart.
3. Plak de codePlak de widgetcode en sla op.
4. PubliceerPubliceer de site. In de Designer zelf worden ingesloten scripts niet uitgevoerd.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Gebruik een child-templateWijzigingen horen in een child-template (bij NOVA: NOVAChild), zodat updates ze niet overschrijven.
2. Breid het template uitBreid in het child-template het template van de artikeldetailpagina uit en plaats de widgetcode onder de knop voor de winkelwagen. Hij geldt dan voor alle artikelen.
3. Eén artikelVoor één artikel: sleep in de OnPage Composer een tekstportlet onder de knop voor de winkelwagen en plak de code in de broncodeweergave. De OnPage Composer bewerkt elke pagina afzonderlijk.
4. ControleerLeeg de cache of publiceer het concept en controleer een artikel.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open het productBewerk het product in Commerce of op de winkelpagina.
2. Voeg een codeblok toeVoeg in het gedeelte met aanvullende informatie een codeblok toe.
3. Plak de codePlak de widgetcode, laat ‘Display Source’ uitgeschakeld en sla op.
4. Laad het script centraalJe kunt de regel met widget.js ook één keer laden via de Code Injection van de winkelpagina. De placeholder moet dan nog steeds in elk product staan.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Maak een CMS-blokMaak 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 widgetMaak onder Content → Elements → Widgets een widget van het type ‘CMS Static Block’ aan voor je thema.
3. Plaats hemKies 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 cacheSla op, leeg de cache en controleer een productpagina.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Controleer je versieVanaf Gambio 26.09.0 schakel je beide labels in de webshopinstellingen in, desgewenst per klantgroep. Voor oudere versies vanaf 4.6 is er volgens Gambio een module. Dan heb je de widget niet nodig.
2. Voeg het script toeGa voor de widget naar „Einstellungen“ → „Suchmaschinenoptimierung“ → „Tracking-Codes“ (instellingen → zoekmachineoptimalisatie → trackingcodes) en voeg de regel met widget.js in bij het gedeelte „Body“. Hij wordt dan op alle pagina's van de webshop geladen.
3. Plaats de placeholderOpen in de artikelbeschrijving de broncodeweergave van de editor en voeg de placeholder <div data-garantielabel></div> in op de plek waar je hem wilt.
4. ControleerOpen na het opslaan de broncodeweergave opnieuw. Staat de placeholder er nog, dan verschijnt het label op de productpagina.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Gebruik een child themeWijzigingen aan het thema horen in een child theme, zodat updates ze niet overschrijven.
2. Kies de plekZoek in templates/catalog/product.tpl het gedeelte onder de knop voor de winkelwagen.
3. Plak de codePlak de widgetcode daar. Of gebruik een HTML-blokmodule uit de Addons-marketplace op de hook displayProductAdditionalInfo.
4. Leeg de cacheLeeg de cache onder Advanced Parameters → Performance en controleer.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Module of child themeDe uitbreiding hoort in een kleine module of een child theme (in theme.php met 'parentTheme' => 'apex'), zodat updates van het APEX-thema haar niet overschrijven. Je activeert haar onder Extensions → Modules of Extensions → Themes. Daarvoor heb je toegang tot de bestanden nodig; meestal regelt je bureau dat.
2. Breid het blok uitBreid het template page/details/inc/productmain.html.twig uit en plak de widgetcode in het blok details_productmain_tobasket na {{ parent() }}. Met parent() blijft de knop voor de winkelwagen ongewijzigd.
3. GARAN-label per productMaak voor je eigen GARAN-labels onder Administer Products → Attributes twee attributen aan, bijvoorbeeld ‘GARAN volledig’ en ‘GARAN klein’, en vul bij het product onder Selection → Assign Attributes de adressen van de twee bestanden in. Geef de waarden in het template weer in data-garan-voll en data-garan-klein.
4. Leeg de cacheLeeg de templatecache met vendor/bin/oe-console oe:cache:clear en controleer de productpagina, ook bij varianten.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Controleer je versieVanaf plentyShop LTS 5.0.83 biedt ShopBuilder de widgets ‘Guarantee of conformity’ en ‘Guarantee of durability’. De widget ‘Guarantee of durability’ toont het GARAN-label als de fabrikant, het model en de commerciële levensduurgarantie bij het artikel zijn ingevuld.
2. Open ShopBuilderOpen onder Shop » ShopBuilder de content voor de artikelpagina (contenttype Item).
3. Voeg de Code-widget inVoor de kennisgeving direct op de artikelpagina sleep je de widget ‘Code’ onder de widget ‘Add to basket’ en plak je de code van hierboven, met <script2> in plaats van <script>.
4. Opslaan en controlerenSla op en controleer de artikelpagina in de live webshop, ook bij het wisselen van variaties. Genereer na updates van plentyShop de content opnieuw onder Shop » ShopBuilder.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Controleer je versieDeze stappen gelden voor ePages Base, de oudere versie. Heb je ePages Now, gebruik dan de ingebouwde functies hierboven.
2. Voeg het script toeVoeg onder „Einstellungen“ → „Allgemeine Einstellungen“ → „Erweiterte Einstellungen“ (instellingen → algemene instellingen → geavanceerde instellingen) de regel met widget.js in het veld „HTML-Head-Bereich“ (HTML-headgedeelte) in en sla op. Hij geldt dan voor alle pagina's.
3. Placeholder in het productOpen onder „Produkte“ → „Produkte“ (producten → producten) het artikel, voeg via „Quellcode“ (broncode) de placeholder <div data-garantielabel></div> in bij de „Erweiterte Beschreibung“ (uitgebreide beschrijving), neem over en sla op.
4. ControleerVervers de paginacache via „Ihre Seite anzeigen“ (je site bekijken) en controleer de productpagina. Open daarna de broncodeweergave opnieuw: staat de placeholder er nog, dan heeft de editor hem niet verwijderd.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Creator of Website Builder?Begint het adres van de editor met cms.e.jimdo.com, dan gebruik je Jimdo Creator. In de Website Builder (builder.e.jimdo.com) kun je geen eigen code toevoegen.
2. Voeg het element toeKies op de pagina van het product, onder het winkelartikel, ‘Add Element’ → ‘More elements and Add-ons’ → ‘Widget/HTML’.
3. Plak de codePlak de widgetcode, voor een GARAN-label met de adressen in data-garan-voll en data-garan-klein, en sla op.
4. Laad het script centraalVoeg desgewenst de regel met widget.js één keer toe onder Menu → Settings → ‘Edit Head’. Dan heeft het element bij elk product alleen nog de placeholder nodig.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. PlaatsZet de code op de productpagina direct onder het koopgedeelte. Het label verschijnt precies daar.
2. Opslaan en publicerenLaad daarna de productpagina opnieuw en controleer hieronder.

Widgetcode voor de kennisgeving over de wettelijke garantie

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

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Merk-Model.svg"
  data-garan-klein="https://…/GARAN-Merk-Model-genest.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>