Hello
I am having trouble setting up my button to add to cart, can someone please give me a break down of what I need to do
What is the url for your page? Can you share the code you are using?
Hi Steve, the url for my website is https://www.creationssublime.com/gourmet-meal-for-one
I am playing around on a duplicated site. I’ve created a repeater and I am trying to use the button as a faster add to cart feature. I am not an experienced coder and I am trying to use code through other forums.
Thank you for the response
@info84220 OK so here are the key elements you need to work with:
This is the element in Wix Code that gives you access to the addToCart() function. It can be accessed like this:
$w('#shoppingCartIcon1').addToCart(<product id>);
The syntax for his is:
2. Repeated Item Scope Selectors: When you add a button to a repeater you are placing it inside of a container which is duplicated inside of a repeater element. So as a simple example:
repeater-start
container #1 start
addToCartButton
container #1 end
container #2 start
addToCartButton
container #2 end
repeater-end
When the event handler for onClick() is called upon a button click you have to determine which container the onClick() was called from (the repeater item scope). You do this using the $w.at( ) function.
$w.onReady( function () {
$w("#myRepeatedImage").onClick( (event) => {
let $item = $w.at(event.context); // Get container scope
$item("#myRepeatedText").text = "Selected";
} );
} );
Now assuming you have connected a Stores/Products collection to a dataset with the ID (_id) of #dataset1.
Also assuming that you have connected #dataset1 to your repeater and its product elements then you can access the item from #dataset1 that is used by the container that the onClick() function was called from like this:
let selectedProduct = $item('#dataset1').getCurrentItem();
The selectedProduct will be a row from the data collection that the dataset is connected to and will include the ID field for the product. We use the field key, ‘_id’, to access the ID field like this:
let productId = selectedProduct._id;
Now you have the product Id you can add it to your cart:
$w('#shoppingCartIcon1').addToCart(productId);
So this will be what your code looks like:
$w.onReady( function () {
$w("#myRepeatedImage").onClick( (event) => {
let $item = $w.at(event.context); // Get container scope
let selectedProduct = $item('#dataset1').getCurrentItem();
let productId = selectedProduct._id;
$w('#shoppingCartIcon1').addToCart(productId)
.then(() => {
// Item added to the shopping cart
console.log("add product ${productId} success");
})
.catch((error) => {
// Catch an error that occurs
console.log("Error: ${error.stack}");
});
} );
} );
Here’s a cheat sheet that might help:
Good luck
1 Like
@stevendc
Thank you for the detailed reply. I’ve been trying out your tips and it feels like I am getting closer Here is the code I’ve written
$w.onReady( function () {
$w(“#button98”).onClick( (event) => {
let $item = $w.at(event.context);
let selectedProduct = $item(‘#dataset1’).getCurrentItem();
let productId = selectedProduct._id;
$w(‘#shoppingCartIcon1’).addToCart(productId)
.then(() => {
console.log(“add product ${productId} success”);
})
. catch ((error) => {
console.log(“Error: ${error.stack}”);
});
});
});
I am now getting an error message when the page is in preview mode and I click the button (#button98). It says Error: $(error.stack) Line 14
My image for the page is connected to my dataset images. My title is connected to the dataset title, and price is set up to the price in my dataset
I really appreciate your detailed response.
OK change the line
console.log(“Error: ${error.stack}”);
to
console.log(”Error: “+(error.stack? error.stack:error.message));
If that fails (it should’nt unless there is a syntax error) just log the error object:
console.log(error);
Cheers
Steve
1 Like
Thank you for the response again. I made the change you suggested and went with line
console.log(error);
my code now looks like
$w.onReady( function () {
$w(“#button98”).onClick((event) => {
let $item = $w.at(event.context);
let selectedProduct = $item(‘#dataset1’).getCurrentItem();
let productId = selectedProduct._id;
$w(‘#shoppingCartIcon1’).addToCart(productId)
.then(() => {
console.log(“add product ${productId} success”);
})
. catch ((error) => {
console.log(error);
});
});
});
#button98 is the id of my button Add to Cart
#dataset1 is the id of my Dataset
#shoppingCartIcon1 is the id of my shooping card
The error I am now receiving says
Array(1)
0:
“{"code":"CANNOT_ADD_CART","commandName":"AddToCart","message":"option Portion Size for product with id 3803a691-3f56-c07e-20f6-2078b915b3d8 is required","field":""}”
It feels like we are getting close! Thank you again for giving your time to help me
Hi there,
Well this is where you really need to read and understand the API documentation.
As I mentioned above you need to look at the addToCart() api
You will see there are other arguments that you can give while adding an product. How many products (quantity) and any optional features (options).
You appear to have a product that has options that are required that you have configured in your store. You need to add an option field for the one you require which seems to be “Portion Size”.
So once you ha e the Option you can use it by setting quantity to 1 or more and then add a quantity property & value in an addToCartOptions object.
Time for some bookwork and review of any related examples.
Cheers
Steve
1 Like
I have been reading this post and trying to see if I am missing something.
(looks like the post originator ended up not being able to solve his issue either as his site seems to be using the default store apps)
The code works but it doesn’t pick the right product. That is because the repeater is connected to another dataset to collect the unique product info. The same products also exist in the stores database but naturally they have different Product IDs. Is it possible to connect the repeater items from a custom dataset to the store dataset so the Add To Cart selects the right item in each container?
Thank you.
hey were you able to solve the issue?
I was able to fix it with code. Depending on the structure of your databases this can be different so I am not sure how to help without seeing your code or database setup. One thing you should look into is setting up "reference fields."This will help connecting items between databases.
@info52 would you care to take a look at my website? https://priyeshggupta5.wixsite.com/mysite-4
this is the url of my duplicate editor where i am testing the codes. Your help will be really appreciated.
Thank you