Toimituspäivävalitsimen lisääminen ostoskoriisi
Voit lisätä ostoskorisivullesi kalenterin, jonka avulla asiakkaat voivat määrittää tilauksensa toimituspäivän.
Tällä sivulla
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:
Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi 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ä:
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.