Je kunt de aangepaste sjabloongegevens wijzigen om items op het productniveau op je website in te stellen, zoals het toevoegen van extra functionaliteit aan productpagina's en aan de producttypecategorie.
We bevelen je aan je aangepaste sjabloon niet te wijzigen, tenzij je diepgaande kennis hebt van HTML en CSS. Anders bevelen we je aan een expert in te huren. Houd er ook rekening mee dat zodra je de Thema editor activeert, je geen thema-updates meer ontvangt.
Aangepaste sjabloongegevens inschakelen
Om de aangepaste sjabloongegevens te kunnen bewerken:
- Ga naar Instellingen > Workflow.
- Schakel de optie Aangepaste sjabloongegevens in door de schakelaar om te zetten.
- Klik op Opslaan.
De sectie Aangepaste sjabloongegevens verschijnt.
Vanaf hier kun je het volgende:
- Voeg een nieuwe variabele toe door op Nieuwe variabele toevoegen te klikken, de Naam van de variabele in te voeren en de selectievakjes te gebruiken om te kiezen op welke pagina's het gegevensveld moet verschijnen. Klik op Toevoegen.
- Je kunt maximaal 10 variabelen hebben.
- Bewerk een bestaande variabele door op Bewerken te klikken. Wijzig de informatie van de variabele en klik op Opslaan.
- Verwijder een variabele door op Verwijderen te klikken en de permanente verwijdering te bevestigen door in de pop-up op Verwijderen te klikken.
- Je kunt de eerste 3 variabelen (Gegevens 01, Gegevens 02 en Gegevens 03) niet verwijderen.
Aangepaste sjabloongegevens wijzigen
De aangepaste sjabloongegevens wijzigen:
- Navigeer naar Ontwerp > Thema-editor.
- Klik op Geavanceerd.
- Klik op Code bewerken.
- Er verschijnt een pop-up met de waarschuwing dat het bewerken van code je conceptversie verwijdert en dat je geen automatische thema-updates meer ontvangt. Je kunt het oorspronkelijke thema herstellen door het opnieuw te installeren vanuit de Themawinkel, maar je wijzigingen, thema-instellingen en thema-afbeeldingen gaan verloren bij het herstellen. Klik op het selectievakje naast Ik begrijp het en wil doorgaan aan en klik vervolgens op Code bewerken.
Voeg de onderstaande regels toe aan de juiste gedeelten van de oorspronkelijke themacode om de aangepaste sjabloondatavelden aan te roepen.
{% if product.data_01 == 'link term' %}
Als de regel data_01 is ingevuld, wordt de HTML-code hier aangeroepen:
{% else %}
Als de regel data_01 niet is ingevuld, wordt de HTML-code hier (vaak de oorspronkelijke code) aangeroepen:
{% endif %}
Deze coderegels creëren een IF-ELSE voorwaardelijke sectie. Als het veld Data_01 op een productpagina in je backoffice is ingevuld, wordt de code in de sectie IF-ELSE gebruikt en wordt de actie geactiveerd die is gedefinieerd door de linkterm. Anders wordt de oorspronkelijke code in de sectie ELSE geactiveerd.
De linkterm kan overeenkomen met veel verschillende acties, zoals het toevoegen van labels aan producten of bijvoorbeeld het verwijderen van de knop Toevoegen aan winkelwagen van de productvermelding en productdetailpagina's voor specifieke items.
Wanneer je klaar bent met het bewerken van de themacodes, roep je de wijzigingen aan via de productinstellingen:
- In de eCom backoffice selecteer je Producten > Producten.
- Selecteer de productnaam.
- Klik op Extra template data.
- Voer je linktermen in de bijbehorende velden Waarde in.
- Klik op Opslaan.
Voorbeeld
Je wilt HTML/CSS-code schrijven om een label Nieuw weer te geven over de afbeeldingen van nieuwe producten in je online winkel. Hiermee kun je op productniveau bepalen wanneer deze code moet worden aangeroepen.
Je code moet er ongeveer zo uitzien:
Sectie IF-THEN:
Voeg de HTML-code in die een label Nieuw weergeeft over de afbeeldingen van nieuwe producten:
{% if product.data_01 == 'New' %}
Sectie ELSE:
{% else %}
Oorspronkelijke code die wordt aangeroepen wanneer het veld Data 01 leeg wordt gelaten:
{% endif %}
Je hebt de voorwaardelijke codesectie IF-THEN/ELSE gemaakt. Als het veld Data 01 voor een bepaald product de linkterm Nieuw bevat, wordt de HTML-code die je onder de sectie IF-THEN hebt toegevoegd, op productniveau toegepast. Anders blijven de oorspronkelijke themacodes actief.