Conditional logic for variant options display

[TrendBlend]

Hello,

I’m facing a problem with this code for mobile phone only, on desktop it works perfectly.

document.addEventListener('zrx-satc-loaded', function() {
    function isMagCharge() {
        const productTitleElement = document.querySelector('.zrx-sticky-atc-product-title');
        console.log('Product Title:', productTitleElement ? productTitleElement.textContent : 'Element not found');
        return productTitleElement && productTitleElement.textContent.includes('MagCharge');
    }

    function updateVariantSelectors() {
        if (!isMagCharge()) {
            console.log('Not MagCharge, exiting function.');
            return;
        }

        const snoerSelect = document.querySelectorAll('.zrx-sticky-atc-select')[0];
        const kleurSelectWrapper = document.querySelectorAll('.zrx-sticky-atc-variant-option-wrapper')[1];
        const aansluitingSelectWrapper = document.querySelectorAll('.zrx-sticky-atc-variant-option-wrapper')[2];

        console.log('Snoer Select:', snoerSelect);
        console.log('Kleur Select Wrapper:', kleurSelectWrapper);
        console.log('Aansluiting Select Wrapper:', aansluitingSelectWrapper);

        if (!snoerSelect || !kleurSelectWrapper || !aansluitingSelectWrapper) {
            console.warn('Een of meer van de variantselectoren kunnen niet worden gevonden.');
            return;
        }

        const snoerValue = snoerSelect.value;
        console.log('Snoer Value:', snoerValue);

        // Handle visibility based on the 'Snoer' value
        if (snoerValue === 'Geen Draad') {
            kleurSelectWrapper.style.display = 'none';
            aansluitingSelectWrapper.style.display = 'block';

            setTimeout(() => {
                setAansluitingToIOS();
                hideGeenAansluitingOption();
            }, 100);

        } else if (['1m Draad', '2m Draad', '3m Draad'].includes(snoerValue)) {
            kleurSelectWrapper.style.display = 'block';
            aansluitingSelectWrapper.style.display = 'block';

            const kleurSelect = kleurSelectWrapper.querySelector('.zrx-sticky-atc-select');
            kleurSelect.addEventListener('change', function() {
                if (kleurSelect.value) {
                    aansluitingSelectWrapper.style.display = 'block';
                } else {
                    aansluitingSelectWrapper.style.display = 'none';
                }
            });

            setTimeout(() => {
                showGeenAansluitingOption();
            }, 100);
        }
    }

    function setAansluitingToIOS() {
        const aansluitingSelect = document.querySelectorAll('.zrx-sticky-atc-variant-option-wrapper')[2].querySelector('.zrx-sticky-atc-select');
        if (aansluitingSelect) {
            aansluitingSelect.value = 'iOS Aansluiting'; // Set to 'iOS'
            console.log('Aansluiting set to iOS');
        }
    }

    function hideGeenAansluitingOption() {
        const aansluitingSelect = document.querySelectorAll('.zrx-sticky-atc-variant-option-wrapper')[2].querySelector('.zrx-sticky-atc-select');
        if (aansluitingSelect) {
            Array.from(aansluitingSelect.options).forEach(option => {
                if (option.text.includes('Geen Aansluiting') || option.text.includes('Alle Aansluitingen')) {
                    option.style.display = 'none';
                    console.log('Option hidden:', option.text);
                }
            });
        }
    }

    function showGeenAansluitingOption() {
        const aansluitingSelect = document.querySelectorAll('.zrx-sticky-atc-variant-option-wrapper')[2].querySelector('.zrx-sticky-atc-select');
        if (aansluitingSelect) {
            Array.from(aansluitingSelect.options).forEach(option => {
                if (option.text.includes('Geen Aansluiting') || option.text.includes('Alle Aansluitingen')) {
                    option.style.display = 'block';
                    console.log('Option shown:', option.text);
                }
            });
        }
    }

    // Observe for DOM changes if the content is dynamically loaded
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList' || mutation.type === 'attributes') {
                updateVariantSelectors();
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Initial update
    updateVariantSelectors();

    // Add event listener for changes in the 'Snoer' selector
    const snoerSelect = document.querySelectorAll('.zrx-sticky-atc-select')[0];
    if (snoerSelect) {
        snoerSelect.addEventListener('change', updateVariantSelectors);
    }
});

I’ve put this code in a code editor from an app called Zoorix Sticky ATC for my add to cart button which is inside a widget with my variant selectors.

I got this code for not displaying a variant selector but also to hide some variants inside of a variant selector and it is working perfect on desktop, but when I try it on phone the variants inside of the variant selector are not translated.

It only works for Dutch language right now, so set language to Dutch when trying it please. URL: MagCharge – TrendBlend. When you set the first variant selector on the bottom of the screen to ‘Geen Snoer’ the menu options of the last variant selector: ‘Alle Aansluitingen’ and ‘Geen Aansluiting’ should be hidden, but are not hidden. I ONLY have this problem on phone, on desktop it works.

Kind regards,

Stef

[PaulNewton]

@TrendBlend you need to narrow this down define the device specs, etc and make a minimum reproducible example

https://stackoverflow.com/help/minimal-reproducible-example , no headers, no other apps, bare metal as possible.

There are several console errors on the page so it can be near impossible to narrow something like this down without easy reproducibility when such unknowns are in play that have to be dug through.

FYI: it at least works on mobile emulation in chrome.

Which likely means device, or browser specific issue especially if using safari, which starts going into cross browser testing which is beyond a simple forum post to narrow down.

Good Hunting.

[TrendBlend]

Hello,

Problem Details:

• The script should hide specific options in the variant selector when ‘Geen Draad’ is selected.
• This functionality is working on desktop but not on mobile devices.
• The page is set to Dutch language, so please ensure this is taken into account when testing.

Look when ‘Geen Draad’ is chosen, ‘Alle Aansluitingen’ en ‘Geen Aansluiting’ should not be visible. It works for desktop, but somehow does not work for mobile phone.