Een bezorgdatum aan je winkelwagen toevoegen

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

Keuze van bezorgdatum

Voeg jQuery toe aan je theme.liquid

Om deze aanpassing te laten werken, is voor sommige thema's vereist dat een scripttag voor jQuery wordt toegevoegd aan het theme.liquid-opmaakbestand. 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 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:

  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 weekend.</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 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:

Keuze van bezorgdatum

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis