Add "Add to Cart" functions to our custom button

Solved
New Member
4 0 0

Hi all,

 

Im new on Shopify, i just create 3 custom icons (view product, wishlist, add to cart) on collection page, i only able to solve 'view product' function and i still have problem with adding function for the rest buttons (wishlist & add to cart).

Somebody can help me with my issues ? i'm using Debut theme which is i think maybe they using ajax to doing 'add to cart' function

 

Any references would be appriciated.

Thanks

0 Likes
Shopify Partner
1747 289 372

You want to add product to cart without going to product page? send me your store url

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

Yes exactly, i want to adding "add to cart" function in collection page directly. 

0 Likes
Shopify Partner
1747 289 372

You have doing wrong code, as you can see in image there is no variants id placed in form and also onclick even you are doing wrong function, you have to pass any JavaScript function and add your add to cart function in this function

like: 

<a onclick="add_to_cart()" class="picon"><i class="fa fa-shopping-bag"></i></a>

create function in Theme.js file like

function add_to_cart(){
  //add you add to cart function code here
}

 

 

 

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

ahh i see, thanks for the answear jasoliya.
could help me with the js function code ? or any references that can help me with this function ?

0 Likes
Highlighted
Shopify Partner
1747 289 372

Yes, but you need little Js and liquid knowledge for that

Change this link:

<a onclick="add_to_cart()" class="picon"><i class="fa fa-shopping-bag"></i></a>

TO

 

<a class="picon ad_to_cart" var_id="{{product.variants.first.id}}"><i class="fa fa-shopping-bag"></i></a>

Then add this Js  in asset->theme.js

 

$(document).on('click','.ad_to_cart',function(){
  var obj=$(this);
 
  $.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: {
      quantity: 1,
      id: $(this).attr("var_id")
    },
    dataType: 'json', 
    success: function (data) {  
alert('Item added to cart'); } }); })

 

 

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

Thank for your reply jasoliya, the code seems doesn't work.

i already follow your instructions and i got this Console error : 

on open file.JPGon-consolelog.JPG

0 Likes

Success.

Shopify Partner
1747 289 372

bellow field is not working on your page

{{product.variants.first.id}}

Variants id cant find.

You have to find which product object used for showing title and other product stuff you have to use that object, find ".title" and see which object name if before ".title" like product.title, then place this object on pace of products on our case so you can get variants id

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
0 Likes