Making an add to cart button NOT on the product's page.

Solved
Highlighted
Tourist
15 0 1

Hello,

I'm looking to make a button that adds a particular product to the cart. Everything I've found so far only applies when you're on the product's page, but I want to be able to add something to the cart even when I'm not on the same page. Could I use a product's id or handle or other attribute to accomplish this? Also I'm using Supply theme.

0 Likes
Highlighted
Excursionist
22 2 8

Hi there!

Are you looking to do a quick add to cart button on, say, the product collection page? When you hover over the image of the product, you will see an "add to cart" button... is that what you're trying to do?

 

Another option would be to use the BuyButton sales channel through shopify. Screen Shot 2020-01-14 at 3.41.18 PM.png

0 Likes
Highlighted
Tourist
15 0 1

So ultimately what I'm trying to build is a webpage that let's the customer build a bundle from a group of products.

 

I got my front end code finished such that a customer can select the products but I need to find a way to translate that selection into a button that adds all items they selected to their cart.

 

I'm trying to figure out the Liquid logic for adding an item to my cart on a page of mine, separate from any product page or collection page, but still it is a page within my Shopify store. I figured if I could learn how to add one item to the cart, I could write a statement that loops through each bundle item, checks that item's id/handle/whatever identifier is needed, and more dynamically can add that item to the cart if it was checked. Really hoping I don't need to use an app for this since this seems so accomplishable otherwise.

 

The buy button feature seems like a great feature but I don't know enough about it whether it could accomplish this task since it seems more geared for one item per button. I'll take another look at the Embed features to see if there's a way to work with that.

0 Likes
Highlighted
Excursionist
22 2 8
Can you add me as an authorized user (jreikos@gmail.com ) and I can take a look at the code.

It does seem like it should be accomplishable, so let’s try to figure it out!
0 Likes
Highlighted

This is an accepted solution.

Hi there

 

If you have a background in coding, here the solution:


- Create a Button on your page

- Add an event handler to handle ATC function

- In the ATC function, you must send your product's variant ID and the quantity

- Create an AJAX POST request to /add.js endpoint

 

If not, I highly recommend you to install PageFly app (Free plan available) to build your custom page

With PageFly you can easily create an ATC button on any page that you want

 

CRO Expert at PageFly - Advanced Shopify Page Builder.
- Use the Christmas template to skyrocket your sales.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube.
- [Tutorial] Get more tips on using PageFly to soar sales this season
Highlighted
Tourist
15 0 1

Aha! Thank you Richard. Figured it out and got it working.

0 Likes
Highlighted
New Member
1 0 0

Hi Nick,

Did you end up doing a one click add all to cart? What did you end up doing as far as the build your own bundle?

 

 

0 Likes
Highlighted
Tourist
15 0 1

Hey mrpink,

I made a grid of pictures/labels that when clicked on add their variable to a list and remove themselves from the list when unchecked. Then when the add to cart button is pressed, all labels that are checked are added to the cart.

Richard's advice was what I needed to solve my issues. Researching the add.js jQuery was the piece missing for me.

Firstly I made a big long string variable.

Then I looked up all ids from all Shopify products. You can find that by adding a .xml suffix to each product page's url. I call them say element1, element2, etc. and initialize those variables all to an empty string. I set up some logic so that if the item is "checked" essentially, the string of each element of the bundle's respective id is added to the string. If the box is unchecked it replaces the string with an empty string again.

Then if the bundle size equals the amount of things the user has checked, a button appears that when the user clicks on it adds that big long variable that is a combo of all my other strings to the cart.

Something like this if say there were 4 items in your bundle to pick from and the user was allowed to pick 2 (including the syntax Shopify needs as referenced in prefix and suffix):

var prefix = "{ \"items\": [";
var suffix = "] }";

var cartography = prefix + element1 + element2 + element3 + element4 + suffix;
var cartParse = JSON.parse(cartography);

jQuery.post('/cart/add.js', cartParse);
alert("Your bundle has been added to your cart.");

I also added some logic to make sure the user couldn't select more options than the bundle size unless they unchecked something else first, and an if statement that makes sure your elements checked equal the bundle size.

0 Likes