Shopify Question posted in
The Shopify help center can be found here.

Trying to move an element created after document load into another element – Shopify

I’m working on this website: https://nuebar.com/ and I’ve just installed an app by shopify the places their currency selector right at the very bottom of the site, and I’m trying to move it into a div class .CSPosition that’s been placed in a list item next to the current currency selector in the header.

Doing this because none of my international customers are finding the selector at the bottom of the site and the one at the top of the site doesn’t change checkout currency, so will be removing it once I can move the one at the bottom successfully.

I’ve written this:

document.getElementsByClassName("locale-selectors__container").addEventListener("load", moveUp);
function moveUp () {
    "use strict";
    $(".locale-selectors__container").insertBefore(".CSPosition");
}

to try and move it once it’s been loaded since it’s being loaded by a third party but it’s not working.

I’ve also tried:

$(".locale-selectors__container").load(function(){
    $(".locale-selectors__container").insertBefore(".CSPosition");
});

I’ve also tried doing it when everything has loaded:

$( window ).on(function(){
    $(".locale-selectors__container").insertBefore(".CSPosition");
});

Is it because of limitations with elements inserted by a third party of am I making stupid mistakes? Is there something wrong with my two methods?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up with this:

    setTimeout(function(){
     
        console.log('DOM fully loaded and parsed');
        const source = document.querySelector('.locale-selectors__container');
const destination = document.querySelector('.CSPosition');
destination.append(source);
      }, 5000);

    The setTimeout was the only way to circumvent and document/window/DOM loads that the app has on their end. Now onto styling.


  2. 0

    setTimeout example

    document.addEventListener('DOMContentLoaded', (event) => {
    waitForSource();    
});

function waitForSource(){
    setTimeout(function(){
        const source = document.querySelector('.locale-selectors__container');
        if (!source) {
            waitForSource();
        }else{
            const destination = document.querySelector('.CSPosition');
            destination.append(source);
        }
    }, 350); 
}

    setInterval example

    let checkSourceInterval = null;
document.addEventListener('DOMContentLoaded', (event) => {
    checkSourceInterval = setInterval(() => {
        const source = document.querySelector('.locale-selectors__container');
        if (!!source) {
            const destination = document.querySelector('.CSPosition');
            destination.append(source);
            clearInterval(checkSourceInterval);
        }
    }, 350);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search