How do you code for multiple selection tags?

Ask the community
, ,
1

Question:
I followed a wix tutorial to code selection tags and dropdown option. I now want to change the drop down to selection tags but no matter what try i ant seem to get it to work, as in the data and choices populate my new tags.

Is there a straight fwd way to add code for a second set of tags?

Product:
wix studio

What are you trying to achieve:
a selection tags for “Scent” as shown by the code below i have one selection tags set up for the “Size”.

What have you already tried:
Ive tried duplicating the selection tags code for “Size” and changing the variables and tag names etc.

Additional information:
function populateOptions() {
const { productOptions } = product;

const optionKeys = Object.keys(productOptions);
let options = optionKeys.map((option) => productOptions[option]);
console.log(“options”, options);

if (optionKeys.includes(“Size”)) {
const sizeOption = productOptions[“Size”];
options = options.filter((option) => option.name !== “Size”);
$w(“#optionSelectionTags”).options = sizeOption.choices.map((choice) => ({
label: choice.description,
value: choice.description,
}));

$w("#optionSelectionTags").onChange((event) => {
  const currentSelection =
    event.target.value[event.target.value.length - 1];
  $w("#optionSelectionTags").value = [currentSelection];
  selectedOptions["Size"] = currentSelection;
  updateProductPageWithOptions();
});

$w("#selectionTagsStack").expand();

}

$w(“#dropdownOptionsRepeater”).onItemReady(($item, itemData) => {
$item(“#optionDropdown”).label = itemData.name;
$item(“#optionDropdown”).options = itemData.choices.map((choice) => ({
label: choice.description,
value: choice.description,
}));

$item("#optionDropdown").onChange((event) => {
  selectedOptions[itemData.name] = event.target.value;
  updateProductPageWithOptions();
});

});

$w(“#dropdownOptionsRepeater”).data = options.map((option) => ({
…option,
_id: option.name,
}));

}

async function updateProductPageWithOptions() {
console.log(selectedOptions);

const scent = selectedOptions[“Scent”];
if (scent) {
const scentOption = product.productOptions[“Scent”];
console.log(“scentOption”, scentOption);
const selectedChoice = scentOption.choices.filter(
(choice) => choice.description === scent
)[0];
console.log(“selectedChoice”, selectedChoice);
$w(“#mainMedia”).src = selectedChoice.mainMedia;
}

const variants = await getProductVariants(product._id, {
choices: selectedOptions,
});

console.log(“variants”, variants);
if (variants.length > 1) return;

const { variant } = variants[0];

$w(“#originalPrice”).text = variant.formattedPrice;
$w(“#discountedPrice”).text = variant.formattedDiscountedPrice;
$w(“#productSKU”).text = variant.sku;
}

2

Hi, user2122 !!

In cases like this, it’s often more effective to start with a simpler scenario and test each individual action with shorter code. Once each part is working correctly, you can then implement the entire solution again. This approach tends to work better! :wink:

1 Like