Pomoc
Zaloguj

Dodaj selektor daty dostawy do koszyka

Możesz umieścić na stronie koszyka kalendarz, który pozwoli klientom określić datę dostawy zamówienia.

Selektor daty dostawy

Na tej stronie

Dołącz jQuery do pliku theme.liquid

Aby to dostosowanie działało, niektóre szablony wymagają dodania tagu skryptu dla jQuery do pliku układu theme.liquid. Jeśli używasz darmowego szablonu Shopify, może być konieczne wykonanie następnego kroku:

  1. W katalogu Layout kliknij plik theme.liquid.

  2. Znajdź zamykający tag </head> w kodzie. W nowym wierszu nad zamykającym tagiem </head> wklej następujący kod:

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

Utwórz fragment dla daty dostawy

Aby utworzyć fragment dla selektora daty dostawy:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk …, aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. W katalogu Snippets kliknij opcję Dodaj nowy fragment:

  4. Utwórz fragment:

  5. Nazwij fragment delivery-date.

  6. Kliknij opcję Utwórz fragment. Nowy plik fragmentu otworzy się w edytorze kodu.

  7. W nowym fragmencie delivery-date.liquid wklej następujący kod:

{{ '//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. Kliknij Zapisz.
Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

  2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.

  3. Naciśnij opcję Zarządzaj szablonami.

  4. Znajdź szablon, który chcesz edytować, naciśnij przycisk …, aby otworzyć menu czynności, a następnie naciśnij opcję Edytuj kod.

  5. W katalogu Snippets naciśnij opcję Dodaj nowy fragment:

  6. Utwórz fragment:

  7. Nazwij fragment delivery-date.

  8. Naciśnij opcję Utwórz fragment. Nowy plik fragmentu otworzy się w edytorze kodu.

  9. W nowym fragmencie delivery-date.liquid wklej następujący kod:

{{ '//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. Naciśnij Zapisz.

Dołącz fragment do strony koszyka

Aby dołączyć fragment daty dostawy do strony koszyka:

  1. W katalogu Sections kliknij plik main-cart-items.liquid.

  2. Znajdź zamykający tag </form> w kodzie. W nowym wierszu nad zamykającym tagiem </form> wklej następujący kod:

{% render 'delivery-date' %}
  1. Kliknij Zapisz.

Teraz na stronie koszyka masz pole wprowadzania daty dostawy. Po kliknięciu w polu tekstowym pojawi się kalendarz:

Selektor daty dostawy

Selektor dat użyty w tym dostosowaniu jest widżetem z biblioteki jQuery UI.