Hello,
I am working on a Shopify theme for a store.
My task is to disable certain options when one of the size options is chosen.
As shown in the picture above, when size 12 is selected , both insulated and double function options are disables.
The reason for that is that the variant 12cm/Insulated or 12cm/DoublFunction are not available.
The variants are governed by the following size chart.
From the first image I actually managed to achieve that using a static approach where I locate the tags containing the options and disable them based on the following function
I simply locate the options with classes and add or remove a CSS class based on the size chart.
I placed the function as shown in the next image:
The function will run on refresh once to activate it upon opening the page and then it will function on the click on any of the size options.
What I want now is a dynamic approach,
Is there a way to create a code using Shopify Objects and Variables to dynamically disable any unavailable option based on the selection o the first one.
The reasoning for that is that there is another store that has different variables for different product and with different options (colors, etc), and the static approach will result in a massive function and a need to update the code every time a different variant/product is added to the store.