Shopify Impulse Theme v4.1.4 Add to Cart Drawer on Collection Pages

[atielking]

Hello! I am trying to add a version of the "add to cart" button to products on my collection page. 

Right now, I have:

- A button under each product that says "Add a sample"

- When I click that button:

    - the number of items in the cart, in the top right, is correctly updated. 

    - I stay on the collection page instead of getting redirected to the cart or checkout page, as desired.

What I would like to add:

- I want to trigger the cart drawer to open, like how it works when you add a product to the cart from a product page.

    - I tried following this video to trigger the drawer to open, but the video corresponds to an older version of the Impulse theme.

Here is the code that I have added so far,  in `product-grid-item.liquid`.

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ sample_id}}" />
<input type="hidden" name="return_to" value="back" />
<input type="hidden" min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add a sample" class="btn" />
</form>

Here is what my custom add to cart button looks like currently (in our store's case, we only want to add a sample). The button looks good as I have it now, I don't want to show the quantity or other options. I just need to trigger the cart drawer to open when I click this button.

cc: @zimblot 

[SheetalZadfiya · Accepted solution]

Hi @atielking 

1) Go to product-grid-item.liquid and replace the given code.

{%- assign current_variant = product.selected_or_first_available_variant -%}
<button type="button" {% unless current_variant.available %}disabled="disabled"{% endunless %} onclick="add_to_cart_grid({{current_variant.id}},1)" class="btn btn--full">
  {% if current_variant.available %}
    {{ 'products.product.add_to_cart' | t }}
  {% else %}
    {{ 'products.product.sold_out' | t }}
  {% endif %}
</button>

2) Add below script in the last.

<script>
  function add_to_cart_grid(variantid,qty){
    var id = variantid;
    var q = qty;
    var ajax = {
        type: "POST",
        url: "/cart/add.js",
        data: "quantity=" + q + "&id=" + id,
        dataType: "json",
        success: function (n) {
          var cart = new theme.CartDrawer
          cart.init()
          cart.open();
        },
        error: function (n, c) {
           console.log('fail');
        }
     };
    jQuery.ajax(ajax)
  }
</script>

I hope it's work for you.

[atielking]

IT WORKS!!!!!!!!!! THANK YOU!!!

[olifarhaan]

Can you please tell me how to disable the add to cart button after the product is been added to the cart.. Please its a request.

[Amanagg]

Hello, When im clicking on add to cart, it doesn't add to cart but the button is showing there

[Amanagg]

https://bf374c-3.myshopify.com/collections/allcra

[Amanagg]

pls help

[michaeldoxsey]

Just a quick FYI, the <SCRIPT> should not be in product-grid-item, because then it will be present repeatedly down the page for every product and loop, which is incorrect.  The script should only be present once on the collections page - we put it in collection-grid, outside the "for" loop.

[dazzlebysarah]

@SheetalZadfiya 
it worked for me as well but can you pls guide me about how to change the padding fo mobile and for desktop 

?