Last active
August 29, 2015 14:20
-
-
Save gterrill/07222da9c9d3252b3184 to your computer and use it in GitHub Desktop.
Timber theme modified cart template to work with BTA
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- /snippets/ajax-cart-template.liquid --> | |
{% comment %} | |
This snippet provides the default handlebars.js templates for | |
the ajax 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 class="cart ajaxcart"> | |
<div class="ajaxcart__inner{% endraw %}{% unless additional_checkout_buttons %} ajaxcart__inner--has-fixed-footer{% endunless %}{% raw %}"> | |
{{#items}} | |
<div class="ajaxcart__product"> | |
<div class="ajaxcart__row" data-id="{{id}}"> | |
<div class="grid"> | |
<div class="grid__item one-quarter"> | |
<a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a> | |
</div> | |
<div class="grid__item three-quarters"> | |
<div class="ajaxcart__product-name--wrapper"> | |
<a href="{{url}}" class="ajaxcart__product-name">{{name}}</a> | |
{{#if variation}} | |
<span class="ajaxcart__product-meta">{{variation}}</span> | |
{{/if}} | |
{{#properties}} | |
<span class="ajaxcart__product-meta">{{name}} {{value}}</span> | |
{{/properties}} | |
</div> | |
<div class="grid--full display-table"> | |
<div class="grid__item display-table-cell one-half"> | |
<div class="ajaxcart__qty"> | |
{{#if bta}} | |
{{itemQty}} | |
<input type="hidden" name="updates[]" value="{{itemQty}}" data-id="{{id}}"> | |
<button type="button" class="icon-fallback-text drawer__close-button ajaxcart__qty-remove" data-id="{{id}}"> | |
<span class="icon icon-x" aria-hidden="true"></span> | |
<span class="fallback-text">Remove Item</span> | |
</button> | |
{{else}} | |
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}"> | |
<span class="icon icon-minus" aria-hidden="true"></span> | |
<span class="fallback-text">−</span> | |
</button> | |
<input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*"> | |
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}"> | |
<span class="icon icon-plus" aria-hidden="true"></span> | |
<span class="fallback-text">+</span> | |
</button> | |
{{/if}} | |
</div> | |
</div> | |
<div class="grid__item display-table-cell one-half text-right"> | |
<span class="ajaxcart__price"> | |
{{{price}}} | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
{{/items}} | |
{% endraw %}{% if settings.cart_notes_enable %}{% raw %} | |
<div> | |
<label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label> | |
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{note}}</textarea> | |
</div> | |
{% endraw %}{% endif %}{% raw %} | |
</div> | |
<div class="ajaxcart__footer{% endraw %}{% unless additional_checkout_buttons %} ajaxcart__footer--fixed{% endunless %}{% raw %}"> | |
<div class="grid--full"> | |
<div class="grid__item two-thirds"> | |
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p> | |
</div> | |
<div class="grid__item one-third text-right"> | |
<p class="ajaxcart__subtotal">{{{totalPrice}}}</p> | |
</div> | |
</div> | |
<p class="text-center ajaxcart__note">{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}</p> | |
<button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout"> | |
{% endraw %}{{ 'cart.general.checkout' | t }}{% raw %} → | |
</button> | |
{% endraw %}{% if additional_checkout_buttons %} | |
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div> | |
{% endif %}{% raw %} | |
</div> | |
</form> | |
{% endraw %} | |
</script> | |
<script id="AjaxQty" type="text/template"> | |
{% raw %} | |
<div class="ajaxcart__qty"> | |
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}"> | |
<span class="icon icon-minus" aria-hidden="true"></span> | |
<span class="fallback-text">−</span> | |
</button> | |
<input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*"> | |
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}"> | |
<span class="icon icon-plus" aria-hidden="true"></span> | |
<span class="fallback-text">+</span> | |
</button> | |
</div> | |
{% endraw %} | |
</script> | |
<script id="JsQty" type="text/template"> | |
{% raw %} | |
<div class="js-qty"> | |
<button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}"> | |
<span class="icon icon-minus" aria-hidden="true"></span> | |
<span class="fallback-text">−</span> | |
</button> | |
<input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}"> | |
<button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}"> | |
<span class="icon icon-plus" aria-hidden="true"></span> | |
<span class="fallback-text">+</span> | |
</button> | |
</div> | |
{% endraw %} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment