Dodaj selektor daty dostawy do koszyka

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu z Shopify, możesz kontaktować się z pomocą techniczną Shopify i uzyskać pomoc w związku z tym tutorialem. Czas projektowania wynosi 15 minut. Dowiedz się więcej o Polityce Shopify w zakresie projektowania.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

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, niektóre szablony wymagają dodania tagu skryptu dla jQuery do pliku układu theme.liquid. Jeśli używasz szablonu Boundless, Debut w wersji 17.2.0 lub nowszej, Express, Narrative lub Venture, 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

Pulpit

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 week-end.</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.

iPhone

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 week-end.</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.

Android

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 week-end.</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 cart-template.liquid. Jeśli dla Twojego szablonu nie istnieje ten plik, kliknij cart.liquid w katalogu Szablony.

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 dostosowaniu jest widżetem z biblioteki IU jQuery. Ten post na blogu wyjaśnia, jak wyłączyć określone daty w kalendarzu selektora daty.