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
164 34 56

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
1 Like

Success.

Shopify Expert
2652 443 572

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
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

Success.

Shopify Expert
2652 443 572

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
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
2652 443 572

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes