Dynamic websites (SPA)

October 02, 2023 08:42

Coding dynamic pages is a bit trickier than regular ones. There are things you have to think about.

On a non-dynamic website you always get a clean slate for your code on each navigation. In other words, the whole page reloads on navigation and then your code is added to the page (if Audience is true). This is very convenient as all elements, functions, classes etc that you’ve added are wiped upon each navigation.

On a dynamic website this is not the case. If you have made changes to elements that won’t be refreshed/re-fetched, then these changes will remain after navigation. This means that if Audience becomes false the javascript changes will remain, but the CSS changes will be removed (as we remove those automatically). If Audience is true (again) after navigation, you might end up with duplications of your changes (if you add elements, events, etc. and do not handle that in your project code)

Some common elements that usually aren’t refreshed/re-fetched upon navigation is the header, nav and footer. Added classes and attributes to body and html tags will most likely also remain.

Functions that you add will still be there after navigation to another page (even if Audience is FALSE) and will be added again (duplicated) if Audience is TRUE (unless you make sure in your code that this doesn't happen).

NOTE! "Remember! An added function is always there".

So for dynamic websites you need to make sure that there will be no duplicates of your functions, that elements that you add are not added again (if they already have been added), and that added elements, functions, and classes/IDs/attributes are removed when Audience is FALSE.

You have to have a different mindset when you code on these pages. Sometimes you have to write code in a Custom fact, in GOALS, just to undo your changes.

Here below are some more specific common things to keep in mind.

The WYSIWYG-editor does not support dynamic websites

You can't use WYSIWYG-editor on dynamic websites. This is because the WYSIWYG-editor can't handle dynamically added/removed content. In other words, you might crash the website because you do changes that make the dynamic content stop loading.

Adding an element

Check that the element does not already exist so the element is not added multiple times (important for elements that do not change during navigation, eg header, body etc)
Remove them if the audience is FALSE, for example if we are going to show something in the header a specific page but not on any other page
- You must create a goal in "Goals" with a Custom fact that you code your undo-code in
  - Create a goal (name it, for example, "Code only")
  - Add a "Custom fact"
  - Set an if statement where you call symplify.getTotalAudienceResult(projectID); (where projectID should be your project ID) and check that Audience is false, and if so undo your changes (remove added elements, functions, attributes, etc)

Classes in body

Always remove them on load (because they will follow on all pages)
- For example, a class that is added to <body> to toggle an element, during navigation it will remain in the body if you did not toggle it off (removed the class) on the previous page.
Remove them if the audience is FALSE (because they will follow on all pages)
- You must create a goal in "Goals" that you code in
  - Create a goal (name it, for example, "Code only")
  - Add a "Custom fact"
  - Set an if statement where you call symplify.getTotalAudienceResult(projectID); (where projectID should be your project ID) and check that Audience is false, and if so undo your changes (remove added elements, functions, attributes, etc)

Tip: If possible try adding Classes to elements that you know will change during navigation. Because then you can avoid what is written above.

Functions

What is special about dynamic pages is that when you add a function, it will always be there even during navigation "Remember! An added function is always there".

So for each new page view, you add another identical function, which creates duplicates of the function. Therefore, it is important to code in a way that this does not happen.

For example:

A click function that you add will be clicked 2 times on page view 2, page view 3 will be clicked 3 times, etc.
The same for, for example, an Observer, Resize function, scroll function. It is also important to ensure that these are not run when audience is FALSE

Observer (window.variableName)

To always start by removing/disconnect the observer (avoid duplicating the observer)
To access these functions and avoid duplicates, you must set the function in a window.variableName, so you can access them and disconnect/remove.
- It is very important that the variable name is unique (include the project ID in the variable name) (See code below)
Disconnect observer if needed if audience is FALSE (eg. observer the shopping cart and the test should only be run on PDP)
- You must create a goal in "Goals" that you code in
  - Create a goal (name it, for example, "Code only")
  - Add a "Custom fact"
  - Set an if statement where you call symplify.getTotalAudienceResult(projectID); (where projectID should be your project ID) and check that Audience is false, and if so undo your changes (remove added elements, functions, attributes, etc)

var sg_element_obs = document.querySelector('#main-content');


if(window.sg_observer_body_192519795 !== undefined) {

    window.sg_observer_body_192519795.disconnect();
}

if(sg_element_obs !== null) {
    window.sg_observer_body_192519795 = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {

            } 
        });
    });
    
    window.sg_observer_body_192519795.observe(sg_element_obs, {
        childList: true
    });
}



/******* In GOALS (Disconnect observer if needed, if audience is FALSE *********/

if(symplify.getTotalAudienceResult(projectID) !== undefined) {
    if(symplify.getTotalAudienceResult(projectID) === false) {
        if(window.sg_observer_body_192519795 !== undefined) {
        
            window.sg_observer_body_192519795.disconnect();
        }
    }
}

/*********************************************************/

Click function (elements that we create)

Make sure that no multiple clicks are triggered
Add click function where you check in the if statement that the element you added does not already exist (to run the click function once)
Or to just clone the node, which will remove all event listeners (https://stackoverflow.com/questions/9251837/how-to-remove-all-listeners-in-an-element)
In jQuery, we just put an .off ("click") before we put an on. ("Click")
Or if there are other options to remove the event listener (if the element has it) before setting it.

Click function (elements that are already on the page)

Make sure that no multiple clicks are triggered (example if you want to add a click on a tab/drop down, so it doesn't happen 2 times, then it will open and close it at the same time)
An example could be that you add a class to the element you want to add a click function.
- Check with an if statement if this class does not exist on the element
- Add the class on the element
- Add a click function

This above usually applies to elements that don’t change/are replaced during navigation, which are usually found in the header or footer. but some dynamic pages sometimes do not replace the entire PDP page during navigation, but for example only replace the content of the various elements, eg tab, image carousel, etc. This can sometimes result in multiple clicks.

E.g. the tab button called “product information” will not be changed from PDP to another PDP.

If the element you click on is replaced during navigation, you probably don't need to think about what is written above.

Scroll functions and resize functions (window.variableName)

To always start by removing/disconnect the scroll functions and resize functions you add (avoid duplicating these functions)
To access these functions and avoid duplicates, you must set the function in a window.variableName, so you can access them and disconnect/remove.
- It is very important that the variable name is unique (include the project ID in the variable name) (See image and code below)

Remove event listener when audience is FALSE
- You must create a goal in "Goals" that you code in
- Create a goal (name it, for example, "Code only")
- Add a "Custom fact"
- Set an if statement where you call symplify.getTotalAudienceResult(projectID); (where projectID should be your project ID) and check that Audience is false, and if so undo your changes (remove added elements, functions, attributes, etc)

window.removeEventListener('scroll', window.scrollFunction_192519795);


window.scrollFunction_192519795 = function() {
    
};

window.addEventListener('scroll', window.scrollFunction_192519795);


/******* Code in GOALS *********/

if(symplify.getTotalAudienceResult(projectID) !== undefined) {
    if(symplify.getTotalAudienceResult(projectID) === false) {
        window.removeEventListener('scroll', window.scrollFunction_192519795);
    }
}

/*********************************************************/

Other issues to consider

Sometimes it can happen that when you use the browser's back/forward button, the script can run too fast/slow, so that your changes don't work correctly. This can usually be solved by using an Observer for the elements you change.

IMPORTANT! If you code a test on PDP and go from PDP to PDP (upsell product) and go back to PDP (you came from), check that your changes have been executed and that the correct information is printed for the correct product you are looking at.