Toimituspäivä­valitsimen lisääminen ostoskoriisi

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen saadaksesi tähän tutoriaaliin liittyvää tukea. Tarvitset 15 minuuttia suunnitteluaikaa. Lue lisää Shopifyn suunnittelukäytännöstä.

Huomaa

Tämä mukautus koskee verkkokaupan Online Store 2.0 ‑teemoja, eikä sitä sovelleta vanhoihin Shopify-teemoihin. Katso teemasi arkkitehtuuriversio.

Voit lisätä ostoskorisivullesi kalenterin, jonka avulla asiakkaat voivat määrittää tilauksensa toimituspäivän.

Varoitus: 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:

1. Klikkaa Ulkoasu-hakemistossa theme.liquid.

2. 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 }}

1. Klikkaa Tallenna.

Toimituspäivän koodinpätkän luominen

Näin voit luoda koodinpätkän toimituspäivävalitsimelle:

Tietokone

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.

2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

3. Klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä:

4. Luo koodinpätkä:

   1. Nimeä koodinpätkäsi delivery-date.
   2. Valitse Luo koodinpätkä. Uusi koodinpätkätiedosto avautuu koodieditorissa.

5. 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() {
      $(&#x22;#date&#x22;).datepicker({
      minDate: +1,
      maxDate: &#x27;+2M&#x27;,
      beforeShowDay: $.datepicker.noWeekends
    });
  });
}
  }
</script>

1. Klikkaa Tallenna.

iPhone

1. Napauta Shopify-sovelluksessa …-painiketta.

2. Napauta myyntikanavat -osiossa Verkkokauppa.

3. Napauta Hallitse teemoja.

4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

5. Klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä:

6. Luo koodinpätkä:

   1. Nimeä koodinpätkäsi delivery-date.
   2. Valitse Luo koodinpätkä. Uusi koodinpätkätiedosto avautuu koodieditorissa.

7. 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() {
      $(&#x22;#date&#x22;).datepicker({
      minDate: +1,
      maxDate: &#x27;+2M&#x27;,
      beforeShowDay: $.datepicker.noWeekends
    });
  });
}
  }
</script>

1. Klikkaa Tallenna.

Android

1. Napauta Shopify-sovelluksessa …-painiketta.

2. Napauta myyntikanavat -osiossa Verkkokauppa.

3. Napauta Hallitse teemoja.

4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

5. Klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä:

6. Luo koodinpätkä:

   1. Nimeä koodinpätkäsi delivery-date.
   2. Valitse Luo koodinpätkä. Uusi koodinpätkätiedosto avautuu koodieditorissa.

7. 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() {
      $(&#x22;#date&#x22;).datepicker({
      minDate: +1,
      maxDate: &#x27;+2M&#x27;,
      beforeShowDay: $.datepicker.noWeekends
    });
  });
}
  }
</script>

1. Klikkaa Tallenna.

Koodinpätkän sisällyttäminen ostoskorisivuusi

Näin voit sisällyttää toimituspäivän koodinpätkän ostoskorisivullesi:

1. klikkaa Sections-hakemistossa main-cart-items.liquid.

2. Etsi tämän elementin lopputunniste </form>. Liitä seuraava koodi uudelle riville lopputunnisteen </form> yläpuolelle:

{% render 'delivery-date' %}

1. 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.