addToCart multiple selectionTags

Ask the community
, , , ,
1

Question:
I’m building a dynamic product page using Velo. During my customization of the page im using Selection Tags that the options are being filled from the product options section under the product dashborad that I alreaady filled.

This is how I populate the selection tags options -

const populateFeelingsSelection = () => {
const options = ;
Object.keys(thisProduct.productOptions).forEach((key, index) => {
const option = thisProduct.productOptions[key];
if (option.name === ‘Feeling’) {
console.log(option);
option.choices.forEach((choice, idx) => {
console.log(choice);
options.push({ “label”: choice.value, “value”: choice.value, “_id”: idx });
})
}
});
console.log(options);
$w(“#feelingSelection”).options = options;
};

choosing one option and adding to cart works for me, while choosing 2 or more doesnt work.

full code -

// Velo API Reference: Velo Docs
import { cart } from ‘wix-stores’;

$w.onReady(function () {
let thisProduct;
let choices = {};
let feelings = ;
// Print hello world:
// console.log(“Hello world!”);

// Call functions on page elements, e.g.:
// $w("#button1").label = "Click me!";

// Click "Run", or Preview your site, to execute your code
$w("#dynamicDataset").onReady(() => {
    thisProduct = $w("#dynamicDataset").getCurrentItem();
    console.log(thisProduct);
    $w("#image").src = thisProduct.mainMedia;
    $w("#description").text = thisProduct.description;
    populateFeelingsSelection();
});

$w('#feelingSelection').onChange((event) => {
    feelings = event.target.value;
    console.log("Feelings: {0}",feelings)
});

const populateFeelingsSelection = () => {
    const options = [];
    Object.keys(thisProduct.productOptions).forEach((key, index) => {
        const option = thisProduct.productOptions[key];
        if (option.name === 'Feeling') {
            console.log(option);
            option.choices.forEach((choice, idx) => {
                console.log(choice);
                options.push({ "label": choice.value, "value": choice.value, "_id": idx });
            })
        }
    });
    console.log(options);
    $w("#feelingSelection").options = options;
};

const checkValidity = () => {
    let isValid = true;
    if (!$w("#feelingSelection").valid) {
        if ($w('#feelingsOtherAnswer').value.length < 1) {
        $w('#feelingsOtherAnswer').style.borderColor = 'red';
        $w("#feelingSelection").style.borderColor = 'red';
        isValid = false;
    }
    }
    
    if ($w('#secondQuestionAnswer').value.length < 1 || !$w('#secondQuestionAnswer').valid) {
        isValid = false;
        $w('#secondQuestionAnswer').style.borderColor = 'red';
    }
    return isValid;
}

const addToCart = () => {
    const choices = {};
    let otherFeeling;
    let secondAnswer;
    let customTextFields = [];

    $w("#feelingSelection").style.borderColor = 'grey';
    $w('#feelingsOtherAnswer').style.borderColor = 'grey';
    $w('#secondQuestionAnswer').style.borderColor = 'grey';

    if (!checkValidity()) {
        $w('#errorText').show();
        return;
    } else {
        $w('#errorText').hide();
    }
    
    if (feelings.length > 0) {
        choices["Feeling"] = $w('#feelingSelection').value; 
    }

    if ($w('#feelingsOtherAnswer').value.length > 0) {
        otherFeeling = $w('#feelingsOtherAnswer').value;
        customTextFields.push({
                    "title": "אחר",
                    "value": otherFeeling
                });
    }
    if ($w('#secondQuestionAnswer').value.length > 0) {
        secondAnswer = $w('#secondQuestionAnswer').value;
        customTextFields.push({
                    "title": "שאלה שנייה",
                    "value": secondAnswer
                });
    }

    const products = [{
        "productId": thisProduct._id,
        "quantity": 1,
        "options": {
            "choices": choices,
            "customTextFields": customTextFields
        }
    }];
    console.log("products: ", products);
    cart.addProducts(products)
        .then((updatedCart) => {
            console.log("Product added");
            const cartId = updatedCart._id;
            const cartLineItems = updatedCart.lineItems;
            console.log(cartLineItems);
            console.log("updated cart: ", updatedCart);
            cart.showMiniCart();
        })
        .catch((error) => {
            console.log("error: ", error);
        });
};
$w("#addToCartButton").onClick(addToCart);

});

From my point of view, the issue is with adding multiple options in Choices[“Feeling”], but I can’t find the right way to add it. This issue blocks me from releasing my site since it’s crucial for the customer flow.

I looked on this doc - Add Products To Cart | Velo but the example shows only 1 selection and not multiple.

Product:
Wix Studio

What are you trying to achieve:
Savung multiple selection tags into choices of product.

2

The issue is that the choices["Feeling"] property expects a single value, but you’re trying to pass multiple selections. Instead of assigning choices["Feeling"] = $w('#feelingSelection').value;, which works only for a single selection, store multiple selected values as an array and pass them in a format that Wix Stores API accepts. Try converting the selected options into a comma-separated string or another format that Wix recognizes. If Wix does not support multiple selections in choices, consider adding extra custom text fields to store additional selections.

3

Hello @Tech_Voyager
Thank you for replying!

I can’t find any Wix doc that mentioning how to pass it correctly(when it’s more than 1 value).
Since the Feeling is product option I have to pass value in choices[“Feeling”], without it addToCart fails. Any other suggestion how to solve it?