Solved

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

atielking
New Member
5 0 0

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.

Screen Shot 2022-06-23 at 10.42.05 AM.png

 

 

 

cc: @zimblot 

Accepted Solution (1)

SheetalZadfiya
Explorer
70 15 19

This is an 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>

image-20220630-045729.png

 

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.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore

View solution in original post

Replies 8 (8)

SheetalZadfiya
Explorer
70 15 19

This is an 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>

image-20220630-045729.png

 

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.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
atielking
New Member
5 0 0

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

olifarhaan
Visitor
3 0 0

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
New Member
4 0 0

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

Amanagg
New Member
4 0 0
Amanagg
New Member
4 0 0

pls help

michaeldoxsey
Shopify Partner
10 0 1

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
Shopify Partner
26 0 0

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

?