Lisää toimituspäivän valitsin ostoskoriisi

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

Tällä sivulla

Lisää jQuery tiedostoon theme.liquid

Jotta tämä mukautus toimisi, joissakin teemoissa on lisättävä jQueryn komentosarjan tunniste theme.liquid-pohjatiedostoon. Jos käytät Shopifyn ilmaista teemaa, sinun on ehkä noudatettava seuraavaa vaihetta:

Klikkaa Layout-hakemistossa tiedostoa theme.liquid.
Etsi koodista sulkeva </head>-tunniste. Liitä seuraava koodi uudelle riville sulkevan </head>-tunnisteen yläpuolelle:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

Klikkaa Tallenna.

Luo toimituspäivän koodinpätkä

Voit luoda koodinpätkän toimituspäivän valitsimelle seuraavasti:

Tietokone

Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, klikkaa …-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.
Klikkaa Snippets-hakemistossa Lisää uusi koodinpätkä:
Luo koodinpätkä:
Anna koodinpätkän nimeksi delivery-date.
Klikkaa Luo koodinpätkä. Uusi koodinpätkätiedosto avautuu koodieditorissa.
Liitä seuraava koodi uuteen delivery-date.liquid-koodinpätkääsi:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

Klikkaa Tallenna.

Mobiili

Napauta Shopify app -sovelluksessa -kuvaketta.
Napauta Myyntikanavat-osiossa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, napauta …-painiketta avataksesi toimintovalikon ja napauta sitten Muokkaa koodia.
Napauta Snippets-hakemistossa Lisää uusi koodinpätkä:
Luo koodinpätkä:
Anna koodinpätkän nimeksi delivery-date.
Napauta Luo koodinpätkä. Uusi koodinpätkätiedosto avautuu koodieditorissa.
Liitä seuraava koodi uuteen delivery-date.liquid-koodinpätkääsi:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

Napauta Tallenna.

Lisää koodinpätkä ostoskorisivullesi

Voit lisätä toimituspäivän koodinpätkän ostoskorisivullesi seuraavasti:

Klikkaa Sections-hakemistossa tiedostoa main-cart-items.liquid.
Etsi koodista sulkeva </form>-tunniste. Liitä seuraava koodi uudelle riville sulkevan </form>-tunnisteen yläpuolelle:

{% render 'delivery-date' %}

Klikkaa Tallenna.

Ostoskorisivullasi on nyt toimituspäivän syöttökenttä. Kun klikkaat tekstikenttää, näyttöön tulee kalenteri:

Tässä mukautuksessa käytetty päivämääränvalitsin on jQuery UI -kirjaston pienohjelma.