Recreate Filter Tags Clear Filters from Default Store Page

Ask the community
, , ,
1

Question:
Hello!
I need to recreate the tags that are shown when some filters are selected on the default Store Page.

Any idea of how to make it?

Product:
Wix Sutdio

What are you trying to achieve:

wix botones filtros
wix botones filtros1914×1026 258 KB

I’m building a custom store page with CSM but I would like that this page have those filter too.

What have you already tried:
Connect CSM to tags but they don’t “read” or display the choosen filters.

Additional information:
Not familiar with programming, not even basic. Just understad some what the code does.

2

Hi Sergio,

I will try to make the explanation as easy as I can, feel free to ask follow-up questions if you don’t understand anything.

To add filters, you need 2 things - 1. CMS collections for filter 2. Selection Input Elements

Selection elements can be Tags, radio boxes, Dropdowns, etc.

Creating a Filter is very easy -

  • Add the product and Collection dataset to your page
  • Connect the selection Input element(like tags) with the collection Names(in collection dataset)
  • Now open the product dataset settings
  • Add a Filter in the dataset. There in the Field, select “Collection” then choose Include and “Another Dataset”. Set Collection as another dataset there. And your filter is done. You can repeat it with other parameters as well.

Screenshot (323)
Screenshot (323)1920×1080 348 KB

Hope it helps.

If you still can’t figure it out, let me know.
Best Regards

3

Thanks for taking your time, but I think I didn’t explained my self well.
After connecting and selecting a filter, in the prebuilt store, after you choose one of the options in a filter, the name of the selected filter is shown over the products lists. The shown name has also an “X” which can reset that filter.

4

I am able to do it using Selection Tags. Let me know if this result is acceptable, I created it on one my similar custom product list. Although it doesn’t have a close button, it uses selection tags just like you need. :slight_smile: Home | Minimal Ecommerce (wixstudiotemplates.wixstudio.io)

5

@Sergio_Karelovic Here is the code for this operation -

import wixData from 'wix-data';
import {local} from 'wix-storage';

$w.onReady(function () {
  const checkboxGroup = $w('#checkboxGroup1');
  const selectionTags = $w('#selectionTags1');
  
  selectionTags.hide();

  checkboxGroup.onChange(() => {
    updateTagsFromCheckbox();
    toggleTagsVisibility();
  });

  selectionTags.onChange((event) => {
    updateCheckboxFromTags();
  });

  function updateTagsFromCheckbox() {
    const selectedCheckboxValues = checkboxGroup.value;
    selectionTags.options = selectedCheckboxValues.map(value => ({ label: value, value }));
    selectionTags.value = selectedCheckboxValues;
  }

  function updateCheckboxFromTags() {
    const selectedTagValues = selectionTags.value;
    checkboxGroup.value = selectedTagValues;
    updateTagsFromCheckbox();
    toggleTagsVisibility();
  }

  function toggleTagsVisibility() {
    if (checkboxGroup.value.length > 0) {
      selectionTags.show();
    } else {
      selectionTags.hide();
    }
  }
});

Replace the Element ID Of Multi Checkbox and Selection Tags. Feel free to design the looks of your tags and checkboxes.

Hope it helps.

Best Regards

6

Awesome! It worked!
It’s doesn’t have the “x” button but it doesn’t matter.
I will just create tags with an x at the end, still if you press the the tag it will delete the filter!
I appreciate it a lot.
I’ll use and come back with more feedback if needed.

1 Like
7

Sure thing, Feel free to reach out.

8

I’m having issue transferring my site

9

Hey,

Hope you are well.

What kind of problem?