Narrative Theme - Add to Cart on collection template

Solved
Highlighted
Tourist
9 0 2

Hi guys !

 

As title suggest, I'm having a problem displaying the same "Add to Cart" button as displayed on Featured Product section.

I tried several other proposed solutions, but that doesn't fix the problem. At this time, buttons are displayed, but there is a redirection to the cart page.  

Is there a solution to allow user to stay on the collection page when products are added to the cart ?

 

Many thanks in advance for your assistance ! :) 

 

 

 

0 Likes
Highlighted
Shopify Partner
165 34 61

You need to use shopify ajax api to add item to cart staying at the collection page.  Here is url  https://help.shopify.com/en/themes/development/getting-started/using-ajax-api

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
Highlighted
Shopify Expert
3911 559 940

This is an accepted solution.

Hi,

You can add like following:

 

<input type="button" value="Add to cart" class="add_to_cart" />
<script>
$(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = //add quantity selector here
            var id= // variant selecto here
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                }
            });
        })
    });
</script>

Note: change quantity and variant with your theme selector, i have used placeholder button for now.

Let me know if you need help 

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Tourist
9 0 2

Thank you very much for your quick reply !

 

Ihave already read this method on previous post and I've already tested Ajax API and your code 

 

 

Currently, i used the Snippets "Product-form", which i include on "Product-Page" but there is still  a redirection, but this time, on the cart.

 

Thank you ! And please excuse my English..

 

figure-1 : product-card.liquid

figure-2 : collection page

 

Product-page.PNGcollection-page.PNG

 

0 Likes
Highlighted
Shopify Expert
3911 559 940

This is an accepted solution.

This is because i think you have type="submit" ? you have to change it with type="button".

Text me on mail or Skype i will help in your code.

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
New Member
1 0 0

Hello,

 

I have the same issue with Narrative theme. I would like to have an add to cart button on the collection page along with quantity selector.

Can you please tell me where should I paste that code?

 

Thank you very much,

Sebastian

0 Likes
Highlighted
Shopify Expert
3911 559 940

Hi @queensdelightdk 

Add bellow code in snippet->product-card.liquid file at end 

 

<input type="number" class="add_qty" />
<input type="button" v_id="{{ product.variants.first.id }}" value="Add to cart" class="add_to_cart" />

Add below code in asset->theme.js at end of file

 $(document).on('click','.add_to_cart',function(){
            var quantity = $(this).prev('.add_qty').val();
            var id= $(this).attr('v_id');
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                }
            });
        })

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
New Member
1 0 0

This works a treat thank you, I didnt need the quantity selector so deleted that bit. The only thing it doesnt do is update the cart bag at the top right of the website in real time to show its been added. Also it doesnt tell the customer its been added to cart by way of text notification or pop up. Is there a way to do this?

 

Lastly I'd like to make the button active when clicked, maybe a rollover or cursor change, can you help?

 

Heres a link to the page.... https://craftbeerme.myshopify.com/collections/all

0 Likes
Highlighted
Shopify Expert
3911 559 940

thing that you want is not simple to do and i can see you have redirecting  on cart page not adding by Js

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
4 0 0

For those still looking, I found a work-around.  You need to simulate an update to the input field in the cart form. Its quite easy actually. This is triggering first an input blur event, and then an input event. Like so:

 

$('.cart-drawer input').trigger('blur'); // simluate deselect  setTimeout(function(){ 
  $('.cart-drawer input').trigger('input'); // simualte edit
}, 350);

I've found it works best if there is some kind of delay on the blur event to allow the cart reload to finish, since there is no callback its a bit of guess work. Running this code will force an update of the cart whether it's empty or active. 

 

I have only tested this on the Narrative theme, but if the others use the same cart drawer this should work as well.

0 Likes