Sunday, 5 January 2020

Dynamic selection of product variants, comparing 2 arrays

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:

desired result

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)

enter image description here



from Dynamic selection of product variants, comparing 2 arrays

No comments:

Post a Comment