Make different categories or filter tags on repeater grid

Ask the community
, , , ,
1

I’m having trouble with
I would really like to make my own portfolio on wix and I am looking for a filter tag solution in order to filter certain projects depending on their given tag. My inspiration for my own website is the french studio Fago website: https://www.studiofago.com/

the site uses different tags in order for the potential client to filter through the online portfolio depending on what they are looking for.
I would like to use some similar tags such as:

  • Illustration
  • Animation
  • Brands
  • Graphic Design
  • Personal
    and finally:
  • All

I have been trying to solve this problem with chat gpt and it suggested me to use some code. Note: I have absolutely zero experience in coding so I have just been trying to follow a step by step guide but appear to be stuck somewhere.
the code it suggest is:

import wixData from 'wix-data';




$w.onReady(function () {

// Define your tags and matching buttons

const categories = [

{ id: "#btnAll", tag: "all" },

{ id: "#btnIllustration", tag: "illustration" },

{ id: "#btnAnimation", tag: "animation" },

{ id: "#btnBrands", tag: "brands" },

{ id: "#btnPersonal", tag: "personal" },

{ id: "#btnGraphicDesign", tag: "graphic design" }

];




const repeater = $w("#projectsRepeater");

const dataset = $w("#portfolioDataset");




// Check that buttons exist before attaching events

categories.forEach(category => {

if ($w(category.id)) {

$w(category.id).onClick(() => {

const selectedTag = category.tag;




if (selectedTag === "all") {

dataset.setFilter(wixData.filter());

} else {

dataset.setFilter(wixData.filter().hasSome("tags", [selectedTag]));

}




// Optional: add active state styling

categories.forEach(cat => $w(cat.id).removeClass("activeTag"));

$w(category.id).addClass("activeTag");

});

} else {

console.warn("Button not found:", category.id);

}

});

});

Working in
I al working in Wix Studio Editor

Site link
This is the test link.

Extra context
I have been working with buttons for the visual of the tags, each button has a name referring to what is written in the code. so for example the ID for the button Illustration is btnIllustration etc.

the tags do not seem to work as I wanted it (basically the same as the reference website). And I am wondering if I am doing something obviously wrong.

Could anyone help me ?

Thanks in advance,

Sarah H

2

Hi Sarah,

For your code to work, your variables need to be exactly right. This means your button IDs, your database column ID which you want to filter by within the CMS, your dataset ID, etc. need to be precise and case sensitive.

ChatGPT’s code suggests creating an array for your buttons, but since there are only 6, I would suggest that you add individual onClick() handlers for each, which will make it easier for you to code, as well as help you spot any compiling errors with a red underline.

Just post a screenshot of your database fields, like so:

in order to verify that the field ID you are using is correct, for us to help you further.

Here’s how to do it using the ‘Selection Tags’ instead of buttons. You can take some inspiration from here:

1 Like