Toimituspäivävalitsimen lisääminen ostoskoriisi
Tämä sivu on tulostettu Apr 24, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/customizing-themes/add-date-picker.
Huomaa
Jos käytät Shopifyn ilmaista teemaa , voit ottaa yhteyttä Shopify-tukeen tutoriaaliin liittyvissä asioissa. Tähän tarvitaan 15 minuuttia suunnitteluaikaa. Lisätietoja on kohdassa Teemojen tuki .
Voit lisätä ostoskorisivullesi kalenterin, jonka avulla asiakkaat voivat määrittää tilauksensa toimituspäivän.
Huomio
Tämä mukautus ei toimi veto-ostoskori- tai ponnahdusikkunaostoskorityylien kanssa. Se toimii ainoastaan ostoskorisivun kanssa (URL-osoite your-store.com/cart
). Jos käytät veto-ostoskoria tai ponnahdusikkunaa, sinun on muutettava ostoskorityylisi sivuksi teemaeditorissa . Lisää tuote ostoskoriin teemaesikatselussa ja klikkaa sitten ostoskorisivuvälilehteä teemaeditorissa tarkastellaksesi ostoskorisi asetuksia.
Sisällytä jQuery theme.liquid‑tiedostoosi Jotta tämä mukautus toimii, jotkin teemat edellyttävät, että jQueryn komentosarjatunniste lisätään theme.liquid-asettelutiedostoon. Jos käytät ilmaista Shopify Online Store 2.0 ‑teemaa, sinun on ehkä tehtävä seuraavat toimenpiteet:
Valitse Ulkoasu -luettelosta theme.liquid
.
Etsi tämän elementin lopputunniste </head>
. Liitä seuraava koodi uudelle riville lopputunnisteen </head>
yläpuolelle:
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
Klikkaa Tallenna .
Toimituspäivän koodinpätkän luominen Näin voit luoda koodinpätkän toimituspäivävalitsimelle:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
Klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä :
Luo koodinpätkä:
Nimeä koodinpätkäsi delivery-date
.
Valitse Luo koodinpätkä . Uusi koodinpätkätiedosto avautuu koodieditorissa.
Liitä seuraava koodi uudessa koodinpätkässäsi 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>
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
Klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä :
Luo koodinpätkä:
Nimeä koodinpätkäsi delivery-date
.
Valitse Luo koodinpätkä . Uusi koodinpätkätiedosto avautuu koodieditorissa.
Liitä seuraava koodi uudessa koodinpätkässäsi 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>
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
Klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä :
Luo koodinpätkä:
Nimeä koodinpätkäsi delivery-date
.
Valitse Luo koodinpätkä . Uusi koodinpätkätiedosto avautuu koodieditorissa.
Liitä seuraava koodi uudessa koodinpätkässäsi 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>
Klikkaa Tallenna .
Koodinpätkän sisällyttäminen ostoskorisivuusi Näin voit sisällyttää toimituspäivän koodinpätkän ostoskorisivullesi:
klikkaa Sections -hakemistossa main-cart-items.liquid
.
Etsi tämän elementin lopputunniste </form>
. Liitä seuraava koodi uudelle riville lopputunnisteen </form>
yläpuolelle:
{% render 'delivery-date' %}
Klikkaa Tallenna .
Toimituspäivän syöttökenttä on nyt tilaussivullasi. Kun klikkaat tekstikentän sisältä, kalenteri tulee näkyviin:
Tässä mukautuksessa käytetty päivämääränvalitsin on jQuery UI ‑kirjaston pienohjelma.