Friday 28 August 2020

Add to cart Functionality on collection for the Blockshop shopify theme

 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

Infinite scroll on collection page in Shopify

 Hello, Collection page structure is as followed {% paginate collection.products by 48 %} <div class="collection-content"> ...