From Static to Dynamic Pages

Hi there

I have reached the 100 page limit on my website. Because of this, I have set up a database and a dynamic layout, to slowly convert most of the static pages to dynamic ones.

This is what I have done:

  1. Created the database
  2. Populated the database with all necessary info
  3. The dynamic layout preview works well
  4. Published the dynamic page and database
    5) Set up redirects from the static pages to the dynamic ones (stuck here!)
  5. Delete the old static page (blocked)

I am stuck at the last step in the process. The redirects from the /old-url to the /dynamic-url work, when I enter the dynamic url directly in the browser.

However, when I click on any of the links within my website that point to the “old-url”, the redirect does not happen.

What is the recommended process here? Do I really have to go throughout my website and update every single “old-url” to the new one?

Thanks for any comments or tips.

Bjorn

How are you redirecting to the dynamic pages? What do the URLs look like. Keep in mind the dynamic pages are data-driven and that each dynamic page is connected to a collection in your content manager.

See the documentation on Dynamic Pages for more information. The article Creating a Unique Dynamic Page URL might be helpful for your case.

I am using the SEO tools 301 redirect settings in the website settings. These do work when I enter the old url directly into the browser. When I click an existing link within the website however, I am still being taking to the old url. No redirect happens? Any ideas?

301 redirects works only on your first visit to the site by that URL, what I do recommend is creating a function on the masterPage.js file that checks if the visited page is on the list or not, and redirect visitors to the new one, here’s an example.

Create a database with the old paths and the new ones, and create a function that will check the visited page, then, redirect the visitors if necessary.

Here’s how:

// Backend module: seo.jsw;
import wixData from 'wix-data';

export function checkPath(pathArray) {
    let path = '';
    
    // Build the path from the path array:
    pathArray.forEach(item => {
        if (path.length > 0) {
            path = `${path}/${item}`;
        } else {
            path = `/${item}`;
        }        
    })
    
    // Now we need to compare the path to see it does have new URL or not
    return wixData.query('redirections').eq('oldPath', path).find().then((x) => {
        if (x.length > 0) {
            let page = x.items[0];
            if (typeof page.newPath === 'string') {
                // if there's a new path, return it
                return Promise.resolve(page.newPath);
            } else {
                // Otherwise, don't do anything
                return Promise.reject();
            }
        } else {
            // if no value was found, nothings needs to be done
            return Promise.reject();
        }
    }).catch(err => {
        // if the query failed, we need to know why.
        console.error(err);
        return Promise.reject(err);
    })
}
// Frontend: masterPage.js
// The code in this page run each time a new page is opened.

// Import our function from the backend
import { checkPath } from 'backend/seo.jsw';

// Import wix-location module to get the path.
import wixLocation from 'wix-location';

$w.onReady(() => {
    // Call the function when the page is ready, and only if there's a path
    let path = wixLocation.path;
    if (path.length > 0) {
        checkPath(wixLocation.path).then((newPath) => {
            wixLocation.to(newPath);
        })
    }
    
})

This way, you only write the code once, and can easily modify it whenever you want, instead of having to modify +100 pages, and also, you can easily add or remove pages, edit their paths without accessing the editor.

You’re in control!

Hope this helps~!
Ahmad

Hi there

I tried the above.
This works really well, as long as the “old-url” page exists. When the “old-url” page exists, I can briefly see the old page and then the redirect happens to the new page.

However, as soon as I delete the static page (the old url), it doesn’t work anymore. I am not redirected to the new page anymore and instead I get an “error” in the debug console mode.

Any other suggestions? The whole reason I am doing this is to slowly transition static pages to dynamic ones, so I can stay under the 100 page limit. I do not want the SEO to be affected.

How do others do this transition to dynamic pages, without losing their old urls? Is the approach I am taking correct?

Bjorn

@ahmadnasriya That was a great suggestion wrt to the redirect code on the masterpage.js.
Unfortunately, the code on masterpage is not executed whenever you click a link to an old page that does not exist anymore. Is there another way to achieve this besides the 301 redirects (which only works on first site load) and masterpage solution (which only works on existing pages)?