Go to partial--product.liquid , copy paste following code at the bottom where you want to show "Add To Cart" button
----------------------------------------------------------------------------------------------
{% if product.available == false %}
<form class="quick-add-to-cart-form" style="margin-top: 0.5rem;" method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
<input style="display: none;" min="1" type="number" id="quantity" name="quantity" value="1"/>
<input style="cursor: not-allowed; pointer-events: none;" type="submit" value="Sold out" class="btn" />
</form>
{% else %}
<form class="quick-add-to-cart-form" style="margin-top: 0.5rem;" method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
<input style="display: none;" min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn quick-add-to-cart" quick-add-to-cart />
</form>
{% endif %}
----------------------------------------------------------------------------------------------
Open theme.js, Copy / paste following code at the bottom of the file
Make sure you have added same JS file in theme.liquid
----------------------------------------------------------------------------------------------
$(document).ready(function() {
$('.quick-add-to-cart').on('click',function(e){
e.preventDefault();
var quickForm = $(this).parents('form');
theme.partials.Cart.addItem(quickForm, function(success, error) {
if (success) {
return theme.partials.Cart.updateAllHtml(function() {
addProductComplete ();
});
function addProductComplete (){
return $('[data-off-canvas--open="right-sidebar"]').first().trigger('click');
};
} else {
console.log('in ELSE, product not added to cart');
return false;
}
});
});
});
No comments:
Post a Comment