Een bezorgdatum aan je winkelwagen toevoegen

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is vijftien minuten ontwerptijd nodig. Hier vind je meer informatie over het Ontwerpbeleid van Shopify.

Opmerking

Deze aanpassing is voor Online Store 2.0-thema's en is niet van toepassing op vintage thema's van Shopify. Ontdek de architectuurversie van je thema.

Je kunt een kalender opnemen op de pagina van je winkelwagen waarop klanten een afleverdatum voor hun bestelling kunnen opgeven.

Waarschuwing: Deze customisatie werkt niet voor lade- of pop-upstijlen van je winkelwagen, en werkt alleen op een winkelwagenpagina (op de pagina van de URL your-store.com/cart). Als je een lade of pop-up voor je winkelwagen gebruikt, wijzig dan de winkelwagenstijl in Pagina in de themabewerker. Voeg een product aan de winkelwagen toe in je themavoorbeeld, en klik daarna op het tabblad Winkelwagenpagina in de themabewerker om je winkelwageninstellingen te bekijken.

Voeg jQuery toe aan je theme.liquid

Voor deze aanpassing werkt, is het voor sommige thema's nodig een scripttag voor jQuery toe te voegen aan het opmaakbestand van theme.liquid. Als je een gratis Shopify Online Store 2.0-thema gebruikt, is het misschien nodig dat je de volgende stap uitvoert:

1. Klik in de map Opmaak op theme.liquid.

2. Zoek de sluitende tag </head> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </head>:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

1. Klik op Opslaan.

Maak een fragment aan over de leveringsdatum

Je kunt als volgende een fragment aanmaken voor de bezorgdatumkiezer:

Desktop

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.

2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.

3. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

4. Maak het fragment aan:

   1. Benoem je fragment delivery-date.
   2. Klik op Fragment aanmaken. Het nieuwe fragmentbestand wordt geopend in de codebewerker.

5. Plak de volgende code in je nieuwe fragment delivery-date.liquid:

1. Klik op Opslaan.

iPhone

1. Tik in de Shopify-app op de knop ….

2. Tik in de sectie Verkoopkanalen op webshop.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.

5. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

6. Maak het fragment aan:

   1. Benoem je fragment delivery-date.
   2. Klik op Fragment aanmaken. Het nieuwe fragmentbestand wordt geopend in de codebewerker.

7. Plak de volgende code in je nieuwe fragment delivery-date.liquid:

1. Klik op Opslaan.

Android

1. Tik in de Shopify-app op de knop ….

2. Tik in de sectie Verkoopkanalen op webshop.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.

5. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

6. Maak het fragment aan:

   1. Benoem je fragment delivery-date.
   2. Klik op Fragment aanmaken. Het nieuwe fragmentbestand wordt geopend in de codebewerker.

7. Plak de volgende code in je nieuwe fragment delivery-date.liquid:

1. Klik op Opslaan.

Voeg het fragment toe aan de winkelwagenpagina

Je kunt het fragment met de leveringsdatum in de winkelwagenpagina opnemen:

1. Klik in de directory Secties op main-cart-items.liquid.

2. Zoek de sluitende tag </form> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </form>:

{% render 'delivery-date' %}

1. Klik op Opslaan.

Je hebt nu een invoerveld voor leveringsdata op de pagina van je winkelwagen. Wanneer je in het tekstveld klikt, wordt een kalender weergegeven:

De datumkiezer die in deze aanpassing wordt gebruikt, is een widget uit de jQuery UI-bibliotheek.