Een leverdatumkiezer aan je winkelwagen toevoegen

Je kunt een kalender opnemen op je winkelwagenpagina waarmee klanten een leverdatum voor hun bestelling kunnen opgeven.

Op deze pagina

jQuery opnemen in je theme.liquid

Om deze aanpassing te laten werken, is het bij sommige thema's nodig dat er een script-tag voor jQuery wordt toegevoegd aan het lay-outbestand theme.liquid. Als je een gratis Shopify-thema gebruikt, moet je mogelijk de volgende stap volgen:

Klik in de map Lay-out op theme.liquid.
Zoek de afsluitende </head>-tag in de code. Plak de volgende code op een nieuwe regel boven de afsluitende </head>-tag:

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

Klik op Opslaan.

Een fragment voor de leverdatum aanmaken

Een fragment voor je leverdatumkiezer aanmaken:

Desktop

Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de map Fragmenten op Nieuw fragment toevoegen:
Het fragment aanmaken:
Geef je fragment de naam delivery-date.
Klik op Fragment aanmaken. Het nieuwe fragmentbestand wordt geopend in de code-editor.
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/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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 weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

Klik op Opslaan.

Mobiel

Tik in de Shopify-app op het pictogram .
Tik in de sectie Verkoopkanalen op Webshop.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, tik op de knop ... om het actiemenu te openen en tik vervolgens op Code bewerken.
Tik in de map Fragmenten op Nieuw fragment toevoegen:
Het fragment aanmaken:
Geef je fragment de naam delivery-date.
Tik op Fragment aanmaken. Het nieuwe fragmentbestand wordt geopend in de code-editor.
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/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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 weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

Tik op Opslaan.

Het fragment opnemen in je winkelwagenpagina

Het fragment voor de leverdatum opnemen in je winkelwagenpagina:

Klik in de map Secties op main-cart-items.liquid.
Zoek de afsluitende </form>-tag in de code. Plak de volgende code op een nieuwe regel boven de afsluitende </form>-tag:

{% render 'delivery-date' %}

Klik op Opslaan.

Je hebt nu een invoerveld voor de leverdatum op je winkelwagenpagina. Wanneer je in het tekstveld klikt, verschijnt er een kalender:

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