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 Boundless-teemaa, Debut-teeman versiota 17.2.0 tai tätä uudempaa versiota, Express-teemaa, Narrative-teema tai Venture-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

Tietokone

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ä:
1. Nimeä koodinpätkäsi delivery-date.
2. 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 week-end.</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.

iPhone

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ä:
1. Nimeä koodinpätkäsi delivery-date.
2. 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 week-end.</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.

Android

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ä:
1. Nimeä koodinpätkäsi delivery-date.
2. 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 week-end.</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 Osat-hakemistossa kohtaa cart-template.liquid. Jos teemassasi ei ole tätä tiedostoa, valitse silloin Mallit-hakemistosta cart.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äytettävä päivämäärävalitsin on jQuery UI ‑kirjaston pienoisohjelma. Tässä blogipostauksessa selitetään, miten päivämäärävalitsimessa voi poistaa tiettyjä päivämääriä käytöstä.