Sorry for the bad title, couldn't figure a better one.
Product Options:
[
{
"_id": "5cdd1e81e85ecc7ebb145039",
"name": "Sizes S/M - M/L - L/XL ",
"display_name": "Size",
"display_style": "rectangle",
"values": [
{
"_id": "5cdd1e81e85ecc7ebb14503a",
"label": "Small / Medium",
"option_id": "5cdd1e81e85ecc7ebb145039"
},
{
"_id": "5cdd1e81e85ecc7ebb14503b",
"label": "Large / X-Large",
"option_id": "5cdd1e81e85ecc7ebb145039"
},
{
"_id": "5da8080ea51d8207e9098875",
"label": "Medium / Large",
"option_id": "5cdd1e81e85ecc7ebb145039"
}
]
},
{
"_id": "5cdd280ce85ecc7ebb145040",
"name": "Hat Sizes Νο 56-57 / 58-59 / 60-61",
"display_name": "Hat Size",
"display_style": "rectangle",
"values": [
{
"_id": "5cdd280ce85ecc7ebb145041",
"label": "56 / 57",
"option_id": "5cdd280ce85ecc7ebb145040"
},
{
"_id": "5cdd280ce85ecc7ebb145042",
"label": "58 / 59",
"option_id": "5cdd280ce85ecc7ebb145040"
},
{
"_id": "5cdd280ce85ecc7ebb145043",
"label": "60 / 61 ",
"option_id": "5cdd280ce85ecc7ebb145040"
}
]
}
]
Product Variants:
[
{
"_id": "5e0a02e4413f9e12f20edfb5",
"options": [
{
"option": {
"_id": "5cdd1e81e85ecc7ebb145039",
"display_name": "Size",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd1e81e85ecc7ebb14503a",
"label": "Small / Medium",
"option_id": "5cdd1e81e85ecc7ebb145039"
}
},
{
"option": {
"_id": "5cdd280ce85ecc7ebb145040",
"display_name": "Size Hat",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd280ce85ecc7ebb145041",
"label": "56 / 57",
"option_id": "5cdd280ce85ecc7ebb145040"
}
}
]
},
{
"_id": "5e0a02e4413f9e12f20edfb6",
"options": [
{
"option": {
"_id": "5cdd1e81e85ecc7ebb145039",
"display_name": "Size",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd1e81e85ecc7ebb14503a",
"label": "Small / Medium",
"option_id": "5cdd1e81e85ecc7ebb145039"
}
},
{
"option": {
"_id": "5cdd280ce85ecc7ebb145040",
"display_name": "Size Hat",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd280ce85ecc7ebb145042",
"label": "58 / 59",
"option_id": "5cdd280ce85ecc7ebb145040"
}
}
]
},
{
"_id": "5e0a02e4413f9e12f20edfb9",
"options": [
{
"option": {
"_id": "5cdd1e81e85ecc7ebb145039",
"display_name": "Size",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd1e81e85ecc7ebb14503b",
"label": "Large / X-Large",
"option_id": "5cdd1e81e85ecc7ebb145039"
}
},
{
"option": {
"_id": "5cdd280ce85ecc7ebb145040",
"display_name": "Size Hat",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd280ce85ecc7ebb145042",
"label": "58 / 59",
"option_id": "5cdd280ce85ecc7ebb145040"
}
}
]
},
{
"_id": "5e0a02e4413f9e12f20edfba",
"options": [
{
"option": {
"_id": "5cdd1e81e85ecc7ebb145039",
"display_name": "Size",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd1e81e85ecc7ebb14503b",
"label": "Large / X-Large",
"option_id": "5cdd1e81e85ecc7ebb145039"
}
},
{
"option": {
"_id": "5cdd280ce85ecc7ebb145040",
"display_name": "Size Hat",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd280ce85ecc7ebb145043",
"label": "60 / 61 ",
"option_id": "5cdd280ce85ecc7ebb145040"
}
}
]
},
{
"_id": "5e0a02e4413f9e12f20edfbc",
"options": [
{
"option": {
"_id": "5cdd1e81e85ecc7ebb145039",
"display_name": "Size",
"display_style": "rectangle"
},
"value": {
"_id": "5da8080ea51d8207e9098875",
"label": "Medium / Large",
"option_id": "5cdd1e81e85ecc7ebb145039"
}
},
{
"option": {
"_id": "5cdd280ce85ecc7ebb145040",
"display_name": "Size Hat",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd280ce85ecc7ebb145042",
"label": "58 / 59",
"option_id": "5cdd280ce85ecc7ebb145040"
}
}
]
},
{
"_id": "5e0a02e4413f9e12f20edfbb",
"options": [
{
"option": {
"_id": "5cdd1e81e85ecc7ebb145039",
"display_name": "Size",
"display_style": "rectangle"
},
"value": {
"_id": "5da8080ea51d8207e9098875",
"label": "Medium / Large",
"option_id": "5cdd1e81e85ecc7ebb145039"
}
},
{
"option": {
"_id": "5cdd280ce85ecc7ebb145040",
"display_name": "Size Hat",
"display_style": "rectangle"
},
"value": {
"_id": "5cdd280ce85ecc7ebb145041",
"label": "56 / 57",
"option_id": "5cdd280ce85ecc7ebb145040"
}
}
]
}
]
I have this code (part of React component):
setVariant = (optionIndex, valueIndex) => {
const { product } = this.state;
const parentProduct = { ...product };
const optionValue = parentProduct.options[optionIndex].values[valueIndex];
const emptyArr = [];
parentProduct.variants.forEach(({ options }) => {
options.forEach((item) => {
if (item.value._id === optionValue._id) {
emptyArr.push(...options);
}
});
});
const updatedOptions = parentProduct.options.map((productOption) => {
const productOptions = JSON.parse(JSON.stringify(productOption));
productOptions.values = productOptions.values.map((productOptionValue) => {
productOptionValue.disabled = emptyArr.every(
({ value: { _id } }) => productOptionValue._id !== _id
);
return productOptionValue;
});
return productOptions;
});
My issue with this snippet it that it sets the disabled property correctly ex. if I choose first Size e.x. Small/Medium, then Size Hat 60 / 61 gets disabled and I can click the other two options. But if I click another Size Hat 58 / 59 then Large / X-Large won't get enabled.
This is what I'm trying to achieve:
But this is what i'm getting: (when changing 56 / 57 etc. then Sizes ex. Large/X-Large should be enabled if found in variants array, red color represents disabled button)
from Dynamic selection of product variants, comparing 2 arrays


No comments:
Post a Comment