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, 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:
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 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>
- Kliknij opcję Zapisz.
Dodaj fragment kodu do strony koszyka
Aby dodać fragment kodu daty dostawy do strony koszyka:
W katalogu Sekcje kliknij
main-cart-items.liquid
.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 dostosowywaniu jest widżetem z biblioteki IU jQuery.