Dodaj selektor daty dostawy do koszyka

Uwaga

Jeśli używasz darmowego szablonu Shopify, możesz skontaktować się z pomocą techniczną Shopify, aby uzyskać pomoc w zakresie tego tutoriala. Wymaga to 15 minut czasu projektowania. Aby dowiedzieć się więcej, zapoznaj się z tematem Pomoc techniczna w zakresie szablonów.

Uwaga

To dostosowanie jest przeznaczone dla szablonów Online Store 2.0 i nie ma zastosowania do klasycznych szablonów Shopify. Dowiedz się, jaka jest wersja architektury Twojego szablonu.

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

Uwaga

To dostosowanie nie będzie działało w przypadku koszyków w stylu szuflady lub wyskakującego okienka, a jedynie dla strony koszyka (adres URL: your-store.com/cart). Jeśli używasz koszyka w stylu szuflady lub wyskakującego okienka, musisz zmienić styl koszyka na Stronę w edytorze szablonów. Dodaj produkt do koszyka w podglądzie szablonu, a następnie kliknij kartę Strona koszyka w edytorze szablonów, aby wyświetlić ustawienia swojego koszyka.

Dodaj jQuery do pliku theme.liquid

Aby to dostosowanie działało, w przypadku niektórych szablonów należy dodać tag 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:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

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

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

4. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

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

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

4. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu:

2. Utwórz fragment kodu:

3. 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 używany w tym dostosowywaniu jest widżetem z biblioteki IU jQuery.