Legg til en leveringsdatovelger i handlekurven
Du kan legge til en kalender på handlekurvsiden som lar kundene angi en leveringsdato for bestillingen.
På denne siden
Inkluder jQuery i theme.liquid
For at denne tilpasningen skal fungere krever noen temaer at en skripttagg for jQuery legges til i oppsettfilen theme.liquid. Hvis du bruker et gratis Shopify Online Store 2.0-tema kan det hende du må utføre følgende trinn:
I Oppsett-katalogen klikker du på
theme.liquid
.Finn den avsluttende
</head>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</head>
-taggen:
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
- Klikk på Lagre.
Opprett en kodebit for leveringsdato
For å opprette en kodebit for leveringsdatovelgeren:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Kodebiter-katalogen klikker du på Legg til en ny kodebit.
Opprett kodebiten:
I den nye
delivery-date.liquid
-kodebiten limer du inn følgende kode:
{{ '//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>
- Klikk på Lagre.
Inkluder kodebiten på handlekurvsiden
Slik inkluderer du kodebiten for leveringsdato på handlekurvsiden:
I Deler-katalogen klikker du på
main-cart-items.liquid
.Finn den avsluttende
</form>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</form>
-taggen:
{% render 'delivery-date' %}
- Klikk på Lagre.
Du har nå et tekstfelt for leveringsdato på handlekurvsiden. Når du klikker i tekstfeltet, vises det en kalender:
Datovelgeren som brukes i denne tilpasningen er et kontrollprogram fra jQuery UI-biblioteket.