Options selector script doesn't work with 3 product options

[darcemac]

Hi Alvin,

I'm using the theme ks-bootshop-v2.0.0. We're having an issue where it seems the product-options.js isn't able to add the selected variant if there are more than 2 items.

Do you know a quick fix without having to update the whole theme?

Thanks :)

[alvinkonda]

Hello, my apologies for the late reply.

I have to see your store in order to define the issue, otherwise, there is not much that I can do for you, better yet, admin access to your theme would be even better.

Let me know

[darcemac]

Hi Alvin,

No worries at all.

Here is the store and product item in question - https://juluwarluartgroup.com.au/collections/fashion/products/long-sleeve-organic-tee-by-wimiya-woodley?variant=40967872872625

When selecting the first options, size Small and Medium, I can see via the console that the object titles and options are being added correctly. Once I start selecting more than those first 2 items, for example the sizes Large, X Large, XX Large, they all default to the title of XXX Large which is the last item.

[alvinkonda]

The problem is the naming of the product options. Currently, on that theme version, the product options script tries to find by include, meaning that "XX Large" and "XXX Large" all include "X Large" and so the script uses "X Large". If you can change the naming for those options it should be solved. I hope that makes sense. Unfortunately, there is not much that I can do as that theme version is obsolete at this point.

[darcemac]

Hey thanks for your response.

I notice on v3.1.0 that you've fixed the following issue;

• Options selector script doesn't work with 3 product options Options selector script doesn't work with 3 product options #66

I just don't get why on the v2.0 theme, within the product-options.js the following code isn't pushing the actual correct options select data?

el.addEventListener('change', () => {
            let selectedOptions = [];
            
            // Get selected options
            Array.from(optionSelectors).forEach(el => {
                selectedOptions.push(el.value);
            });

For me to update the whole theme is just crazy for this one feature. The v2.0 theme is only from Mar 2021

[darcemac]

FWIW new code below works.

       ```
        Array.from(optionSelectors).forEach(el => {
            selectedOptions.push(el.value);
        });

        console.log(el.value);

        // Get selected variant based on selected options
        let selectedVariant;
        const variantsJSON = JSON.parse(el.closest('.product').dataset.variantsJson);

        let selected = document.getElementById('option-select-size').value;

        variantsJSON.forEach(el => {
            if (el.title == selected) {
                selectedVariant = el;
            }
        });

        console.log(selectedVariant);

[alvinkonda]

Is your issue solved? Otherwise if you can give me admin theme access i can give it a look

[darcemac]

It all good thanks, using the above code I linked above has fixed the issue.

What I've done is change how the selected value is matched. Previously for some reason you had the title property has to include the entire array joined by a /, but now we get a match when the title equals the selected value.