JavaScript-asset voor bestelstatus

Let op

Dit is een uitgebreide tutorial en wordt niet ondersteund door Shopify. Hiervoor is kennis van een webontwerptaal zoals HTML, CSS, JavaScript en Liquid vereist. We raden je aan een Shopify-partner in te huren als je het niet prettig vindt om verder te gaan met de volgende tutorial.

Opmerking

Aanvullende scripts om de bestelstatuspagina aan te passen, zijn uitgefaseerd.

Merchants met het Basic-, Shopify- en Advanced-abonnement kunnen de bestelstatuspagina aanpassen met de checkout- en accounteditor. Shopify Plus-merchants kunnen Checkout Extensibility gebruiken om hun bestelstatuspagina aan te passen.

Je kunt aangepaste content aan de bestelstatuspagina toevoegen met het JavaScript-element Shopify.Checkout.OrderStatus voor bestelstatus, bijvoorbeeld: - notities bij bepaalde producten - instructies voor verschillende verzendmethoden - downloadlinks voor digitale producten.

Ga naar Instellingen > Checkout om dit Javascript-element toe te voegen vanuit het Shopify-beheercentrum. Scrol omlaag naar de sectie Bestelstatuspagina en voeg het Javascript-element toe aan het vak Aanvullende scripts.

Dit JavaScript-asset is ook toegankelijk via ScriptTag.

Zo werkt het

Shopify.Checkout.OrderStatus bevat een functie voor het genereren van nieuwe content:

addContentBox(params)

Met deze functie wordt een contentvak toegevoegd waarbij elke parameter die aan de functie wordt doorgegeven, als een afzonderlijke rij wordt weergegeven.

HTML5 wordt binnen de functie ondersteund en je kunt Liquid buiten de functie gebruiken.

Voorbeeld

Je kunt content toevoegen wanneer een bepaalde verzendmethode is gebruikt. Met deze code voeg je de openingstijden van de winkel toe aan de bestelstatuspagina wanneer een klant de verzendmethode 'afhalen in winkel' kiest.

<script>
  {% if checkout.shipping_method.title == 'Pick-up at the store' %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Pick-up in store</h2>',
     '<p>We are open everyday from 9am to 5pm.</p>'
    )
  {% endif %}
</script>