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.
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?
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);
});
I also get this error if I try to access the page
https://www.johnframesandgifts.com/CustomCanvas/CreateYourOwn
Can you share the actual code for the page? It looks like a syntax issue.
// Automatically start the upload of the selected file 1 second after it is chosen.
export function uploadButton_change(event, $w) {
// If there is a chosen file:
if ($w(“#uploadButton”).value.length > 0) {
//Automatically start the upload of the file 1 second after it is chosen.
setTimeout(() => {
$w(“#uploadButton”).startUpload().then(uploadedFile => {
$w(“#print”).src = uploadedFile.url;
});
}, 1000);
}
}
// Add the customized item to the shopping cart.
export function addToCartBtn_click(event, $w) {
// Get the current product.
const currentProduct = $w(‘#dynamicDataset’).getCurrentItem().product;
// Add the current product to the cart with the user’s chosen background color, text color, custom text, and custom background image.
$w(‘#shoppingCartIcon1’).addToCart(currentProduct._id, 1, {
“choices”:
{
“title”: “Background Image”,
“value”: $w(‘#print’).src
}
});
}
function updateMenuButtons() {
$w(‘#repeater1’).forEachItem(($w, itemData) => {
const currentDynamicId = $w(‘#dynamicDataset’).getCurrentItem()._id;
if (currentDynamicId === itemData._id) {
$w(‘#button1’).disable();
} else {
$w(‘#button1’).enable();
}
});
}
export function dataset1_ready_1() {
updateMenuButtons()
}
Hi Yoav, any idea? My client has been patiently waiting to hear back from you.
@ism-freelance hay, sorry for the delay. I am on vacation, Actually a family wedding . Will be able to help on Wednesday.
@yoav-wix No problem. Thank you.
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 CartIcon - Velo API Reference - Wix.com
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.
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
Thank you so much Oded.
I’ve added the code below but no luck,
// Add the customized item to the shopping cart.
export function addToCartBtn_click(event, $w) {
// Get the current product.
const currentProduct = $w(‘#dynamicDataset’).getCurrentItem().product;
// Add the current product to the cart with the user’s chosen background color, text color, custom text, and custom background image.
$w(‘#shoppingCartIcon1’).addToCart(currentProduct._id, 1, {
“customTextFields”: {
“title”: “Please Upload Image”,
“value”: “$w(‘#print’).src”
},
});
}
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
Thank you so much Oded! This worked! Really appreciate the help.
Hey Oded, my client would like to add three canvas size options, how can I achieve this? Should I use product options?
That would depend, does the size affect the price?
If not, you can keep using customTextFields.
Otherwise, you need to define these as product options on the relevant product and use product options in the add to cart API. Also, you will want to update the displayed price when selecting the size via whatever custom control you might be using. You can choose to hardcode the price in your code, or use https://www.wix.com/code/reference/wix-stores-backend.html#getProductOptionsAvailability in order to get the price for the selected variant
Thanks,
Oded
@odeda Yes, the size of the product does affect pricing. How would I go about it?
@ism-freelance I answered that above:
“you need to define these as product options on the relevant product and use product options in the add to cart API. Also, you will want to update the displayed price when selecting the size via whatever custom control you might be using. You can choose to hardcode the price in your code, or use https://www.wix.com/code/reference/wix-stores-backend.html#getProductOptionsAvailability in order to get the price for the selected variant”
If this isn’t clear or you require more info please let me know
@odeda Yes, I read what you wrote above. The reason I ask is because the code part I understand, but how do I link, for example, a Size 1 Framed Canvas to add to cart; do I do it with a button? And then create a button for each size/frame option?
@ism-freelance
I would imagine that you would add a drop down to your page, where you would place the relevant size options. You can either hardcode them via the drop down settings, or read the “productOptions” field from the product and then set the values via code.
Either way, now, when you press the addToCart button you would need to read the value from that drop down and then set the value under “choices” within the addToCartOptions.
Finally, you might want to change the price displayed on the page upon a selection made in your drop down, and I suggested ways to handle this above.
I hope that’s clearer, if not please let me know.
Thanks,
Oded