Adding/changing an element

Preface

By default your changes are cleared when the page reload. You get a "clean slate" for your code every time the visitor navigates. On dynamic websites a reload of the page is never done because new content is fetched dynamically. This can cause issues if you do changes on elements that do not refresh (header, footer, added attributes on body, etc.).

This can cause;

• Duplications of your added functions
• Duplications of your added elements
• Added elements and attributes that still exist after navigation
• Intervals and timeouts that keep running after navigation (if they haven't be cleared)

You will, in other words, have to handle this manually. Below we will show examples of how to do this.

Important! 

Make sure you've added the keyword /* sg_no_proxy */ first in your code. See further information.

Adding an element

In this example, we show you how to add USPs to the top bar securely and how to make sure that these are only added once.

When adding/changing an element on a dynamic website you need to check that the element(s) you want to change/tie your code to exist before you make your changes. This because you won't get a Document ready telling you it's safe to run your code (except, of course, on the first load).

The easiest way to do this is by setting an interval that checks if the element(s) exists and then clear the interval when the element is found and do the changes. You can also use a Mutation Observer to act on changes in the DOM.

When you add an element there are several things you need to do:

• Create a window variable array where you can push your intervals / timeouts to be able to clear these later.
  • It's really important that this has a unique name because this will have a global scope and thus will be reachable by all projects.

window.sg_clear_array_192509493 = [];

• Make sure the element you tie your changes to exists before you execute the code that adds the USPs and clear the interval.
  • This is done with an interval and an if statement

var add_top_bar_usps_192509493 = setInterval(function (){
    if($('.top-bar').length > 0) {
        clearInterval(add_top_bar_usps_192509493);
        if($(".header-usp-container").length < 1) {
            $(".top-bar").append("<div class='header-usp-container'>" +
                "<ul>" +
                    "<li><i class='fa fa-check'></i><span>Free shipping</span></li>" +
                    "<li><i class='fa fa-check'></i><span>30 days warranty</span></li>" +
                    "<li><i class='fa fa-check'></i><span>Fast delivery</span></li>" +
                "</ul>" +
            "</div>");
        }
    }
},10);

• Make sure the element you want to add doesn't already exist before you add it
  
  • This is needed if you add elements to a part of the website that won't be changed upon content change/navigation. Possible examples of elements are the header, footer, menu, etc.
  • In lack of a reload of the entire page the additions that you make will still be there when new content is fetched and thus your code will be executed when these changes already have been made, and this can cause duplications. 

if($(".header-usp-container").length < 1) {
    $(".top-bar").append("<div class='header-usp-container'>" +
        "<ul>" +
            "<li><i class='fa fa-check'></i><span>Free shipping</span></li>" +
            "<li><i class='fa fa-check'></i><span>30 days warranty</span></li>" +
            "<li><i class='fa fa-check'></i><span>Fast delivery</span></li>" +
        "</ul>" +
    "</div>");
}

• • If you don't check if your element already has been added you will end up with duplications on new content load / navigation

• After every interval / timeout push it to the window variable array.

window.sg_clear_array_192509493.push(add_top_bar_usps_192509493);

• Always start with clearing your set intervals/timeouts in the code to avoid issues and unnecessary ticking intervals/timeouts.
  • If these aren't cleared for some reason before content change / navigation these can keep running in the background and possibly cause issues / make changes when you don't want to.
  • It's important that this is done first in the code before you set the window variable array.

for(var x in window.sg_clear_array_192509493) {
    clearInterval(window.sg_clear_array_192509493[x]);
    clearTimeout(window.sg_clear_array_192509493[x]);
}

• Set a timeout that will clear all your intervals after x seconds if these for some reason aren't cleared. Push this timeout to the window variable array as well to make sure this is also cleared on new content load / navigation.

var sg_clear_timeout_192509493 = setTimeout(function (){
    clearInterval(add_top_bar_usps_192509493);
},5000); 
window.sg_clear_array_192509493.push(sg_clear_timeout_192509493);

• Handle Audience false
  • If you add elements to a part of the website that won't be updated these elements won't be removed/cleared upon new content load / navigation. You need to manually remove these.

Full code example (adding USPs in the top bar)

Here's the full code example on how to add USPs in the top bar on a dynamic website. Notice that we also use the /* no_doc_ready */ keyword to avoid flickering by executing the code faster on the first load.

/* no_doc_ready */
/* sg_no_proxy */

// Always start with clearing the intervals and timeouts that might be running from previous content load.
for(var x in window.sg_clear_array_192509493) {
    clearInterval(window.sg_clear_array_192509493[x]);
    clearTimeout(window.sg_clear_array_192509493[x]);
}


// Set a global array where you add your intervals and timeouts to be able to clear these later.
window.sg_clear_array_192509493 = [];


// 1. Set an interval that checks if the element that you want to change exists.
// 2. Upon your change add a class so that you can check if the change has happend. This is to make sure that your changes aren't made multiple times on content change (navigation). This due to the lack of page reload (which clears any changes).
// 3. We add the interval to the window array to be able to clear it if needed after the user navigated. Otherwise there is a risk for (multiple) ticking intervals because the page is never reloaded.
var add_top_bar_usps_192509493 = setInterval(function (){
    if($('.top-bar').length > 0) { // 1.
        clearInterval(add_top_bar_usps_192509493);
        if($(".header-usp-container").length < 1) { // 2.
            $(".top-bar").append("<div class='header-usp-container'>" +
                "<ul>" +
                    "<li><i class='fa fa-check'></i><span>Free shipping</span></li>" +
                    "<li><i class='fa fa-check'></i><span>30 days warranty</span></li>" +
                    "<li><i class='fa fa-check'></i><span>Fast delivery</span></li>" +
                "</ul>" +
            "</div>");
        }
    }
},10);
window.sg_clear_array_192509493.push(add_top_bar_usps_192509493);// 3. 


// 1. We clear the latest interval after 5 seconds if this hasn't been cleared.
// 2. We add the timeout to the window array to be able to clear it if needed after the user navigated. Otherwise there is a risk for the timeout running on the new content because the page is never reloaded.
var sg_clear_timeout_192509493 = setTimeout(function (){
    clearInterval(add_top_bar_usps_192509493); // 1.
},5000); 
window.sg_clear_array_192509493.push(sg_clear_timeout_192509493); // 2.

Changing an element

When doing changes to or moving an element you need to do the same things as if you add an element.

• Check that the element you tie the changes to exist before making the changes.
• Check that these changes haven't already been made
• Handle your intervals and clear these so that they do not keep running in the background.
• Undo the changes on audience false if these are on elements that aren't updated on new content load / navigation