Een bezorgdatum aan je winkelwagen toevoegen

Deze pagina is afgedrukt op Jul 16, 2023. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/customizing-themes/add-date-picker.

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

Keuze van bezorgdatum

Op deze pagina

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 directoryOpmaakoptheme.liquid.

  2. Zoekde sluitende tagin je code. Plak de volgende code op een nieuwe regel boven de sluitende tag:

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

Maak een fragment aan over de leveringsdatum

Je kunt als volgende een fragment aanmaken voor de bezorgdatumkiezer:

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

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

  1. Tik in deShopify-appopWinkel.

  2. Tik in het gedeelteVerkoopkanalenopOnlinewinkel.

  3. Tik opThema's beheren.

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

  1. Tik in deShopify-appopWinkel.

  2. Tik in het gedeelteVerkoopkanalenopOnlinewinkel.

  3. Tik opThema's beheren.

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

  1. Klik in de directoryFragmentenopEen nieuw fragment toevoegen.

  2. Maak het fragment aan:

  3. Plak de volgende code in je nieuwe fragmentdelivery-date.liquid:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}<跨class="nt">src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"defer="defer">style="width:300px; clear:both;">
for="date">Pick a delivery date:<跨class="nt">id="date"type="text"name="attributes[date]"值="{{ cart.attributes.date }}"/><跨style="display:block"class="instructions">We do not deliver during the weekend.<跨class="nt">
  1. Klik opOpslaan.

Voeg het fragment toe aan de winkelwagenpagina

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

  1. Klik in de directorySectiesopmain-cart-items.liquid.

  2. Zoekde sluitende tagin je code. Plak de volgende code op een nieuwe regel boven de sluitende tag:

{%render'delivery-date'%}
  1. Klik opOpslaan.

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

Keuze van bezorgdatum

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