How to setup links on my website to actually reload every navigated page ?

Ask the community
,
2

Hi there :wave:t2: This happens because of the way that Wix sites are set up to be Single Page Applications, rather than Multi Page Applications.

Something that I do to create an indication that the page is changing is create a container box (with “loading” text, spinning gif, whatever you want), that is pinned to the screen and hidden on load.

I then store all my button elements in an array like so:

const btnElm = [
    // These are all my button ID names
    "btnCompleted",
    "btnResume",
    "btnBeginUnit",
    "image1",
]

And use this code to show the box when each button is clicked, so users get a sense that something is happening.

btnElm.forEach(btnID => {
        let url = $w("#" + btnID).link; // Gets link for each button
        $w("#" + btnID).onClick(() => { // Click event for all buttons
            
            $w('#loadingBox').show(); // Shows loading message
            wixLocation.to(url); // Navigates to link of button
    })
})

So the final code is like this:

import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

const btnElm = [
    // These are all my button ID names
    "buttonName1",
    "buttonName2",
    "buttonName3",
    "buttonName4",
    // Etc
]

$w.onReady(function () {
    btnElm.forEach(btnID => {
        let url = $w("#" + btnID).link; // Gets link for each button
        $w("#" + btnID).onClick(() => { // Click event for all buttons
            $w('#loadingBox').show(); // Shows loading message
            wixLocation.to(url); // Navigates to link

            if (wixWindow.formFactor === "Mobile") { 
            // disables on mobile, since pinned elements don't work there
                $w("#loadingBox").hide();
                wixLocation.to(url);
            }
        })
    })
})

I hope this can help you!