Een bezorgdatum aan je winkelwagen toevoegen

Let op

Vintage thema's zijn niet beschikbaar in de Theme Store. Deze thema's hebben niet de functies die in de Online Store 2.0-thema's van Shopify zijn opgenomen en de gratis vintage thema's van Shopify krijgen alleen nog updates als dit voor de beveiliging nodig is.

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je mogelijk contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is 15 minuten ontwerptijd nodig. Zie Ondersteuning voor thema's voor meer informatie.

Opmerking

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

• Ontdek de architectuurversie van je thema
• Ontdek aanpassingen aan Online Store 2.0-thema

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

Let op

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 winkelwagenoptie of pop-up gebruikt, moet je je winkelwagenstijl naar Pagina veranderen 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 aan het werk, is het voor sommige thema's nodig een scripttag voor jQuery toe te voegen aan het opmaakbestand van theme.liquid. Als je Boundless, Debut-versie 17.2.0 of later, Express, Narrative of Venture gebruikt, moet je mogelijk de volgende stap volgen:

1. Klik in de directory 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 bezorgdatum:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > 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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

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.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

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.

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

2. Maak het fragment aan:

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

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

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 cart-template.liquid. Klik op cart.liquid in het menu Templates als je thema dit bestand niet bevat.

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 datumkieuzer die in deze aanpassing wordt gebruikt, is een widget uit de jQuery UI-bibliotheek. In deze blogpost wordt uitgelegd hoe je specifieke data uit kunt schakelen in de agenda van de datumkiezer.