Dodavanje alata za odabir datuma dostave u košaricu

Na stranici košarice možete uključiti kalendar koji korisnicima omogućuje odabir datuma dostave za svoju narudžbu.

Na ovoj stranici

Uključivanje alata jQuery u datoteku theme.liquid

Kako bi ova prilagodba funkcionirala, neke teme zahtijevaju dodavanje oznake skripte za jQuery u datoteku izgleda theme.liquid. Ako upotrebljavate besplatnu temu platforme Shopify, možda ćete morati slijediti sljedeći korak:

U direktoriju Izgled kliknite na theme.liquid.
Pronađite završnu oznaku </head> u kodu. U novom retku iznad završne oznake </head> zalijepite sljedeći kôd:

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

Kliknite na Spremi.

Izrada isječka za datum dostave

Za izradu isječka za alat za odabir datuma dostave:

Stolno računalo

U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.
Pronađite temu koju želite urediti, kliknite na gumb … da biste otvorili izbornik s radnjama, a zatim kliknite na Uredi kôd.
U direktoriju Isječci kliknite na Dodaj novi isječak:
Izradite isječak:
Svoj isječak nazovite delivery-date.
Kliknite na Izradi isječak. Datoteka novog isječka otvorit će se u alatu za uređivanje koda.
U svoj novi isječak delivery-date.liquid zalijepite sljedeći kôd:

{{ '//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>

Kliknite na Spremi.

Mobilni uređaj

U aplikaciji Shopify dodirnite ikonu .
U odjeljku Prodajni kanali dodirnite Internetska trgovina.
Dodirnite Upravljanje temama.
Pronađite temu koju želite urediti, dodirnite gumb … da biste otvorili izbornik s radnjama, a zatim dodirnite Uredi kôd.
U direktoriju Isječci dodirnite Dodaj novi isječak:
Izradite isječak:
Svoj isječak nazovite delivery-date.
Dodirnite Izradi isječak. Datoteka novog isječka otvorit će se u alatu za uređivanje koda.
U svoj novi isječak delivery-date.liquid zalijepite sljedeći kôd:

{{ '//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>

Dodirnite Spremi.

Uključivanje isječka na stranicu košarice

Kako biste uključili isječak datuma dostave na stranicu košarice:

U direktoriju Odjeljci kliknite na main-cart-items.liquid.
Pronađite završnu oznaku </form> u kodu. U novom retku iznad završne oznake </form> zalijepite sljedeći kôd:

{% render 'delivery-date' %}

Kliknite na Spremi.

Sada na svojoj stranici košarice imate polje za unos datuma dostave. Kada kliknete unutar tekstnog polja, pojavit će se kalendar:

Alat za odabir datuma koji se koristi u ovoj prilagodbi grafički je element iz biblioteke korisničkog sučelja jQuery.