Kennisgeving wettelijke garantie in OXID: gratis widget

In OXID eShop 7 voeg je de kennisgeving over de wettelijke garantie onder de knop voor de winkelwagen toe met een template-uitbreiding: in het Twig-blok details_productmain_tobasket van het APEX-thema, via een kleine module of een child theme. Een CMS-pagina in de admin is niet genoeg, want de editor verwijdert scripts en op de productpagina is geen vrije CMS-plek.

De code voor OXID eShop

<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 OXID eShop

Module of child theme
De 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.
Breid het blok uit
Breid 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.
GARAN-label per product
Maak 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.
Leeg de cache
Leeg de templatecache met vendor/bin/oe-console oe:cache:clear en controleer de productpagina, ook bij varianten.

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

In een module staat het bestand op views/twig/extensions/themes/apex/page/details/inc/productmain.html.twig en ziet het er zo uit:

{% extends 'page/details/inc/productmain.html.twig' %}

{% block details_productmain_tobasket %}
  {{ parent() }}
  <div data-garantielabel></div>
  <script src="https://www.garantielabel.app/widget.js" async></script>
{% endblock %}

Goed om te weten over OXID eShop

De editor voor CMS-pagina's verwijdert <script>. Vanaf OXID 7.5 is er ook een HTML-sanitizer die scripts verwijdert als hij is ingeschakeld. De code hoort daarom in het template.
Standaard verschijnen toegewezen attributen ook in de lijst met producteigenschappen op de detailpagina. Verberg de twee GARAN-attributen daar zo nodig in het template.
OXID 6 met de Smarty-thema's Flow en Wave: het blok heeft dezelfde naam. Modules haken erop in via blocks in metadata.php; het template is page/details/inc/productmain.tpl.

Waar de kennisgeving in OXID eShop precies hoort

Op de productpagina staat de kennisgeving in het blok details_productmain_tobasket, zoals hierboven beschreven. Kiezen klanten een andere variant, dan laadt APEX het gedeelte details_container opnieuw en vervangt het door vers gerenderde HTML. Het thema voert de scripts daarin opnieuw uit. Je blokuitbreiding staat dus ook na de variantwissel weer op de pagina.

Voor een kennisgeving op elke pagina breid je de template layout/footer.html.twig uit. In het APEX-thema bevat die onder andere het blok dd_footer_copyright. Dat toont de inhoud van de CMS-pagina met de ident oxstdfooter. In een module staat je bestand in views/twig/extensions/themes/apex/layout/footer.html.twig:

{% extends 'layout/footer.html.twig' %}

{% block dd_footer_copyright %}
  {{ parent() }}
  <div data-garantielabel></div>
  <script src="https://www.garantielabel.app/widget.js" async></script>
{% endblock %}

De footertekst zelf blijf je in de CMS-pagina beheren. De placeholder hoort echter in de template, om dezelfde reden als hierboven: de editor verwijdert scripts. De template geldt voor alle winkeltalen. De widget kiest de taal van de kennisgeving op basis van de taalinstelling van de pagina, die APEX afleidt van de actieve winkeltaal.

Varianten en modelidentificatie voor het GARAN-label

In OXID maak je eerst een hoofdproduct aan. Volgens de gebruikersdocumentatie bevat dat alle basisinformatie die de varianten overnemen. De varianten beheer je in het tabblad “Variants” (labels van de Engelstalige interface). Daar kun je onder meer een ander productnummer, een andere prijs en een andere voorraad invullen dan bij het hoofdproduct. De lange beschrijving van het hoofdproduct wordt bij alle varianten getoond, tenzij een variant een eigen beschrijving heeft.

Fabrikant en fabrikantnummer (MPN) staan in het tabblad “Main”. De fabrikant kies je uit een lijst die je beheert onder “Master Settings ‣ Brands/Manufacturers”. Volgens de documentatie is de bewerkweergave van een variant bijna gelijk aan die van een gewoon product.

Een GARAN-label geldt voor één modelidentificatie. Hebben alle varianten dezelfde, dan volstaat het label bij het hoofdproduct. Zijn varianten aparte modellen, dan heeft elk model een eigen label nodig. Controleer na het instellen in de live webshop of je template bij een variantwissel het label van de gekozen variant toont of dat van het hoofdproduct.

Veelvoorkomende valkuilen in OXID eShop

Templatecache: Volgens OXID worden wijzigingen aan templates, configuraties of modules vaak pas correct toegepast nadat je de cache hebt geleegd. Naast het consolecommando hierboven leegt de OXID-module Admin Tools de templatecache onder “Service ‣ Tools”. Die cache bevat de gecompileerde Twig-templates.
Varnish: Met de reverse proxy Varnish houdt een aparte server de pagina’s in de cache. OXID verdeelt de pagina’s daarvoor in secties, zogeheten widgets. Controleer je wijziging pas als ook deze cache de nieuwe versie levert. Meestal leegt je bureau of hostingprovider die.
Subshops: Volgens de ontwikkelaarsdocumentatie activeer je een module voor een subshop met de optie --shop-id, dus vendor/bin/oe-console oe:module:activate <module-id> --shop-id=<shop-id>. Controleer daarna elke subshop afzonderlijk.
CMS-inhoud per taal: Volgens de documentatie beheer je CMS-pagina’s per taal apart, via de taalkeuze. Een templateuitbreiding is daarentegen maar één keer nodig.

Meer bronnen

Kennisgeving over de wettelijke garantie in de orderbevestiging

Volgens de richtsnoeren van de Commissie hoort de kennisgeving ook in de bevestigingsmail. De orderbevestiging gebruikt de CMS-pagina met de ident oxuserorderemail, die je bewerkt onder Customer Info → CMS Pages. JavaScript werkt niet in e-mails, dus voeg de officiële afbeelding daar als afbeelding toe. 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.

Bronnen

OXID-ontwikkelaarsdocumentatie: een blok van een actief thema uitbreiden (in het Engels)
OXID-ontwikkelaarsdocumentatie: een child theme maken (in het Engels)
OXID-ontwikkelaarsdocumentatie: HTML-sanitizer (7.5) (in het Engels)
OXID-gebruikersdocumentatie: producten, tabblad Selection (in het Engels)
OXID-gebruikersdocumentatie: CMS-pagina's (in het Engels)
APEX-thema op GitHub (sjabloon van de productpagina) (in het Engels)

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 OXID eShop zoals hierboven beschreven.

Liever je eigen bestanden? Upload dan de volledige en de geneste versie naar de mediabibliotheek van OXID eShop 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

Kan ik de code gewoon in een CMS-pagina plakken?

Niet betrouwbaar. De editor verwijdert het script, en op de productpagina is geen standaardplek waar een CMS-pagina automatisch verschijnt. Een kleine template-uitbreiding is de veilige weg.

Moet ik het APEX-thema zelf aanpassen?

Nee. Een module of child theme met {{ parent() }} is genoeg. Het originele thema blijft updatebaar en de koopknop blijft zoals hij is.

Waar vul ik het GARAN-label per product in?

Bijvoorbeeld als attribuutwaarde bij het product onder Selection → Assign Attributes. Het template leest de adressen dan uit en geeft ze door aan de widget.

Hoe toon ik de kennisgeving in OXID eShop op elke pagina?

Breid in je module of childthema de template layout/footer.html.twig uit, in het APEX-thema bijvoorbeeld het blok dd_footer_copyright. Plak daar de widgetcode na {{ parent() }}.

Blijft de kennisgeving staan bij een variantwissel?

Ja, als die in het blok details_productmain_tobasket staat. Bij een variantwissel laadt APEX het hele detailgedeelte opnieuw, inclusief je blokuitbreiding, en voert het de scripts daarin opnieuw uit.

Moet ik de module in elke subshop activeren?

Volgens de ontwikkelaarsdocumentatie activeer je hem voor een subshop met de optie --shop-id. Controleer daarna elke subshop in de live webshop.

Kennisgeving over de wettelijke garantie toevoegen in OXID eShop