Sure! I’ll help you out. The fact that you’ve had prior experience with other coding languages will only make it easier to follow (:
This kind of filtering logic is controlled using query parameters.
Take a look at the site of the other user where this code is running: https://www.margotjakobson.co.uk/portfolio/london-jewellery-photographer
On the top, you’ll see a bunch of selection tags, just like you have in your Directory page. Switching the tags filters the images in gallery. When you click on the tags, take a look at the URL bar of your browser. You will see that the URL of the site has something added to the end, for example:
www.mysite.com?filter=Category+One
When you change the tag, it switches to:
www.mysite.com?filter=Category+Two
These are known as query parameters. These consist of a key=value pair and are widely used to pass along information from one page to another page, or even one website to another.
In your case, you want to link a box on your homepage / landing page which should take the user to your Directory page with a particular filter applied. This is a perfect use case for query params.
The code that I’ve provided below will go on your Directory page. What it does is that it uses the wix-location-frontend API to figure out if a category filter has been passed along in the form of a query parameter, and if yes, it fetches the filter and applies it to the content on your Directory page.
So lets say if a user clicks on the SHOPPING box on your home page, you will need to link it to the directory page using a URL, like so:
https://info787678.wixsite.com/mysite/directory-1?filter=SHOPPING
For Food & Drink, it would be
https://info787678.wixsite.com/mysite/directory-1?filter=FOOD+%26+DRINK
(The and symbol ‘&’ is encoded as %26 in URLs; the + symbol is for space. Words are case sensitive and should exactly match its corresponding value in the CMS).
You won’t need to add any code on your home page. What I would recommend is first add the code on your directory page, publish it and copy the URLs for each tag from the live site, and link them to the boxes on your home page. This is only a one-time setup that you’ll need to do for each new category box that you add to your Home page.
Here’s the code for your Directory page:
import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';
var tagsColumnId = "brandTag" // Replace this with the field ID of your tags column in your CMS database.
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) {
wixLocationFrontend.queryParams.remove(["filter"]);
} else {
lastSelected.push(index);
selected = lastSelected;
$w("#selectionTags1").selectedIndices = selected;
await $w("#dynamicDataset").setFilter(wixData.filter()
.hasSome(tagsColumnId, [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(tagsColumnId, [opts[selected[0]].label])
);
});
});
Simply replace the existing code that you have added with this one. Since my code contains the single tag selection functionality as well.
The words that you see highlighted in green are your element IDs. In Wix you have an ID for each element, for example the ID of your selection tags would be #selectionTags1 by default. You can view or change the element’s ID by keeping the code panel open and clicking on it, and it will show up on the Properties panel on the right.
If you get a red underline in any of these IDs, make sure you change them in the editor. If you do not see any red lines in your code, that means it should run as expected.
Similar to element IDs, Wix has a unique ID for your CMS databases and a unique ID for every column / field within a database. So you’ll need to add the field ID of your Tags column in the code for it to work. To find the field ID for your Tags column, open up your CMS database while Dev Mode is on, and click on the column header. Copy the fieldId and paste it in the code where I’ve marked with a comment.
Once all of this is done, Publish your site and test it out. If you have followed all of the steps correctly, it should work perfectly, like it does in the example website I’ve linked above. Whenever you switch the tags, the URL should change, and you can copy-paste these URL links and add these to your homepage - or you can even link them externally and it will filter automatically based on the URL.
Happy coding!