Pomoč
Prijava

Dodajanje izbirnika datuma dostave v košarico

Na stran košarice lahko vključite koledar, ki strankam omogoča, da določijo datum dostave za svoje naročilo.

Izbirnik datuma dostave

Na tej strani

Vključite jQuery v datoteko theme.liquid

Da bi to prilagajanje delovalo, nekatere teme zahtevajo, da se oznaka skripta za jQuery doda v datoteko postavitve theme.liquid. Če uporabljate brezplačno temo Shopify, boste morda morali upoštevati naslednji korak:

  1. V imeniku Layout kliknite theme.liquid.

  2. V kodi poiščite zaključno oznako </head>. V novo vrstico nad zaključno oznako </head> prilepite naslednjo kodo:

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

Ustvarjanje delčka za datum dostave

Za ustvarjanje delčka za izbirnik datuma dostave:

Namizni računalnik

  1. V skrbniku Shopify pojdite na Spletna trgovina > Teme.

  2. Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.

  3. V imeniku Snippets kliknite Dodaj nov delček:

  4. Ustvarite delček:

  5. Delček poimenujte delivery-date.

  6. Kliknite Ustvari delček. Nova datoteka z delčkom se bo odprla v urejevalniku kode.

  7. V nov delček delivery-date.liquid prilepite naslednjo kodo:

{{ '//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>
  1. Kliknite Shrani.
Mobilna naprava

  1. V aplikaciji Shopify se dotaknite ikone Meni.

  2. V razdelku Prodajni kanali se dotaknite možnosti Spletna trgovina.

  3. Dotaknite se možnosti Upravljanje tem.

  4. Poiščite temo, ki jo želite urediti, dotaknite se gumba …, da odprete meni dejanj, in se nato dotaknite možnosti Uredi kodo.

  5. V imeniku Snippets se dotaknite možnosti Dodaj nov delček:

  6. Ustvarite delček:

  7. Delček poimenujte delivery-date.

  8. Dotaknite se možnosti Ustvari delček. Nova datoteka z delčkom se bo odprla v urejevalniku kode.

  9. V nov delček delivery-date.liquid prilepite naslednjo kodo:

{{ '//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>
  1. Dotaknite se možnosti Shrani.

Vključitev delčka na stran košarice

Za vključitev delčka za datum dostave na stran košarice:

  1. V imeniku Sections kliknite main-cart-items.liquid.

  2. V kodi poiščite zaključno oznako </form>. V novo vrstico nad zaključno oznako </form> prilepite naslednjo kodo:

{% render 'delivery-date' %}
  1. Kliknite Shrani.

Na strani košarice imate zdaj vnosno polje za datum dostave. Ko kliknete znotraj besedilnega polja, se prikaže koledar:

Izbirnik datuma dostave

Izbirnik datuma, uporabljen pri tem prilagajanju, je pripomoček iz knjižnice jQuery UI.