Dodaj selektor daty dostawy do koszyka
Na stronie koszyka możesz dodać kalendarz, który umożliwia klientom określenie daty dostawy dla ich zamówienia.
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:
W katalogu Układ kliknij
theme.liquid
.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 }}
- Kliknij opcję Zapisz.
Utwórz fragment kodu daty dostawy
Aby utworzyć fragment kodu dla selektora daty dostawy:
Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
W aplikacji Shopify naciśnij Sklep.
W sekcji Kanały sprzedaży naciśnij Sklep online.
Naciśnij opcję Zarządzaj szablonami.
Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
W aplikacji Shopify naciśnij Sklep.
W sekcji Kanały sprzedaży naciśnij Sklep online.
Naciśnij opcję Zarządzaj szablonami.
Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu:
Utwórz fragment kodu:
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>
- Kliknij opcję Zapisz.
Dodaj fragment kodu do strony koszyka
Aby dodać fragment kodu daty dostawy do strony koszyka:
W katalogu Sekcje kliknij
cart-template.liquid
. Jeśli dla Twojego szablonu nie istnieje ten plik, kliknijcart.liquid
w katalogu Szablony.Znajdź tag zamykający
</form>
w kodzie. W nowej linii nad tagiem zamykającym</form>
wklej następujący kod:
{% render 'delivery-date' %}
- 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.