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.
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:
Klik in de directory Opmaak op
theme.liquid
.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 }}
- Klik op Opslaan.
Maak een fragment aan over de leveringsdatum
Je kunt als volgende een fragment aanmaken voor de bezorgdatum:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
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 directory Fragmenten op Een nieuw fragment toevoegen.
Maak het fragment aan:
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>
- Klik op Opslaan.
Voeg het fragment toe aan de winkelwagenpagina
Je kunt het fragment met de leveringsdatum in de winkelwagenpagina opnemen:
Klik in de directory Secties op
main-cart-items.liquid
.Zoek de sluitende tag
</form>
in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag</form>
:
{% render 'delivery-date' %}
- 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 datumkiezer die in deze aanpassing wordt gebruikt, is een widget uit de jQuery UI-bibliotheek.