De Code-editor gebruiken voor aangepaste Productthema's

EARLY ACCESS: Als je deze functie wilt gebruiken en je hebt het Enterprise-plan, neem dan contact op met je successmanager, die dit voor je activeert.

Niet alle beschikbare variabelen worden in dit artikel vermeld als geïmporteerde attributen. Deze lijst wordt bijgewerkt zodra de functie officieel wordt uitgebracht.

---

Je kunt dynamische content aan je online publicaties toevoegen door de productgegevens rechtstreeks op de pagina te laten weergeven door de Producthotspots. Klik hier voor meer informatie over het toevoegen van dynamische content.

Met de Productthema-editor wijzig je welke productgegevens dynamisch worden weergegeven en pas je de lay-out van de gegevens aan zodat deze bij de look-and-feel van je merk past. Met HTML en CSS kun je de kleur en grootte van de tekst wijzigen, vormen toevoegen, aangepaste lettertypen gebruiken en meer. Je maakt verschillende thema's en slaat deze op, zodat je dynamische content in verschillende toepassingen kunt gebruiken en speelse ontwerpen kunt ondersteunen.

Voor het gebruik van de Productthema-editor is een goed begrip van HTML en CSS vereist. Als je hulp nodig hebt, maakt ons Services-team graag nieuwe thema's voor je. In dat geval kun je contact opnemen met je Success Manager voor een introductie.

Productthema's kunnen ook zonder code worden aangepast. Klik hier voor meer informatie

In dit artikel:

De Code-editor:

De Code-editor openen

Je kunt de Code-editor openen door op het </>-symbool in de rechteronderhoek van de hotspot-editor te klikken.

De Code-editor openen:

Productthema's maken en bijwerken

Nadat je de editor hebt geopend, kun je in de vervolgkeuzelijst een thema selecteren om te bewerken. Onderaan de lijst vind je de optie om een nieuw thema te maken. Nadat je het nieuwe thema een naam hebt gegeven, wordt het aan de lijst toegevoegd.

Elk thema bestaat uit een HTML- en een CSS-sectie. Gebruik de HTML-sectie om te bepalen welke elementen in het thema moeten worden opgenomen. Gebruik de CSS-sectie om de weergave van de geselecteerde elementen aan te passen. Het gebruik van CSS in de HTML-sectie en andersom wordt niet ondersteund.

Een nieuw Productthema maken:

Naast de vervolgkeuzelijst vind je opties om een thema te hernoemen of te verwijderen.

Beschikbare variabelen

De HTML-sectie bepaalt de volgorde waarin elementen op de pagina verschijnen en welke elementen in de lay-out worden gebruikt. Om dynamische content te laden, kun je kiezen uit de volgende variabelen:

- {{id}}
- {{title}}
- {{description}}
- {{link}}
- {{image_link}}
- {{availability}}
- {{price}}
- {{sale_price}}
- {{effective_sale_price}}
- {{discount_percentage}}
- {{product_type}}
- {{brand}}
- {{gtin}}
- {{mpn}}
- {{custom_label_0}}
- {{custom_label_1}}
- {{custom_label_2}}
- {{custom_label_3}}
- {{custom_label_4}}
- {{custom_label_5}}
- {{custom_label_6}}
- {{custom_label_7}}
- {{custom_label_8}}
- {{custom_label_9}}
Screen Reader Variables
- {{sr_original_price}}
- {{sr_sale_price}}

BELANGRIJK: Of een variabele content bevat, hangt ervan af of deze beschikbaar is in de productfeed die is gekoppeld aan de bijbehorende groep. De variabele {{effective_sale_price}} is de enige berekende variabele die niet rechtstreeks uit de feed komt. Deze variabele toont de {{sale_price}} als de waarde lager is dan de waarde van {{price}} en hoger is dan nul.

In andere gevallen wordt er niets geretourneerd. Op dezelfde manier toont {{discount_percentage}} de getalwaarde (zonder "%") als zowel de oorspronkelijke prijs als de actieprijs beschikbaar zijn in de productfeed.

Variabelen voor schermlezers, zoals {{sr_original_price}} en {{sr_sale_price}}, zijn bedoeld voor toegankelijkheidsdoeleinden en zorgen voor een geoptimaliseerde weergave van de tekst voor ondersteunende technologieën wanneer de bijbehorende prijsgegevens beschikbaar zijn.

Beschikbare processorfuncties

Net zoals de standaard-HTML de prijs alleen toont als deze beschikbaar is, wil je mogelijk specifieke voorwaarden aan een variabele toevoegen of de waarde ervan optimaliseren voor bepaalde toepassingen. Hiervoor kun je de ingebouwde helpers van de Handlebars-template-engine en de hieronder vermelde processorfuncties gebruiken.

sanitize - Zet een tekenreeks om naar kleine letters en vervangt alle spaties door - (sanitize Round Cement Planter => round-cement-planter)
numeral - Haalt het gehele getal op uit een kommagetal (numeral 5.66 => 5)
fraction - Haalt de fractie op uit een kommagetal (fraction 5.66 => 66)
formatPrice - Maakt een getal op als prijs (formatPrice 5.66 => 5.66) (formatPrice 5 => 5.00)
numeralWithThousandsSeparator - Geeft een getal weer met een duizendscheiding. (1234567) => 1.234.567)

Als je bijvoorbeeld als klassenaam wilt gebruiken om per producttype verschillende stijlen toe te passen, kun je de waarde opschonen om ervoor te zorgen dat deze correct is opgemaakt.

Drievoudige snor (onbewerkte versus geparseerde inhoud)

Standaard worden variabelen tussen dubbele snorren weergegeven als platte tekst. Dit betekent dat alle HTML in de waarde wordt geëscape en als tekst wordt weergegeven.

Voorbeeld:

Geeft alleen onbewerkte tekst weer (HTML wordt niet geparseerd).

Als je wilt dat de inhoud als HTML wordt weergegeven, kun je drievoudige snorren gebruiken.

Voorbeeld:

}

Geeft geparseerde HTML-inhoud weer.

Gebruik drievoudige snorren alleen als je de bron van de inhoud vertrouwt, aangezien hierdoor HTML rechtstreeks in de publicatie kan worden ingevoegd.

CSS gebruiken

In de CSS-editor kun je de verschillende klassen selecteren die in de HTML-editor worden gebruikt. Afhankelijk van je behoefte kun je klassen ook hernoemen in de HTML-editor of nieuwe toevoegen.

Bijvoorbeeld:

In dit voorbeeld verwijzen de vetgedrukte delen naar de klassen in de HTML van het standaardthema, en worden de volgende eigenschappen respectievelijk toegepast: de kleur en grootte van de producttitel en prijzen worden aangepast, en de productafbeelding wordt ingezoomd en opnieuw gepositioneerd.

Om de basisstijl van de dynamische hotspot te wijzigen, bijvoorbeeld om een algemene achtergrondkleur toe te passen, selecteer je #publication .dynamic-hotspot:

Aangepaste lettertypen gebruiken

Er zijn twee manieren waarop je aangepaste lettertypen kunt gebruiken

1. Je kunt de functie voor aangepaste lettertypen van Publitas gebruiken om elk gewenst lettertype te gebruiken

Lees hier meer over het toevoegen van aangepaste lettertypen in Publitas.

2. Je kunt ook @font-face gebruiken om een aangepast lettertype toe te passen. In plaats van te verwijzen naar het extern gehoste lettertype, moet het lettertype rechtstreeks in de CSS-content worden ingesloten door het van WOFF naar een base64-gecodeerde tekenreeks te converteren.

Ingesloten lettertype, waarbij XXXXXXX wordt vervangen door de base64-gecodeerde tekenreeks:

Tips en trucs

Gebruik een apart thema om wijzigingen te testen. Om te voorkomen dat wijzigingen naar live publicaties worden gepubliceerd, kun je nieuwe thema's of wijzigingen in bestaande thema's testen in een tijdelijk thema.
Houd rekening met vierkante productafbeeldingen. Productafbeeldingen zijn vaak vierkant. Afhankelijk van de afmetingen en oriëntatie van het product kunnen afbeeldingen lege ruimte bevatten die van invloed is op de lay-out. We raden aan hier rekening mee te houden en het thema met verschillende producten uit te proberen.
De HTML resetten. Als je de HTML uit de Productthema-editor verwijdert, wordt de standaard-HTML opnieuw toegepast. Vernieuw gewoon het HTML-tabblad nadat je op Opslaan en toepassen hebt geklikt.
Een grotere werkruimte maken. Gebruik de pijlknop ↤ onderaan om de editor te vergroten en een beter overzicht van je codestructuur te krijgen.
Afbeeldingen altijd binnen de hotspot laten passen. Het standaardthema kan inzoomen op afbeeldingen wanneer de hotspot smaller wordt. Dit is ideaal om overtollige witte ruimte te voorkomen en de producten groter te laten lijken. Als dit niet bij je ontwerp past, kun je ervoor zorgen dat afbeeldingen altijd binnen het hotspotgebied passen door de volgende code toe te voegen in het CSS-gedeelte van de Thema-editor:
```
img {
max-width: 100%;
object-fit: contain;
}
```