"add to cart" button to the collection level - (Prestige THEME)

[Laura41]

Hi All,

Q1. I would be REALLY grateful if anyone could post how to “add to cart” button to the collection level - (Prestige THEME)

Q2. I would like the product in the collection level to be added to the cart (while staying on the collection page)

I have used this code I found so far: (the formatting/style is not the same as my site though., it takes them to the checkout rather than just adding to the checkout too)

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form>

[dmwwebartisan]

Hey @Laura41

I read your description. Can you please provide me your webshop URL?

I will check and provide you solution here.

Thanks!

[Laura41]

This is the site:

https://www.therosewinecollective.com/

Thanks in advance..

[dmwwebartisan]

Hey @Laura41

I have checked your webshop That some code customization work.

I can free supported you please PM to me.

Thanks!

[notanybox]

Hello people!

My store is under Prestige theme and I was wondering if any of you have managed to add ‘add to cart’ button in the collection page.
Please please don’t ignore this

[Guleria]

Hello.

Add this code in product-item.liquid under Snippets

Note: Make it conditional a/to your need.

Next in custom.js under Assets, add this code

$('.ad_to_cart_coll').click(function(){    
  var ID = $(this).attr("data-var_id");
  addItemToCart( ID, 1);    // paste your id product number
  $('.cart_dr').trigger( "click" );
});
function addItemToCart(variant_id, qty) {
  data = {
    "id": variant_id,
    "quantity": qty
  }
  jQuery.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: data,
    dataType: 'json',
    success: function() { 
      document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
        bubbles: true  //this code is for prestige theme, is to refresh the cart
      }));
    }   
    
  }); 
 
}

Thanks

[jlpalumbo]

Hi Guleria,

I’ve tried this code, and it adds the “add to cart” button to my collections page, but when I click it, it doesn’t add items to my cart or anything. It’s un-clickable. Any help/advice? I haven’t done any other code customization to my store.

[jimsarn]

Same here, help needed!

[Stevend1987]

So I am reviewing the custom javascript page and not seeing the fix for it. Any assistance is appreciated. Just needing it to add to cart.

[chr1s_1]

This does not seem to work on the latest prestige update for several reasons:

1. there is no jQuery by default in prestige

2. they seem to have changed some class names etc

Do you have any idea on what needs to be changed to be able to use this with the latest prestige version?

Thanks a lot!

[Guleria]

It still working for me. You have to add JS library {{ ‘//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js’ | script_tag }} just before the

[chr1s_1]

Have you tried it with the latest update? Although I believe this is achivabel with JS itself instead of jQuery, I added jQuery to the theme for testing purposes and it still did not work.

Maybe its because I am trying to do it in the cart drawer?

[chr1s_1]

I changed it to vanilla javascript and added an onclick function on the button. This works like a charm for me now:

Place where you need the button:

In custom.js

function _addMeToCart(e, el) {
	e = e || window.event;
  	e.preventDefault();
  
    let formData = {
      'items': [
        {
          'id': el.dataset.variant_id,
          'quantity': 1
        }
      ]
    };

    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
    .then((resp) => { 
      return resp.json();
    })
    .then((data) => {
      document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
          bubbles: true
      }));
    })
    .catch((err) => {
      console.error('Error: ' + err);
    })
}

[Jose_Naranjo]

Thanks! This works perfect for upsell add to cart buttons on the drawer cart! Adds items to the cart without sending you to the cart page too.

[Jose_Naranjo]

Do you know how to get the side drawer cart to display when the add to cart button is clicked?

[NOssey]

I too would also like help having the cart drawer open up.

[snde]

I used parts of the answers above/below and found a perfect solution. There are 2 parts

[email removed] snippets/product-item.liquid

Find
{%- if show_price_on_hover == false and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}

Paste this code underneath:

<button
class=“ProductForm__AddToCart Button {% if product.selected_or_first_available_variant.available and use_primary_button %}Button–primary{% else %}Button–secondary{% endif %} Button–full”
onclick=“_addMeToCart(event,this)”
data-action=“open-drawer” data-drawer-id=“sidebar-cart”
data-variant_id=“{{ product.variants.first.id }}”>
{{ ‘product.form.add_to_cart’ | t }}

@assets/custom.js

Add this

function _addMeToCart(e, el) {
e = e || window.event;
e.preventDefault();

let formData = {
‘items’: [
{
‘id’: el.dataset.variant_id,
‘quantity’: 1
}
]
};

fetch(‘/cart/add.js’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(formData)
})
.then((resp) => {
return resp.json();
})
.then((data) => {
document.documentElement.dispatchEvent(new CustomEvent(‘cart:refresh’, {
bubbles: true
}));
})
.catch((err) => {
console.error('Error: ’ + err);
})
}

[bxdm]

Thanks for that solution. It worked great. One last addition would be really complete. What would we add to get the button to display at the bottom of the collection container so that it always lines up evenly when displaying? At present it will line up after the text strings. which are not always the same. Thanks in advance for any help. B.

[jax22]

thanks for the code, however it shows the side cart after clicking, but the product isn’t shown, when I refresh the page it is then shown in the cart, any help on this?

[bxdm]

it is implemented on this site caffetech.com and working. test if this site works for you.

also to line up the buttons evenly at the bottom we used this.

https://community.shopify.com/c/shopify-design/how-would-we-align-add-to-cart-button-to-bottom-in-collections/m-p/1694230#M452814%3Futm_source=communitymembers&utm_medium=email&utm_campaign=immediate_general