Hey guys. I have a client who had me design this feature for their site, https://www.wix.com/code/home/example/Print-on-Demand
I got everything to work except the Add to Cart button. I am attaching a screenshot of the current code if that helps.
Anybody have an idea what could be wrong? As far as I can tell the code is right.
Old post reappearing, closed.
Add new forum post if help still needed.
Hi! I see that you have solved the problem.
https://www.johnframesandgifts.com/CustomCanvas/CreateYourOwn
Could you share the final code?
Thanks.
I can't get the add to cart option to work i get the below error and nothing happens:
Error: [object Object]
The code I am using is :
export function button1_click(event,$w) { const productId = $w('#dynamicDataset').getCurrentItem()._id; $w("#shoppingCartIcon2").addToCart('450f3586-1de8-7077-abc6-25118db8a5c8', 1) .then( () => { console.log("Product added"); } ) .catch( (error) => { console.log(error); } );
}
Please help
Hi,
The Print On Demand example can be a good start to learn how to create a product page with configuration option. Another useful example is the Product Configurator example.
As for the price change, after selecting the relevant color (or size) from the dropdown and clicking on the Add To Cart button, you should add to the cart the product with the relevant product option.
Here's a snippet which should better explain what I'm referring:
export function addToCartButton_click(event, $w) { let colorSelected = $w('#dropdownColor').value; //in case it's a dynamic product page let itemObj = $w("#dynamicDataset").getCurrentItem(); $w("#shoppingCartIcon1").addToCart(itemObj._id, 1, { choices: { Color: colorSelected} }); });
I recommend also reading the documentation here. There are other examples there with explanation how to use the function.
Good luck,
Tal.
You're welcome.
In order to get the values from a drop down please review the dropdown API - https://www.wix.com/code/reference/$w.Dropdown.html. Generally speaking, you should search for APIs within the wix API code reference https://www.wix.com/code/reference/
Each choice (although you only mentioned size) would be a key in your dictionary so it should be just:
"choices": { "Size": "Small" }
Okay, got it. I'm really appreciative of your help. What would I use to read the value from the dropdown, and as Choices, do I set up each option separately?
Hi,
customTextFields is an array so your code should be:
$w('#shoppingCartIcon1').addToCart(currentProduct._id, 1, {
"customTextFields": [{ "title": "Please Upload Image", "value": $w('#print').src }], });
I also removed the quotes around $w('#print').src
Thanks,
Oded
Hi @ISM Freelance
First, the issue with the link was on WIX side and it's now resolved.
Per your question, let me explain the difference between "choices" and "customTextField" under https://www.wix.com/code/reference/$w.CartIcon.html#AddToCartOptions:
1. Options - These refer to "Product Options" under the product page in store manager. For example, the product "Create Your Own Canvas" has one options - "FRAMED SIZES" which choices are "SIZE 1" and "SIZE 2".
When it comes to the addToCartAPI, you have to send all the defined choices with allowed values.
So - You add to cart is failing because you are sending the choice "Background Image" which is not defined and you are not sending the option "FRAMES SIZES" which is defined. And also the syntax is wrong anyway, for choices it would be "Background Image": "$w('#print').src
However, probably you don't want to use options at all, keep reading.
2. CustomTextField - This would refer to the "Custom Text" section under the product page in store manager. For the "Create Your Own Canvas" you haven't defined any. The cool things about CustomTextField, is that you can use it to send any values you want during addToCart and you don't have to define them in store manager at all.
So - What you probably should be doing, is sending the background image as a custom text field and then you should be good
Thanks,
Oded
I also get this error if I try to access the page
https://www.johnframesandgifts.com/CustomCanvas/CreateYourOwn
Here is the error that came up
Can you explain a little bit better what does not work?
The function code looks valid.
The addToCart function returns a promise. Can you change the code so that we check the response of the promise?
e.g.
$w('#shoppingCartIcon1').addToCart(currentProduct._id, 1, { "choices": { "Background Color": $w('#colorText').text, "Text Color": $w('#textColorName').text }) .then(() => { console.log("product added to cart"); }) .catch((e) => { console.error("failed to add product to cart", e.message); });
By the way, I just noticed that if you open the example Wix provides in the tutorial through the Editor, their example doesn't work either... Is Wix the problem?