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.

  2. Poiščite temo, ki jo želite urediti, kliknite gumb Vodoravni meni, da odprete meni z dejanji, 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 Upravljaj vse teme.

  4. Poiščite temo, ki jo želite urediti, se dotaknite gumba Vodoravni meni, da odprete meni z dejanji, in nato izberite 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.