liquid-ajax-cart.js — Ajax vozíky pro Shopify

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.