Issue with changing SPA dynamically-loaded content

[Shoxt3r]

Hi there,

I’m working on some CRO to change some strings within a mobile navigation as a test, using an SPA-based website and an external CRO tool.

The website is a Single Page Application and the mobile navigation is split into two sections - a “switch” area which allows customers to click between different sections such as Womens, Mens and Kids etc., and a lower section which is based on the menu chosen. When a menu is chosen (by default the Womens menu is loaded when the burger menu is activated), the menu options are loaded in dynamically.

I have created some code to change some strings based on a simple if statement and to work with the Womens and Mens menus. As far as I can tell, the website only loads in changes as necessary to improve performance, which means that for some reason my string changes are being activated on other menus, not just Womens and Mens as per the code. For example, if the “Jumpers” link is in position 2 on Womens and gets changed to “Knitwear” by my code, when I switch to Mens then the link in position 2 has the URL updated by the core code, but my string change remains which is incorrect. The code is working fine for the initial load.

As you can see I already have a Mutation Observer in place to track changes to the menu change, at which point the code to change the strings should be firing (and limited to if it detects the correct mobileNavName).

Does anyone have any thoughts as to how I could get around this issue so that the string changes maybe revert and then reapply as necessary?

// JavaScript

(function () {

let mobileNavSwitchPanel = document.querySelector(
    'div[data-testid="mobile-navigation-layer1"]'
);

const mobileNavRoundels = mobileNavSwitchPanel.querySelectorAll("ul li");
const mobileNavLowerSection = mobileNavSwitchPanel.nextElementSibling;
const mobileNavBottomBar = mobileNavLowerSection.querySelector(
    'div[data-testid="mobile-menu-bottom-bar"]'
);

// Check interaction with mobile navigation selector panel
observerNavCheck(mobileNavSwitchPanel);

// Check for changes within mobile navigation selector panel
function observerNavCheck() {

    // Check if nav roundel selected
    let mobileNavSwitchPanelObserver = new MutationObserver(function () {

        for (let mobileNavRoundel of mobileNavRoundels) {
            let mobileNavSelected = mobileNavRoundel.querySelector('div.rounded-full').classList.contains("border-solid");
            let mobileNavName = mobileNavRoundel.querySelector('span').innerText.trim().toLowerCase();

            if (mobileNavSelected) {
                // console.log(mobileNavName);

                // Targets only Women and Men nav
                if (mobileNavName === "women" || mobileNavName === "men") {

                  // Change the knitwear & Outerwear link on WW & MW
                    const mobileNavLowerSection = document.querySelector('div[data-testid="mobile-navigation-layer1"] + div.w-full.bg-white');
                    const mobileNavLinks = mobileNavLowerSection.querySelectorAll('a');

                    for(var mobileNavLink of mobileNavLinks) {
                        mobileNavLinkText = mobileNavLink.textContent.trim().toLowerCase();

                        if(mobileNavLinkText === "Jumpers") {
                            mobileNavLink.textContent = "Knitwear";
                            
                        } else if (mobileNavLinkText === "Coats") {
                            mobileNavLink.textContent = "Outerwear";
                        }

                    }
                } else {
                    // Do something else
                }
            }
        }
    }).observe(mobileNavSwitchPanel, { attributes: !0, subtree: !0 });
}

})();

Many thanks!