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