How do I create anchors/links on a dynamic page using tags to filter?

Ask the community
, , , ,
1

Hey guys, I can’t get this to work and I need some help.
I am using Wix Editor and I have used CMS to create a collection for patterns/items. There are different categories within the page that are inside one collection called “all products” which are filtered by tags. I’d like for people to click on the link in the nav and lead them to this shop page and have it be filtered by wallpaper or fabrics, etc.

I’ve been trying to externally link directly to ‘shop > wallpaper’ but I can’t figure out what the best way to do this is.

I feel like I’m almost there because I’m able to link to the page but the filtered tag “wallpaper” isn’t working.

Thanks in advance!

Website URL for reference:
https://hello5198424.wixstudio.com/mairin-kareli-design

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("tagsTags", [filter])
            );

        } else {

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

            await $w("#dynamicDataset").setFilter(wixData.filter()
                .hasSome("tagsTags", [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("tagsTags", [opts[selected[0]].label])
        );

    });

});
3

I figured this out, pasting it below just in case someone needs it in the future.

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

var selected = [];
var opts = [];

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

    handleFilterFromUrl(); // Apply the filter when the page loads

    // Listen for URL changes (when clicking nav links)
    wixLocationFrontend.onChange((location) => {
        handleFilterFromUrl();
    });

    // Handle tag selection changes
    $w('#selectionTags1').onChange(() => {
        selected = $w("#selectionTags1").selectedIndices;

        if (selected.length > 0) {
            let selectedLabels = selected.map(index => opts[index].label);
            wixLocationFrontend.queryParams.add({ "filter": selectedLabels.join(",") });
        } else {
            wixLocationFrontend.queryParams.remove(["filter"]);
        }

        applyFilter();
    });
});

// Function to apply filtering based on the URL
function handleFilterFromUrl() {
    let query = wixLocationFrontend.query;
    selected = []; // Reset selection

    if (query.filter) {
        let filtersFromUrl = query.filter.split(",");
        let indices = opts.reduce((arr, element, index) => {
            if (filtersFromUrl.includes(element.label)) {
                arr.push(index);
            }
            return arr;
        }, []);

        if (indices.length > 0) {
            selected = indices;
            $w("#selectionTags1").selectedIndices = selected;
        }
    }

    applyFilter();
}

// Function to apply dataset filter
function applyFilter() {
    if (selected.length === 0) {
        $w("#dynamicDataset").setFilter(wixData.filter()); // Show all items
    } else {
        let selectedLabels = selected.map(index => opts[index].label);
        $w("#dynamicDataset").setFilter(wixData.filter().hasSome("tags", selectedLabels));
    }
}
1 Like