ajax-cart-template.liquid

{% comment %}

  This snippet provides the default handlebars.js templates for
  the ajaxify cart plugin. Use the raw liquid tags to keep the
  handlebar.js template tags as available hooks.

{% endcomment %}
  <script id="cartTemplate" type="text/template">
  {% raw %}
    <form action="/cart" method="post" novalidate>
      <button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>
      <div class="ajaxifyCart--products">
        {{#items}}
        <div class="ajaxifyCart--product">
          <div class="ajaxifyCart--row" data-id="{{id}}">
            <div class="ajaxifyCart--media">
              <a href="{{url}}"> <img src="{{img}}" width="60" alt=""></a>
            </div>
            <div class="ajaxifyCart--col1">
              <p><a href="{{url}}">{{name}}</a></p>
              <p><small>{{variation}}</small></p>
            </div>
            <div class="ajaxifyCart--col2">
              <div class="ajaxifyCart--qty">
                <input type="text" class="ajaxifyCart--num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
                <span class="ajaxifyCart--qty-adjuster ajaxifyCart--add" data-id="{{id}}" data-qty="{{itemAdd}}">+</span>
                <span class="ajaxifyCart--qty-adjuster ajaxifyCart--minus" data-id="{{id}}" data-qty="{{itemMinus}}">-</span>
              </div>
            </div>
            <div class="ajaxifyCart--col3">
              <p>{{price}}</p>
            </div>
            <div class="ajaxifyCart--col4">
              <p><a href="/cart/change?id={{id}}&amp;quantity=0" class="ajaxifyCart--remove" data-id="{{id}}">Remove from cart</a></p>
            </div>
          </div>
        </div>
        {{/items}}
      </div>
      <div class="ajaxifyCart--row ajaxifyCart--summary">
        <div class="ajaxifyCart--total">
          <p>Subtotal</p>
        </div>
        <div class="ajaxifyCart--col3">
          <p>{{totalPrice}}</p>
        </div>
        <div class="ajaxifyCart--col4">
          <input type="submit" class="{{btnClass}}" name="checkout" value="Checkout">
        </div>
      </div>
    </form>
  {% endraw %}
  </script>
  <script id="drawerTemplate" type="text/template">
  {% raw %}
    <div id="ajaxifyDrawer">
      <div id="ajaxifyCart" class="ajaxifyCart--content {{wrapperClass}}"></div>
    </div>
    <div class="ajaxifyDrawer-caret"><span></span></div>
  {% endraw %}
  </script>
  <script id="modalTemplate" type="text/template">
  {% raw %}
    <div id="ajaxifyModal">
      <div id="ajaxifyCart" class="ajaxifyCart--content"></div>
    </div>
  {% endraw %}
  </script>
  <script id="ajaxifyQty" type="text/template">
  {% raw %}
    <div class="ajaxifyCart--qty">
      <input type="text" class="ajaxifyCart--num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
      <span class="ajaxifyCart--qty-adjuster ajaxifyCart--add" data-id="{{id}}" data-qty="{{itemAdd}}">+</span>
      <span class="ajaxifyCart--qty-adjuster ajaxifyCart--minus" data-id="{{id}}" data-qty="{{itemMinus}}">-</span>
    </div>
  {% endraw %}
  </script>