Nedávno Shopify vydalo úžasné Sections API a Bundled Section Rendering, zejména pro požadavky Cart Ajax API.
To znamená, že můžeme aktualizovat stav košíku a požádat Shopify o opětovné vykreslení HTML kódu pro konkrétní sekce v rámci jediného volání Cart Ajax API:
let sectionsToUpdate = 'ajax-cart';
let requestBody = {
'items': [{
'id': 36110175633573,
'quantity': 2
}],
'sections': sectionsToUpdate
};
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestBody)
}).then(response => {
return response.json();
}).then(data => {
console.log(data.sections); // prints HTML of the section
}).catch((error) => {
console.error('Error:', error);
});
Výše uvedený kód odešle požadavek „Přidat do košíku“ spolu s section
tak Shopify odpoví HTML nové sekce, která je vytištěna console.log
.
Knihovna Liquid Ajax Cart Javascript používá tuto metodu k aktualizaci sekcí souvisejících s košíkem a ušetří vám starosti s psaním opakovaného JS kódu pro každý projekt.
Tématická sekce pro vozík Ajax
Vytvořte novou tematickou sekci, která bude vaším Ajaxovým košíkem. Existuje pouze jeden požadavek:kořenový kontejner musí mít data-ajax-cart-section
atribut, takže Liquid Ajax Cart bude schopen identifikovat sekci.
{% comment %} sections/my-cart.liquid {% endcomment %}
<div data-ajax-cart-section>
<h2>My cart</h2>
<div>
{% for item in cart.items %}
<div><a href="{{ item.url }}">{{ item.title }}</a></div>
<div>Price: {{ item.final_price | money }} </div>
<div>
Quantity:
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | minus: 1 }}"> Minus one
</a>
<span>{{ item.quantity }}</span>
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | plus: 1 }}"> Plus one
</a>
</div>
<div> Total: <strong>{{ item.final_line_price | money }}</strong> </div>
<hr />
{% endfor %}
</div>
</div>
{% schema %} { "name": "My Cart" } {% endschema %}
Zahrňte sekci někam do layout/theme.liquid
soubor, takže se zobrazí na každé stránce:
{% section 'my-cart' %}
V této fázi máme sekci statického tématu pro košík.
Tlačítka Minus one
a Plus one
funguje, ale při opětovném načítání stránky.
Ajaxifing
Nahrajte soubor liquid-ajax-cart.js
do assets
složku vašeho obchodu a zahrňte ji do layout/theme.liquid
soubor:
<!-- It is for receiving the initial state -->
<script type="application/json" data-ajax-cart-initial-state >
{{ cart | json }}
</script>
<script type="module">
import '{{ "liquid-ajax-cart.js" | asset_url }}';
</script>
A... to je ono!
Liquid Ajax Cart bude ajaxify všechny formy produktu, routes.cart_change_url
tlačítka a aktualizuje kód HTML sekce košíku pokaždé, když uživatel odešle formulář produktu nebo klikne na Plus one
, Minus one
odkazy.
Сzávěr
Pro rychlý start a pochopení toho, jak to funguje, stačí pouhé dva kroky. Všechny funkce jsou popsány na webové stránce s dokumentací.
Neváhejte a ptejte se.