Filtering businesses by tag when clicking tag image on Home Page (Wix Studio)

Ask the community
, , , ,
1

Hi everyone,

I’m currently building a website using Wix Studio and I’m trying to implement tag-based filtering between two CMS collections, but I’m struggling to connect everything correctly.

My Collections

I have two collections:

1. Business Tags
This collection stores all the tags along with their images.
Fields include:

  • Tag Name

  • Tag Image

2. Registered Business
This collection stores all business information.
Fields include:

  • Business Name

  • Tags (linked to Business Tags collection)

  • Verified (Boolean)

  • Other business details

Current Setup

On the Home Page, I display the tag images from the Business Tags collection.
The tags are arranged horizontally in a repeater/grid, so users can visually browse categories.

What I Want to Achieve

When a user clicks a tag image on the Home Page, it should:

  1. Navigate to the Registered Business page

  2. Filter the list of businesses to only show businesses that contain that selected tag

  3. Still respect the default filter, where only Verified = true businesses are shown

Example

If a user clicks the “Furniture” tag on the Home Page:

  • They should be taken to the Registered Business page

  • The page should display only verified businesses tagged with “Furniture”

What I’ve Tried

I’ve attempted:

  • Passing tag information between pages

  • Filtering the dataset

  • Using reference fields

But I haven’t been able to correctly filter the businesses based on the clicked tag.

Question

What is the best way to pass the selected tag from the Home Page to the Registered Business page and filter the dataset accordingly in Wix Studio?

Should I use:

  • URL parameters

  • Dataset filtering

  • Velo code

  • Dynamic pages

Any guidance or examples would be greatly appreciated.

Thanks in advance!

2

I think code is the right approach here. You’ll need something similar to the following approach - although you’ll need to make alterations according to your setup.

// Home Page
import * as wixSiteLocation from '@wix/site-location';

$w.onReady(function () {
    $w("#repeater").onItemReady(($item, itemData, index) => {
        $item("#repeaterItem").onClick(async () => {
            await wixSiteLocation.queryParams.add({ "business": itemData._id })
			wixSiteLocation.location.to("/path-to-navigate-to")
        })
    })
});

And the page with all of the listings:

// Other page
import * as wixSiteLocation from '@wix/site-location';

$w.onReady(function () {
    const queryParam = await wixSiteLocation.location.query()
	const businessTagId = queryParam.business

	// Logic to filter data according to the ID that appears
});

This has the added benefit that you can share the filter page with the query param in the future without having to send people to the home - e.g. you want to send them to a “pre-filtered” page.

I’m not sure how you have your data connected currently, so can’t advise on how the filtering works.