Ajaxified sections

Liquid Ajax Cart reloads HTML code of the HTML containers that marked with the data-ajax-cart-section attribute every time when the Shopify cart is changed.

It uses Bundled section rendering under the hood to ask Shopify to provide re-rendered HTML code for theme sections with each Cart API request response. Due to this, the data-ajax-cart-section must be applied only within sections.

After Liquid Ajax Cart received a response of a Shopify Cart API request with the re-rendered sections’ HTML, it replaces HTML of the data-ajax-cart-section containers within the section with the new ones.

Immutable elements

If you want to have an immutable HTML element within a data-ajax-cart-section container — add the data-ajax-cart-static-element attribute to this element. HTML of the immutable element will not be replaced when its section gets updated.

Scrollable area

If you have a scrollable area within a data-ajax-cart-section container, the scroll position will be reset to top every time when the cart is changed because the section’s HTML will be completely replaced with a new one. To keep the scroll position the same add the data-ajax-cart-section-scroll attribute to the scrollable area.

JavaScript callback

If you want to run your JavaScript code after the HTML code of the data-ajax-cart-section sections are reloaded — use the subscribeToCartSectionsUpdate function.

Example

Since the cart sections are plain Shopify liquid theme sections, you are free to use any Liquid tags, objects and filters.

<!-- sections/my-cart.liquid -->

<form action="{{ routes.cart_url }}" method="post" class="my-cart">
  <!-- data-ajax-cart-section makes the element's HTML update
  when the cart gets changed -->
  <div data-ajax-cart-section>
    <h2>Cart</h2>
    
    <!-- data-ajax-cart-section-scroll keeps the scroll position unchanged
    when the element's HTML is changed -->
    <div class="my-cart__items" data-ajax-cart-section-scroll>
      {% for item in cart.items %}
        {% assign item_index = forloop.index %}
        <hr />  
        <div><a href="{{ item.url }}">{{ item.title }}</a></div>

        {% for property in item.properties %}
          <div>
            {{ property.first }}:
            {% if property.first == 'Engraving' %}
              <!-- data-ajax-cart-property-input ajaxifies the line item property input -->
              <input type="text"
                value="{{ property.last }}" 
                data-ajax-cart-property-input="{{ item_index }}[{{ property.first }}]"/>
              {% else %}
                {{ property.last }}
              {% endif %}
          </div>
        {% endfor %}

        <div>Price: {{ item.final_price | money }}</div>

        <div>
          Quantity:
          <!-- data-ajax-cart-request-button ajaxifies the "Minus one" button -->
          <a data-ajax-cart-request-button
            href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" > 
            Minus one 
          </a>

          <!-- data-ajax-cart-quantity-input ajaxifies the line item quantity input -->
          <input data-ajax-cart-quantity-input="{{ item_index }}"
            name="updates[]" 
            value="{{ item.quantity }}" 
            type="number" />

          <!-- data-ajax-cart-request-button ajaxifies the "Plus one" button -->
          <a data-ajax-cart-request-button 
            href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | plus: 1 }}"> 
            Plus one 
          </a>
        </div>

        <!-- Container for errors -->
        <div data-ajax-cart-messages="{{ item.key }}"></div>

        <div>Total: <strong>{{ item.final_line_price | money }}</strong></div>
      {% endfor %}
    </div>

    <!-- data-ajax-cart-property-input ajaxifies the cart note textarea -->
    <textarea data-ajax-cart-property-input
      name="note" 
      placeholder="Cart note">
      {{ cart.note }}
    </textarea>
    
    <!-- data-ajax-cart-static-element keeps the container unchanged
    when the cart and the surrounding HTML get updated -->
    <div data-ajax-cart-static-element class="my-cart__app-container"></div>

    <button type="submit" name="checkout">
      Checkout — {{ cart.total_price | money_with_currency }}
    </button> 
  </div>
</form>

{% schema %} { "name": "My Cart" } {% endschema %}

Reference