How to create an accordion within a product filter on editor x?

Discussion Ask a question
1

Hello all,
I am creating a product page that allows visitors to filter the products by selecting multiple features they need. I tried using the wix store- although the filter works, but the gallery doesn’t allow me to add a short description under the title/product name. So… I am trying to use a repeater/ create checkboxes to create something similar.

Is anyone familiar with this? Much appreciate it!

Here is an example of the accordion filters and product gallery I am trying to create-

945×525 23.8 KB

2

The example you sent can certainly been in the default Wix Store by using multiple collections and custom filters. Have you tried that?

Wix Stores: Adding Filters and Sorting Options to Your Product Gallery | Help Center | Wix.com…

1 Like
3

Hi Lewis,

Thanks for commenting. Yes, I tried and the filter part is fine on the wix store. But, a huge problem is that the store doesn’t allow me to add a short description under the title/product name in the gallery section. (Asked the customer service, and they said there is no way to customize it…)

Below is the design that I am trying to build… So now I know how to use the repeater to build the gallery. But I can’t really find info about building checkboxes within multiple accordions ;(

Or is it even a way to use the wix store filter and link it to the repeater I build? :tired_face:

945×525 23.8 KB

4

I really wish they’d allow you to create custom repeaters and then link it to the wix store stuff. I think it might be able to be done with Velo/coding…but…the whole point is that it’s “no-code”.

I wish I knew more about coding.

5

Hi Lucy
Have you solved your problem?
I have implemented something very similar to this in my website: https://www.kofibean.com/coffees
Let me know if this is what you are looking for, and i’ll help you further.

6

Hi @masandabhishek ,
Nice website! Just a suggestion: It would be great if you could keep the filter accordions sticky so that it remains on the screen when the user scrolls down.

7

Hi @masandabhishek ,

Just curious, as I am creating an interactive product catalogue similar to the Editor X Wix store–but without the ecommerce aspect. Is your store the default ‘product gallery’ or have you created your store through the use of repeaters. Your website has a next level customised store design and I would like to know how you went about creating that and also integrating the filter accordions?

Regards,
Jett

8

Hi @arch-jrgs ,
This is a customised page and is not related to the default Wix product gallery, which did not suit my needs. This is similar to an interactive product catalogue without e-commerce, however, I do plan to integrate the e-commerce aspect into it in the future. The filter accordions are basically repeaters, with labels, buttons and checkboxGroup’s to mimic a filter. I’ve attached a reference image for the same.

I’ve added a listener for these CheckboxGroup’s which calls a function whenever a checkbox is clicked and will apply filters.

componentsTypeArray.forEach((compType) => {
            const compArray = $w(compType);
            compArray.forEach((comp) => {
                comp.onChange((event) => {
                    $w("#Container").collapse()
                    buildFiltersAndPopulateRepeater(windowWidth);
                });
            });
        });
 })

However, this is a very finicky process. I had to create 2 different repeaters for mobile and PC devices, and then add additional code to synchronize them.

9

@masandabhishek sounds tricky, I’ll keep exploring my option although I might come back to this. Thanks anyways–once again great website!