Føj en datovælger for levering til indkøbskurven
Denne side blev udskrevet kl. Mar 29, 2024. Besøg https://help.shopify.com/da/manual/online-store/themes/customizing-themes/add-date-picker for at se den aktuelle version.
Bemærk
Hvis du bruger et gratis tema fra Shopify , kan du muligvis kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide under Support til temaer .
Du kan inkludere en kalender på siden med indkøbskurven, så dine kunder kan angive en leveringsdato for deres ordrer.
Advarsel
Denne tilpasning fungerer ikke for indkøbskurvskuffer eller pop op-indkøbskurve, og den vil kun fungere for en side med indkøbskurv (på webadressen your-store.com/cart
). Hvis du bruger en indkøbskurvskuffe eller en pop op-indkøbskurv, skal du ændre indkøbskurvstilen til Side i temaeditoren . Læg et produkt i indkøbskurven i forhåndsvisningen af temaet, og klik derefter på fanen Side med indkøbskurv i temaeditoren for at se dine indstillinger for indkøbskurven.
Inkluder jQuery i theme.liquid Nogle temaer kræver, at der føjes et scripttag for jQuery til theme.liquid-layoutfilen, hvis denne tilpasning skal virke. Hvis du bruger et gratis Online Store 2.0-tema fra Shopify, skal du muligvis følge det næste trin:
I mappen Layout skal du klikke på theme.liquid
.
Find det afsluttende </head>
-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </head>
-tag:
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
Klik på Gem .
Opret et kodestykke med leveringsdato Sådan opretter du et kodestykke til din datovælger for levering:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode .
Klik på Opret et nyt kodestykke i mappen Kodestykker :
Opret kodestykket:
Navngiv dit kodestykke delivery-date
.
Klik på Opret kodestykke . Den nye kodestykkefil åbnes i kodeeditoren.
I dit nye delivery-date.liquid
-kodestykke skal du indsætte 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>
Klik på Gem .
Tryk på knappen … i Shopify-appen .
Tryk på Webshop i afsnittet Salgskanaler .
Tryk på Administrer temaer .
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode .
Klik på Opret et nyt kodestykke i mappen Kodestykker :
Opret kodestykket:
Navngiv dit kodestykke delivery-date
.
Klik på Opret kodestykke . Den nye kodestykkefil åbnes i kodeeditoren.
I dit nye delivery-date.liquid
-kodestykke skal du indsætte 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>
Klik på Gem .
Tryk på knappen … i Shopify-appen .
Tryk på Webshop i afsnittet Salgskanaler .
Tryk på Administrer temaer .
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode .
Klik på Opret et nyt kodestykke i mappen Kodestykker :
Opret kodestykket:
Navngiv dit kodestykke delivery-date
.
Klik på Opret kodestykke . Den nye kodestykkefil åbnes i kodeeditoren.
I dit nye delivery-date.liquid
-kodestykke skal du indsætte 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>
Klik på Gem .
Inkluder kodestykket på siden med indkøbskurv Sådan inkluderer du kodestykket for leveringsdato på siden med indkøbskurv:
Klik på main-cart-items.liquid
i mappen Afsnit .
Find det afsluttende </form>
-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </form>
-tag:
{% render 'delivery-date' %}
Klik på Gem .
Du har nu inputfeltet for leveringsdato på din side med indkøbskurven. Der vises en kalender, når du klikker i tekstfeltet:
Den datovælger, der bruges i denne tilpasning, er en widget fra jQuery UI-biblioteket .