Hey guys, I’m super stumped on this one and wondering if anyone can help please.
I am using Wix Editor and I have used CMS to create a collection for a photography portfolio. There are different categories within the portfolio that I’ve made dynamic pages for (eg. Jewellery, Fashion, etc). Once they reach one of these dynamic page they then have the option to choose a brand name from the selection tags I’ve connected up, and then the images filter on click as expected. I have some code in place that allows for only one selection to be made at a time.
I’ve been trying to externally link directly to ‘Jewellery > Brand Name 3’ but I can’t figure out what the best way to do this is.
The URL doesn’t change when these selection tags are clicked on. I can’t find a way to add an anchor tag to filtered content on the dynamic page, only the default value, as I can’t change the value in the editor to add relevant anchors. I was trying to see if there was a way to select an anchor tag but I’m a little lost.
I’m a front-end developer but not a Wix developer (fairly new!), so whilst I have some understanding, it would be super appreciated if someone could shed some light please 
Also apologies if the answer is obvious, I’ve got tunnel vision.
Thanks in advance!
1 Like
Hi there!
Here’s one of the sites I’d worked on:
https://mjwebdesign2464.wixstudio.io/andrewclemo/
When you scroll down and click on one of the three boxes, it leads you to the dynamic page with the respective tag selected and the contents filtered based on the selection.
Is this what you’re looking for?
IT IS! Would you mind sharing how you did it please? You’re a legend, thanks so much for replying!
Certainly! (:
Here’s the code:
import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
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) {
filter = "All";
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("filterTags", [filter])
);
} else {
lastSelected.push(index);
selected = lastSelected;
$w("#selectionTags1").selectedIndices = selected;
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("filterTags", [filter])
);
}
}
$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("filterTags", [opts[selected[0]].label])
);
});
});
Just a brief overview of how it works:
This code includes the single selection functionality as well.
Here’s how the URL would be structured:
www.example.com/jewellery?filter=Brand+Name+1
www.example.com/jewellery?filter=Brand+Name+2
It uses the wix-location-frontend.query API to fetch the value of the filter query. Then it filters the database based upon the fetched value. For example, when a user lands on www.example.com/jewellery?filter=Diva+Premium+Jewellery, the code will filter the repeaters to show only those items which have the tag: Diva Premium Jewellery and will also select the respective tag.
2 Likes
Hi Pratham,
Firstly, thank you so so much!
I had read into the wixLocationFrontend and param query before but just found myself super stumped and this makes soo much more sense!
I’ve replaced the relevant code but for some reason, for example, when I go to the URL to website.co.uk/jewellery?brandTag=brand2, it takes me to the default filter set of website.co.uk/jewellery?brandTag=brand1.
I’m also finding if I go to website.co.uk/jewellery with no filter set, I have to click on a couple of filters to actually trigger it to start work.
Is there something here that you think I might have missed?
import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
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;
});
lastSelected.push(index);
selected = lastSelected;
$w("#selectionTags1").selectedIndices = selected;
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("brandTag", [filter])
);
}
$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(["brandTag"]);
wixLocationFrontend.queryParams.add({ "brandTag": [opts[selected[0]].label] });
}
$w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("brandTag", [opts[selected[0]].label])
);
});
});
Again thank you SO much, and no worries if you’re not able to look- you have been more than helpful already and I will continue to look into it!
Hi Pratham!
I just wanted to acknowledge your message and say a huge thank you- I did reply and had a couple of questions but it’s being reviewed for some reason 
Hopefully the message will come through soon, but just wanted to make sure you knew that I saw your message and was appreciative.
1 Like
You’re very welcome (:
Feel free to reach out to the community if you have any doubts!
Hi Pratham,
Thank you so much!
I’m not sure if yesterday’s message will get posted so I’ll try send it again-
I’m really grateful for your answer, it’s been super helpful! I’m a little stuck on a couple of bits though and I’m wondering if you might know if there’s something I may have missed here please?
import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
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) {
filter = "Brand 1";
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("brandTag", [filter])
);
} else {
lastSelected.push(index);
selected = lastSelected;
$w("#selectionTags1").selectedIndices = selected;
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("brandTag", [filter])
);
}
}
$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])
);
});
});
So the links are all updating to the relevant tag names and this works great! However when externally linking, the content isn’t changing from the default value content.
So for example, if I go to brand 2’s link, I’m finding that www.example.com/jewellery?brandTag=Brand+2 will take me to this URL but will display the first/default selection tag and content which is Brand 1.I don’t have an 'all ’ options so I changed this, but I’m suspicious this might play a part in it.
EDIT: I figured out where I was going wrong with the above problem. Thank you for the code!
I’m also finding if I go to www.example.com/jewellery with no filters set, that I have to click on a couple of filters to trigger the URL to update. I’m still looking into it but thought it worth an ask in case there was something obvious that I was missing
EDIT: Still trying to figure this one out. It works fine as external links which was the biggest part of the problem I was facing, so not an issue if there isn’t an easy resolution for this. I can continue playing around with the code
Thanks so much again for your help!
Hi again (:
So from what I see, if you’re going to the URL without a filter applied already, you want to display all the brands? That’s what my code is directed to do. Or do you want to display one particular brand as default in case there’s no filter applied?
Let me know, I’ll be happy to help you further.
Hi Pratham that’s so kind of you, thank you so much!
Sorry for any confusion on my part.
So I’m not wanting to display them all when a filter isn’t applied. I’ve selected the first brand as default and then I’m hoping to force it to display the last selected so that all images don’t display (another problem for another day). I understand that when you first reach the page the URL won’t change to the first brand which is fine, but when I click through the others tags it takes a couple of clicks to start working. Any pointers would be amazing please
import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
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) {
filter = "Abbott Lyon";
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("brandTag", [filter])
);
} else {
lastSelected.push(index);
selected = lastSelected;
$w("#selectionTags1").selectedIndices = selected;
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("brandTag", [filter])
);
}
}
$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])
);
});
});
Here you go:
import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
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) {
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 {
lastSelected.push(index);
selected = lastSelected;
$w("#selectionTags1").selectedIndices = selected;
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome("brandTag", [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])
);
}
$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])
);
});
});
This will select the first tag as default in case no filter is applied.
Oh that’s amazing! It worked perfectly- thank you SO much for your time and for helping me out, it’s really appreciated!
1 Like
