Redirect filtered URLs to anchors/section URL on mobile

Ask the community
, ,
1

Hey guys!

I’m back again with another question please… I’m not a Wix developer but have some knowledge on how things work!

I’m using the Wix Editor.

FOR CONTEXT

I have different dynamic pages for different categories of a photography portfolio that allow users to filter via the selection tags on desktop.

For example:

Jewellery Photography (Dynamic Page)-> Filter by Brand Name
Fashion Photography (Dynamic Page)-> Filter by Brand Name

…and the photos in the pro gallery change based on what they’ve chosen.

When each of these filters are selected, the URL updates to www.example.com/jewellery-photography?brand+name+1, meaning I can link to the brands externally now which is great!

However on mobile, I don’t want this functionality as I’d like users to see all images on the page when they arrive, and so I have created sections for each brand with Pro Gallery sliders that are hidden on desktop. I have used section URLs so the links to these are like:

www.example.com/jewellery-photography#brand+name+1

THE PROBLEM

On the home page, I have a big Pro Gallery of mixed photos taken, and each image links to the dynamic page but filtered with the relevant brand of the link they clicked on. For example clicking on an image that has the link www.example.com/jewellery-photography?brand+name+1 will take them to all photos of that brand on desktop. Obviously this doesn’t work for mobile because I’ve done it differently so I’ve been trying to find a way I can make this work on both.

I’ve been looking into redirecting the link on mobile but I have no idea how I would do it.

The redirect on mobile would need to go from:

www.example.com/jewellery-photography?brand+name+1
to
www.example.com/jewellery-photography#brand+name+1

so that it scrolls down to the relevant brand gallery on mobile. I feel like I have over complicated this a bit, but I’m pretty deep in there now and I’m just wondering if anyone out there has achieved similar?

I found the code below:

import wixWindow from 'wix-window';
if(wixWindow.formFactor === "Mobile"){
  [REDIRECT CODE HERE]
}

As this is a bit more complex than simply redirecting a page on mobile, I’m wondering if there’s a way to manually redirect an internal link on the page to the other within this using the mobile page code above? Is this even possible? I was hoping to put in the masterPage.js so that it works site-wide. Any other ideas would be totally welcome too.

Thanks so much in advance!

2

Hi Margot, it’s me again.

You’re going in the right direction! (:

Here’s the code - I’ve implemented it into the original code itself:

import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
import wixWindowFrontend from 'wix-window-frontend';

const formFactor = wixWindowFrontend.formFactor;
var selected = [];
var lastSelected = [];
var opts = [];

var query = wixLocationFrontend.query;

$w.onReady(async () => {

    await $w('#dynamicDataset').onReadyAsync();
    opts = $w("#selectionTags1").options;

    if (query.filter) {

        let filter = query.filter;

        var index = opts.findIndex(function (element) {
            return element.label === filter;
        });

        if (index == -1) {

            if (formFactor == "Mobile") {

                wixLocationFrontend.queryParams.remove(["filter"]);

            } else {

                lastSelected.push(0);
                selected = lastSelected;
                $w("#selectionTags1").selectedIndices = selected;

                wixLocationFrontend.queryParams.remove(["filter"]);
                wixLocationFrontend.queryParams.add({ "filter": [opts[selected[0]].label] });

                $w("#dynamicDataset").setFilter(wixData.filter()
                    .hasSome("brandTag", [opts[selected[0]].label])
                );
            }

        } else {

            if (formFactor == "Mobile") {

                wixLocationFrontend.queryParams.remove(["filter"]);
                wixLocationFrontend.to(wixLocationFrontend.url + "#" + filter);

            } else {

                lastSelected.push(index);
                selected = lastSelected;
                $w("#selectionTags1").selectedIndices = selected;

                await $w("#dynamicDataset").setFilter(wixData.filter()
                    .hasSome("brandTag", [filter])
                );
            }

        }

    } else {

        if (formFactor != "Mobile") {

            lastSelected.push(0);
            selected = lastSelected;
            $w("#selectionTags1").selectedIndices = selected;

            wixLocationFrontend.queryParams.add({ "filter": [opts[selected[0]].label] });

            $w("#dynamicDataset").setFilter(wixData.filter()
                .hasSome("brandTag", [opts[selected[0]].label])
            );

        }

    }

    $w('#selectionTags1').onChange((event) => {

        if (selected.length == 0) {

            selected = $w("#selectionTags1").selectedIndices;

        } else {

            lastSelected = $w("#selectionTags1").selectedIndices;
            lastSelected = lastSelected.filter(item => !selected.includes(item));
            selected = lastSelected;
            $w("#selectionTags1").selectedIndices = selected;

            if (formFactor == "Mobile") {

                wixLocationFrontend.queryParams.remove(["filter"]);
                wixLocationFrontend.to(wixLocationFrontend.url + "#" + opts[selected[0]].label);

            } else {

                wixLocationFrontend.queryParams.remove(["filter"]);
                wixLocationFrontend.queryParams.add({ "filter": [opts[selected[0]].label] });

                $w("#dynamicDataset").setFilter(wixData.filter()
                    .hasSome("brandTag", [opts[selected[0]].label])
                );

            }

        }

    });

});
3

Hi Pratham! :grin:

Thank you so much for your reply… again! :man_superhero:

I’ve been looking into this all day and really started getting tunnel vision with it. I figured some of it out but it just felt a bit hacky and unnecessary, and it was also MEGA slow. I much prefer the direction that yours is going, it makes waaay more sense.

So I just tried implementing the code you wrote, directly on this page: https://www.margotjakobson.co.uk/portfolio/london-jewellery-photographer

The URL isn’t changing when on mobile, but I’m not totally sure if I’m missing something or supposed to have changed anything as it all looks correct.

I previously used wix-window not really having much of an understanding, and I’m not totally sure what the difference is between that and wix-window-frontend (even though it sounds like it should be pretty self-explanatory, I have basic understanding), but could that play a part in it?

Honestly can’t thank you enough for the time you’ve put into helping me, you’re an absolute lifesaver :slight_smile:

4

This I believe is most likely due to the fact that you’ve set the selection tags to be hidden on mobile from the editor itself. Fo this - you’ll have to show the selection tags on the mobile version. But don’t worry, I’ve added the code to collapse (i.e. basically hide) the selection tags if the form factor is mobile, so the users will not see it anyways.

I did try manually going to
https://www.margotjakobson.co.uk/portfolio/london-jewellery-photographer#Common+Lines
but it is not scrolling to the section either, which it technically should - even without any code.

So in order to mitigate this issue, I’ll suggest that you change the ID of the sections from the code property panel on the left in this format:
If the filter on desktop is Common+Lines, then the name of the section on mobile will be Common-Lines (because the ID field only accepts alphanumeric characters).

Once you’ve correctly set this bit up, you won’t need section links or anchor links, the code should take care of it.

import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
import wixWindowFrontend from 'wix-window-frontend';

const formFactor = wixWindowFrontend.formFactor;
var selected = [];
var lastSelected = [];
var opts = [];

var query = wixLocationFrontend.query;

$w.onReady(async () => {

    await $w('#dynamicDataset').onReadyAsync();
    opts = $w("#selectionTags1").options;

    if (query.filter) {

        let filter = query.filter;

        var index = opts.findIndex(function (element) {
            return element.label === filter;
        });

        if (index == -1) {

            if (formFactor == "Mobile") {

                $w('#selectionTags1').collapse();
                wixLocationFrontend.queryParams.remove(["filter"]);

            } else {

                lastSelected.push(0);
                selected = lastSelected;
                $w("#selectionTags1").selectedIndices = selected;

                wixLocationFrontend.queryParams.remove(["filter"]);
                wixLocationFrontend.queryParams.add({ "filter": [opts[selected[0]].label] });

                $w("#dynamicDataset").setFilter(wixData.filter()
                    .hasSome("brandTag", [opts[selected[0]].label])
                );
            }

        } else {

            if (formFactor == "Mobile") {

                $w('#selectionTags1').collapse();
                let section = "#" + filter.replace(/ /g, "-");
                $w(section).scrollTo();

            } else {

                lastSelected.push(index);
                selected = lastSelected;
                $w("#selectionTags1").selectedIndices = selected;

                await $w("#dynamicDataset").setFilter(wixData.filter()
                    .hasSome("brandTag", [filter])
                );
            }

        }

    } else {

        if (formFactor == "Mobile") {

            $w('#selectionTags1').collapse();

        } else {

            lastSelected.push(0);
            selected = lastSelected;
            $w("#selectionTags1").selectedIndices = selected;

            wixLocationFrontend.queryParams.add({ "filter": [opts[selected[0]].label] });

            $w("#dynamicDataset").setFilter(wixData.filter()
                .hasSome("brandTag", [opts[selected[0]].label])
            );

        }

    }

    $w('#selectionTags1').onChange((event) => {

        if (selected.length == 0) {

            selected = $w("#selectionTags1").selectedIndices;

        } else {

            lastSelected = $w("#selectionTags1").selectedIndices;
            lastSelected = lastSelected.filter(item => !selected.includes(item));
            selected = lastSelected;
            $w("#selectionTags1").selectedIndices = selected;

            wixLocationFrontend.queryParams.remove(["filter"]);
            wixLocationFrontend.queryParams.add({ "filter": [opts[selected[0]].label] });

            $w("#dynamicDataset").setFilter(wixData.filter()
                .hasSome("brandTag", [opts[selected[0]].label])
            );

        }

    });

});

What’s more, the URL will now be standard and work seamlessly for all devices, i.e. Desktop and Mobile. For example, if anyone were to share this URL from their phone: https://www.margotjakobson.co.uk/portfolio/london-jewellery-photographer#Common+Lines
This would not have worked on desktop. But now it will automatically work on both, regardless of the form factor!

Do remember to remove the anchors / section links once this is working perfectly.

wix-window and wix-window-frontend are exaclty the same, the only difference being that wix-window is the older verison while wix-window-frontend is the newer version of the API, which is why it is recommended that you should use wix-window-frontend in your projects. (:

5

OH it works! Hallelujah!

That makes SOO much more sense than the path I was going down. Previously the section IDs didn’t have any separators, so I was adding URL mappings containing a regex pattern to match the desktop URL that corresponded with the mobile URL on the masterPage.js… so you can imagine how messy that got and it did not work seamlessly :joy:

Thank you SO much, is there an option to “buy a beer/coffee” anywhere? You’re a godsend!

Thanks so much again,
Kim (helping Margot out with her website)

6

Hey Kim!

I’m super glad to know that it worked out.

I am a self-taught developer and I’ve learnt how to get it right just like this - by asking the people in this awesome community whenever I get stuck at some point. Now that I’ve learnt how to code myself, all I’m doing is just giving back.

Thanks a lot, but your compliments alone are worth it all! :blush: