"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

[Developer-G]

Hello.

Add this code in product-item.liquid  under Snippets 

<button  type="submit" name="add" aria-label="Add to cart" class="ad_to_cart_coll Button Button--primary" id="ad_to_cart" aria-haspopup="dialog" data-add-to-cart="{{ product.variants.first.id }}" data-var_id="{{ product.variants.first.id }}">
          Add to cart</button>

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_]

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!

[Developer-G]

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 </head>

[chr1s_]

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_]

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:

<button onclick="_addMeToCart(event,this)" data-variant_id="12345678">add me</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.

[Farhan3]

Please go to Online store > Customize > Theme settings > Cart > Select the Drawer option and save it.

For more details: contact me ifarhanrifat@gmail.com

[olympiaa2010]

Hello,

Im new and I am trying to add the add to cart button as well on the prestige theme. can you please explain how should I add it?

Thank you 

Danae

[snde]

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

@ 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 }}
</button>

@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-co...

[jax22]

All working now, seems site hadn't been updated for a while so scripts were outdated and conflicting with code. Thanks 

[Nana_Osei]

Hey - I am currently having the same issue. Adding to cart > cart slider opens > no products appear. 
Was there some code you removed yourself? Or did it automatically fix itself?

[snde]

No. Did you insert the javascript @assets/custom.js?

[AndreasWaeldele]

@snde I also would like to know if there is a way to implement a variant selector or even better use the default product item variant selector from the theme itself. Everything works as it should. I pasted the js into custom.js.  Thanks !

[snde]

Sorry. I never tried that. Products in my store don't have variants. I suppose a specialist can help you here.

[Forrester123]

Thanks so much for this @snde ! Working like a charm.

What is the best way to prompt a variant selector before adding the item to cart? For example, if someone adds a hat it works perfectly since there is 1 size, but if they add a shirt I'd like them to be able to select their size variant before it is added.

Thanks in advance! 

[dbull37]

Hey @snde , 

Thanks for the snippet. It's been really helpful. I'm having issues getting the cart to correctly update without refreshing the page. I'm able to add the item into the cart and get the little popup to appear as well with the cart but it's just an empty page.   

I added the code to both the custom.js file under Assets and the other code under Snippets/product-item.liquid however the cart remains empty until I hit refresh. What am I missing? Any and all help would be greatly appreciated on this matter! 

Thanks!

[basicsetalshop]

Very helpful! Works well for me. Any chance you have a modified snippet that has both the Add to Cart CTA + a View Details CTA? So customers can have a clear option to go to the Product detail page. Thank you!!

[michael_langify]

Hi Andrei,

please try adding the original content that is content in your base language (in my case English) to Shopify

so that the "Add to cart" text is entered there:

instead of just showing the placeholder like:

This should normally but not always fix this issue.

[mitsikitty]

Do you have a solution where the button is shown on hover like the original quick buy button, but instead of the 'plus' symbol, it just says 'add to cart'?

[GTStudio]

Hi! Is there a way to hide the 'add to cart' button on the collections page, for those products that are sold out or coming soon? I can't seem to make it work and I would appreciate your help so much!

Thanks

[abhishek07]

could you please guide me on where should I Put this code on my website?