Add to Cart Button not Working on Product Configurator.

Ask the community
,
1

Hello,

Add to cart button Placed on https://robwilliamlaurie.wixsite.com/website-2/big-blue
is not working. But the values that should be forwarded to the Cart is Showing up when log the values in the console.

Any help to Fix this is Highly Appreciated.
Thanks in Advance
Esmond

import wixWindow from 'wix-window';
import wixData from 'wix-data';

//====== Global Variables ====== //
const NUMBER_OF_CHOICES = 2;
const productId = "2b127c36-745b-e1c0-61b5-913becd1ce6c";
let selectedOptions = {};

$w.onReady(function () {
    clearSelection();
    $w('#addToCartButton').disable();
});

function clearSelection() {
    selectedOptions = {};
    $w('#addToCartButton').disable();
    $w('#lampshadeImg').hide;
    $w('#CableImg').hide;
    $w('#lampshadeImg').src = 'https://';
    $w('#CableImg').src = 'https://';
}

export function refreshButton_click(event) {
    clearSelection();
}

//===== selectChoiceForOption() ===== //
function selectChoiceForOption(option, choiceData, choiceTitle){
    selectedOptions[option] = choiceTitle;
    $w(`#${option}Img`).src = choiceData;
    $w(`#${option}Img`).show();
}

export function cableSelectionRepeater_itemReady($w, itemData, index) {
    $w('#selectCableButton').onClick(() => {
        selectChoiceForOption($w, 'Cable', itemData);
    })
}

// ====== Shade Button ===== //
export function checkDesignBtn_click(event, option, displayImage, shadeTitle, cableTitle) {
    shadeTitle = $w('#lshadeDrop').value;
    cableTitle = $w('#cableDrop').value;

 // Lampshade
    wixData.query("combinedMaterialsImages")
    .eq('option','lampshade')
    .eq('title', shadeTitle)
    .find()
    .then( (res) => {
        displayImage = res.items[0].displayImage
        selectChoiceForOption('lampshade', displayImage, shadeTitle)
    })

 // Cable
    wixData.query("combinedMaterialsImages")
    .eq('option','Cable')
    .eq('title', cableTitle)
    .find()
    .then( (results) => {
        displayImage = results.items[0].displayImage
        selectChoiceForOption('Cable', displayImage, cableTitle)
    })

    $w('#addToCartButton').enable();
}

export function lshadeDrop_change(event) {
    $w('#addToCartButton').disable();
}

export function cableDrop_change(event) {
    $w('#addToCartButton').disable();
}

export function addToCartButton_click(event) {
    $w('#shoppingCartIcon1').addToCart(productId, 1, {"choices": selectedOptions});
    console.log(selectedOptions);
}

#ProductConfigurator #AddToCart #AddToCartButton

2

Please Look into This

3

You are getting errors on your options. Use the following code which will provide more information:

$w('#shoppingCartIcon1').addToCart(productId, 1, {"choices": selectedOptions})
    .then(() => {
        console.log("Product added");
    })
    .catch((error) => {
        console.log(error);
    });

You will need to determine what is wrong with your options, or with the format of your options. see the AddToCart API for more information.

4

Hi @Yisrael (Wix)
Thank you very much, I fetched the error. please advice.

FetchError: {"code":"CANNOT_ADD_CART","commandName":"AddToCart","message":"option Cable Colour for product with id 2b127c36-745b-e1c0-61b5-913becd1ce6c is required","field":""}

Thank you

5

It appear that you need to provide the “option cable color”. You should inspect selectedOptions and make sure that the contents are valid and in the format that the API requires.

6

Hey @yisrael-wix
Thank you for the hint. I figured out the issue!

7

Can you please tell what was the issue? @Esmond

8

Hi I have the same issue, what was it and how did you fix it? @Esmond

9

FetchError: {“code”:“CANNOT_ADD_CART”,“commandName”:“AddToCart”,“message”:“Product with id d3d205dc-b07e-466f-a9bb-7906f829cb9c was not found”,“field”:“”}

I am getting the above error . kindly tell me hot resolve this

10

Can anyone send a link to a WIX website project with a working product customisation page please?

We have managed to get a custom product to go to cart, but the image in the cart is not showing the final designed product.

Within the customisation ‘dynamic’ page you can select 8 options. All of the images are sized the same with transparent areas. Within the design page you can see your final configured design, but when you add to cart, the final design does not appear. Therefore if someone buys the product we have no idea what the options are.

This is very frustrating.

Is there a WIX app for product customisation?