Pomocník
Prihlásiť sa

Pridanie výberu dátumu doručenia do košíka

Na stránku košíka môžete pridať kalendár, ktorý zákazníkom umožní určiť dátum doručenia objednávky.

Výber dátumu doručenia

Na tejto stránke

Zahrnutie jQuery do súboru theme.liquid

Aby toto prispôsobenie fungovalo, niektoré témy vyžadujú pridanie tagu skriptu pre jQuery do súboru rozloženia theme.liquid. Ak používate bezplatnú tému Shopify, možno budete musieť vykonať nasledujúci krok:

  1. V adresári Rozloženie kliknite na theme.liquid.

  2. V kóde nájdite koncový tag </head>. Na nový riadok nad koncovým tagom </head> vložte nasledujúci kód:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Kliknite na Uložiť.

Vytvorenie úryvku pre dátum doručenia

Ak chcete vytvoriť úryvok pre výber dátumu doručenia:

Počítač

  1. V administrátorovi Shopify prejdite na Internetový obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo … otvorte ponuku akcií a potom kliknite na Upraviť kód.

  3. V adresári Úryvky kliknite na Pridať nový úryvok:

  4. Vytvorte úryvok:

  5. Pomenujte úryvok delivery-date.

  6. Kliknite na Vytvoriť úryvok. Súbor nového úryvku sa otvorí v editore kódu.

  7. Do nového úryvku delivery-date.liquid vložte nasledujúci 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>
  1. Kliknite na Uložiť.
Mobil

  1. V aplikácii Shopify ťuknite na ikonu Menu.

  2. V sekcii Predajné kanály ťuknite na Internetový obchod.

  3. Ťuknite na Spravovať témy.

  4. Nájdite tému, ktorú chcete upraviť, ťuknutím na tlačidlo … otvorte ponuku akcií a potom ťuknite na Upraviť kód.

  5. V adresári Úryvky ťuknite na Pridať nový úryvok:

  6. Vytvorte úryvok:

  7. Pomenujte úryvok delivery-date.

  8. Ťuknite na Vytvoriť úryvok. Súbor nového úryvku sa otvorí v editore kódu.

  9. Do nového úryvku delivery-date.liquid vložte nasledujúci 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>
  1. Ťuknite na Uložiť.

Zahrnutie úryvku na stránku košíka

Ak chcete na stránku košíka zahrnúť úryvok pre dátum doručenia:

  1. V adresári Sekcie kliknite na main-cart-items.liquid.

  2. V kóde nájdite koncový tag </form>. Na nový riadok nad koncovým tagom </form> vložte nasledujúci kód:

{% render 'delivery-date' %}
  1. Kliknite na Uložiť.

Na stránke košíka teraz máte pole na zadanie dátumu doručenia. Keď kliknete do textového poľa, zobrazí sa kalendár:

Výber dátumu doručenia

Výber dátumu použitý v tomto prispôsobení je widget z knižnice jQuery UI.