Een bezorgdatum aan je winkelwagen toevoegen

Deze pagina is afgedrukt op Sep 11, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-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 Boundless, Debut-versie 17.2.0 of later, Express, Narrative of Venture gebruikt, is het wellicht nodig de volgende stap te 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

  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:

{{ '//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.
  1. Tik in de Shopify-app op de knop ….
  2. Tik in het gedeelte 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:

{{ '//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.
  1. Tik in de Shopify-app op de knop ….
  2. Tik in het gedeelte 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:

{{ '//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:

Keuze van bezorgdatum

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.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis