Dodaj selektor daty dostawy do koszyka

Ta strona została wydrukowana dnia Dec 11, 2023. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-store/themes/customizing-themes/add-date-picker.

Na stronie koszyka możesz dodać kalendarz, który umożliwia klientom określenie daty dostawy dla ich zamówienia.

Selektor daty dostawy

Na tej stronie

Dodaj 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 korzystasz z darmowego szablonu Shopify Online Store 2.0, może być konieczne wykonanie kolejnego kroku:

  1. W katalogu Układ kliknij theme.liquid.

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

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

Utwórz fragment kodu daty dostawy

Aby utworzyć fragment kodu dla selektora daty dostawy:

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
  3. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu:

  4. Utwórz fragment kodu:

    1. Nadaj nazwę fragmentowi kodu delivery-date:
    2. Kliknij opcję Utwórz fragment kodu. Nowy plik fragmentu kodu otworzy się w edytorze kodu.

  5. W nowym fragmencie kodu 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Kliknij opcję Zapisz.
  1. W aplikacji Shopify naciśnij przycisk ….
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij Zarządzaj szablonami.
  4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
  5. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu:

  6. Utwórz fragment kodu:

    1. Nadaj nazwę fragmentowi kodu delivery-date:
    2. Kliknij opcję Utwórz fragment kodu. Nowy plik fragmentu kodu otworzy się w edytorze kodu.

  7. W nowym fragmencie kodu 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Kliknij opcję Zapisz.
  1. W aplikacji Shopify naciśnij przycisk ….
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij Zarządzaj szablonami.
  4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
  5. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu:

  6. Utwórz fragment kodu:

    1. Nadaj nazwę fragmentowi kodu delivery-date:
    2. Kliknij opcję Utwórz fragment kodu. Nowy plik fragmentu kodu otworzy się w edytorze kodu.

  7. W nowym fragmencie kodu 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Kliknij opcję Zapisz.

Dodaj fragment kodu do strony koszyka

Aby dodać fragment kodu daty dostawy do strony koszyka:

  1. W katalogu Sekcje kliknij main-cart-items.liquid.

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

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

Strona koszyka zawiera teraz pole wprowadzania daty dostawy. Po kliknięciu w polu tekstowym pojawi się kalendarz:

Selektor daty dostawy

Selektor daty używany w tym dostosowywaniu jest widżetem z biblioteki IU jQuery.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo