Studio Editor: Multi-state vakken gebruiken

Leestijd 4 minuten
Met multi-state vakken kun je verschillende inhoud voor verschillende situaties in dezelfde container weergeven, waarbij één status tegelijk wordt weergegeven. Kies het aantal statussen dat je vak moet hebben, ontwerp ze volledig en geef ze ID's die je later in je code zult gebruiken.
Je code bepaalt wanneer elke status moet worden weergegeven. Je kunt voorwaarden creëren voor elke status om automatisch te verschijnen, of bezoekers zelf laten navigeren. 
Een GIF met een multi-state vak op een live-status die van status verandert.

Stap 1 | Voeg een multi-state vak toe

De eerste stap is het rechtstreeks toevoegen van een multi-state vak aan je website vanuit het Toevoegen-paneel. Sleep het vak naar de gewenste locatie op je pagina. 

Om een vak met meerdere statussen toe te voegen:

  1. Klik links in de Editor op Elementen toevoegen.
  2. Klik op Indeling-tools.
  3. Klik op Multi-state vakken.
  4. Sleep een multi-state vak naar de relevante locatie op je pagina. 
Het Elementen toevoegen-paneel is geopend. Het multi-state vak-element is gemarkeerd.
Gebruik multi-state vakken in repeaters:
Zodra je een multi-state vak toevoegt aan een repeater, wordt deze automatisch toegevoegd aan de rest van de items met exact hetzelfde ontwerp. Dit is handig voor lijsten met herhalende items zoals veelgestelde vragen of productgalerijen.

Stap 2 | Voeg statussen toe en ontwerp ze

Zodra je het vak hebt toegevoegd, ontwerp je de statussen die het weergeeft. Je kunt deze statussen naar wens aanpassen: gebruik ze voor kleine badges zoals de beschikbaarheid van producten (bijvoorbeeld 'Nieuw', 'Niet op voorraad'), of maak een compleet ander ontwerp voor elke status. 
Klik hieronder om te lezen hoe je: 
Het Statussen beheren-element van een multi-state vak is geopend in de Studio Editor en toont de opties.
Ontwerptip:
De statussen kunnen verschillende hoogte-eigenschappen hebben, waarmee je bijvoorbeeld aanvullende informatie kunt onthullen. De breedte van je statussen blijft echter altijd hetzelfde.

Stap 3 | Voeg code toe

De laatste stap om het multi-state vak functioneel te maken, is het toevoegen van code die bepaalt wanneer elke status verschijnt. 
Met behulp van de functies en gebeurtenissen die beschikbaar zijn in de Velo API voor multi-state vakken, kun je regels definiëren en implementeren voor het weergeven van en navigeren door je statussen.
Belangrijk:
Zorg er bij het toevoegen van de relevante code voor dat je de status-ID's correct hebt geschreven, met exact dezelfde spelling en hoofdletters. 
Een GIF met de statussen van een multi-state vak en hun relevante codes aan de linkerkant.

Vond je dit artikel nuttig?

|