Preface
By default, your changes are cleared when the page reloads. 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 (if the element will remain after navigation)
- 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 been cleared)
You will, in other words, have to handle this manually. Below we will show examples of how to do this.
Adding an element to a part of the website that won't refresh
In this example, we show you how to add USPs to the top bar and how to make sure that these are only added once.
Before adding your elements you need to check that these aren't already applied. In the code below we check if the container element exists before we append it.
if(document.querySelector(".header-usp-container") === null) {
document.querySelector(".top-bar").insertAdjacentHTML("beforeend", "<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>");
}Notice that this is only needed if you add elements to a part of the website that won't be changed/refetched upon content change/navigation. Possible examples of elements are the header, footer, etc.
If you don't check if your element already has been added you will end up with duplications on new content load/navigation if the Audience is re-evaluated to TRUE (again).
In the example above we would probably want this header bar on all pages of the website so the Audience would be true on all pages. This would make your code execute every navigation so you would end up with a lot of header bars if you don't check if it's already applied.
Notice!
Let's say we don't want to add these on the checkout page, for example, so we set an Audience that becomes FALSE if the visitor navigates to the checkout. Then we need to remove our top bar manually as the header (probably) isn't refreshed upon navigation to the checkout. Read about how to undo the changes on Audience false.
Adding an element to a part of the website that will refresh
If you add elements to a part of the website that will refresh upon new content load/navigation you probably won't experience duplicated elements because your added element will be removed by the new content load and if Audience then evaluates to true the code will be executed and your element will be added.
Example:
You add USPs to a Product Detail Page (PDP) and navigate to another PDP. The product content is refreshed so your added USP:s disappears and then Audience is re-evaluated and becomes TRUE so your code is executed and your USP:s are added (again).
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 changes haven't already been applied if you are changing an element that won't be refreshed.
- Undo the changes on audience false if these are on elements that aren't updated on new content load/navigation