HELP! Filtering dynamic content is hiding specific buttons in my Wix repeater (bad) and they don't reappear when filter is removed (also bad)

Ask the community
, , ,
1

Filtering dynamic content is hiding specific buttons in my Wix repeater (bad) and they don’t reappear when filter is removed (also bad)

Question:

Why do the “SEE GALLERY” and “SEE PRODUCT” buttons in my Wix repeater disappear after applying a filter, and why don’t they reappear when the filter is removed?

Product:

Wix Editor with Velo (Custom Code) – Dynamic Pages and Repeaters.

What I am trying to achieve:

I have a dynamic testimonials page where each repeater card has three overlapping buttons. The visibility of these buttons depends on data from my CMS:

  1. “SEE GALLERY” button (#button107) (visible if a portfolioReference field has a value).
  2. “SEE PRODUCT” button (#button109) (visible if a productReference field has a value).
  3. “NOT AVAILABLE” button (#button110) (visible if neither of the above fields has a value).

The page works fine on load, and the buttons display as expected based on the logic. However, when I apply a filter using a dropdown menu, the “SEE GALLERY” and “SEE PRODUCT” buttons stop showing on all cards, even if their conditions are met. Meanwhile, the “NOT AVAILABLE” button continues to work correctly. Once the “SEE GALLERY” and “SEE PRODUCT” buttons disappear after filtering, they don’t return when the filter is cleared.

This actually did work correctly a few months ago when I initially created the code and tested it, and no changes were made to the code or platform during that time that I am aware of. I recently discovered it no longer works when a filter is applied.

What I have already tried:

  • Verified that the initial code works properly before filtering, and it correctly determines button visibility.
  • Ensured the filter logic correctly updates the repeater’s data.
  • Added console.log statements to check the values of portfolioReference and productReference before and after filtering. The data appears correct but does not update the button visibility.
  • Tested the repeater behavior without applying any filters (everything works fine).

Additional information:

Here is the entire custom code for the page:

import wixData from 'wix-data';

$w.onReady(async () => {
    const items = await wixData.query("contact03")
        .find()
        .then((res) => {
            console.log("Query returned:", res.items.length, "items");
            return res.items.filter(item => item.hidden !== true);
        });

    if (items.length > 0) {
        $w("#repeater4").data = items;

        $w("#repeater4").onItemReady(($item, itemData) => {
            console.log("Item Data:", itemData);

            const portfolioReference = itemData["portfolioReference"];
            if (portfolioReference && portfolioReference.length > 0) {
                $item("#button107").show();
            } else {
                $item("#button107").hide();
            }

            const productReference = itemData["productReference"];
            if (productReference && productReference.length > 0) {
                $item("#button109").show();
            } else {
                $item("#button109").hide();
            }

            if ((!portfolioReference || portfolioReference.length === 0) && (!productReference || productReference.length === 0)) {
                $item("#button110").show();
            } else {
                $item("#button110").hide();
            }
        });
    } else {
        console.log("No items to display, check your dataset and filter settings.");
    }
});

Any help in understanding why these two buttons are disappearing after filtering would be greatly appreciated! Let me know if additional context or code snippets are needed.

2

What are you using to filter ? is it a dropdown that is connected to the dataset for filtering.
If so you may need to remove this connection and code the dropdown to filter.
Have run into this problem before with coding repeaters.

1 Like
3

Yes I’m using a dropdown which is filtering using the dataset. Do you have any suggestions for getting started using your method? I’m a beginner when it comes to coding.

4

would depend on how you have it set up, but something like this (I just grabbed code from one i did the other day so names will need to change to suit)


    $w('#dropdown1').onChange(() => {
        const selectedValue = $w('#dropdown1').value; 

        if (!selectedValue || selectedValue === "All") {
            $w('#dynamicDataset').setFilter(wixData.filter())
                .then(() => {
                    console.log("Showing all statuses.");
                    applyButtonStyles();
                })
                .catch((err) => {
                    console.error("Error clearing filter:", err);
                });
        } else {
           
            $w('#dynamicDataset').setFilter(wixData.filter().eq("subtitle", selectedValue))
                .then(() => {
                    console.log(`Dataset filtered to status: ${selectedValue}`);
                    applyButtonStyles();
                })
                .catch((err) => {
                    console.error("Dataset filter error:", err);
                });
        }
    });
});
2 Likes
5

Awesome, thank you so much!

1 Like
6

Hey @Dan_Suhr I set it up just like you said (code below) and the filter works as expected, however the button logic is still broken in exactly the same way it was originally.

Furthermore, in addition to the original issue, (quoted below) an additional problem has been introduced— now when I load up the page, all three buttons are visible from the start. They are of course stacked up on top of one another, with their drop shadows all combining to be an ugly mess.


import wixData from 'wix-data';

$w.onReady(() => {
    $w('#dropdown1').onChange(() => {
        const selectedValue = $w('#dropdown1').value;

        if (!selectedValue || selectedValue === "All") {
            $w('#dynamicDataset').setFilter(wixData.filter())
                .then(() => {
                    applyButtonLogic();
                })
                .catch((err) => {
                    console.error(err);
                });
        } else {
            $w('#dynamicDataset').setFilter(wixData.filter().eq("typeOfFeedback", selectedValue))
                .then(() => {
                    applyButtonLogic();
                })
                .catch((err) => {
                    console.error(err);
                });
        }
    });
});

function applyButtonLogic() {
    $w("#repeater4").onItemReady(($item, itemData) => {
        const portfolioReference = itemData["portfolioReference"];
        if (portfolioReference && portfolioReference.length > 0) {
            $item("#button107").show();
        } else {
            $item("#button107").hide();
        }

        const productReference = itemData["productReference"];
        if (productReference && productReference.length > 0) {
            $item("#button109").show();
        } else {
            $item("#button109").hide();
        }

        if ((!portfolioReference || portfolioReference.length === 0) && (!productReference || productReference.length === 0)) {
            $item("#button110").show();
        } else {
            $item("#button110").hide();
        }
    });
}
7

What is the full code you are using ? the snippet I supplied would need to be adjusted to suit your requirements and still require code to show/hide depending on CMS fields having content.

8

My full code for the entire page is up in the code block in my previous message. Is it missing anything?

9

And yes, I did adjust your snippet to fit my requirements. Your snippet was for filtering the content via code instead of connect connecting the drop-down to the data set— I customized your snippet to fit my needs, and this functionality works fine, but my original problem has not been fixed and an additional problem has been introduced.

10

may need to force the repeater to refresh on filter and apply the button logic

$w('#dynamicDataset').setFilter(wixData.filter().eq("typeOfFeedback", selectedValue))
    .then(() => {
        $w("#dynamicDataset").onReady(() => {
            applyButtonLogic(); 
        });
    })
    .catch((err) => {
        console.error(err);
    });
11

Hey @Dan_Suhr I tried your suggestion about forcing the repeater to refresh on filter and applying the button logic, (full page code below) but nothing changed. Am I doing something wrong?


import wixData from 'wix-data';

$w.onReady(() => {
    $w('#dropdown1').onChange(() => {
        const selectedValue = $w('#dropdown1').value;

        if (!selectedValue || selectedValue === "All") {
            $w('#dynamicDataset').setFilter(wixData.filter())
                .then(() => {
                    $w("#dynamicDataset").onReady(() => {
                        applyButtonLogic();
                    });
                })
                .catch((err) => {
                    console.error("Error clearing filter:", err);
                });
        } else {
            $w('#dynamicDataset').setFilter(wixData.filter().eq("typeOfFeedback", selectedValue))
                .then(() => {
                    $w("#dynamicDataset").onReady(() => {
                        applyButtonLogic();
                    });
                })
                .catch((err) => {
                    console.error("Dataset filter error:", err);
                });
        }
    });
});

function applyButtonLogic() {
    $w("#repeater4").onItemReady(($item, itemData) => {
        $item("#button107").hide();
        $item("#button109").hide();
        $item("#button110").hide();

        const portfolioReference = itemData["portfolioReference"];
        if (portfolioReference && portfolioReference.length > 0) {
            $item("#button107").show();
        }

        const productReference = itemData["productReference"];
        if (productReference && productReference.length > 0) {
            $item("#button109").show();
        }

        if ((!portfolioReference || portfolioReference.length === 0) && (!productReference || productReference.length === 0)) {
            $item("#button110").show();
        }
    });
}
12

Are there any errors in the code panel ?
What elements are connected to the dataset?
Does the dropdown have the same values as the CMS ?

Without looking at the elements and dataset connections it is hard to see if the code will work properly.
Each time I have coded a dynamic page with repeater it changes the code to suit specific requirements. There is no standard cut and paste solution.

import wixData from 'wix-data';

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
        applyButtonLogic();
    });

    $w('#dropdown1').onChange(() => {
        const selectedValue = $w('#dropdown1').value;

        if (!selectedValue || selectedValue === "All") {
            $w('#dynamicDataset').setFilter(wixData.filter())
                .then(() => {
                    console.log("Filter cleared");
                    applyButtonLogic();
                })
                .catch((err) => {
                    console.error("Error clearing filter:", err);
                });
        } else {
            $w('#dynamicDataset').setFilter(wixData.filter().eq("typeOfFeedback", selectedValue))
                .then(() => {
                    console.log(`Filter applied for value: ${selectedValue}`);
                    applyButtonLogic();
                })
                .catch((err) => {
                    console.error("Dataset filter error:", err);
                });
        }
    });
});

function applyButtonLogic() {
    $w("#repeater4").onItemReady(($item, itemData) => {
        $item("#button107").hide();
        $item("#button109").hide();
        $item("#button110").hide();

        const portfolioReference = itemData["portfolioReference"];
        if (portfolioReference && portfolioReference.length > 0) {
            $item("#button107").show(); 
        }

        
        const productReference = itemData["productReference"];
        if (productReference && productReference.length > 0) {
            $item("#button109").show(); 
        }

        if ((!portfolioReference || portfolioReference.length === 0) && (!productReference || productReference.length === 0)) {
            $item("#button110").show();
        }
    });

  
    $w("#repeater4").data = $w("#dynamicDataset").getCurrentItems();
}
13

@Dan_Suhr

  • No errors in the code panel.

  • Elements connected to the data set are:

    • The repeater and all its contents (the text, images, and buttons) Not only is the repeater itself connected as you can see from the screenshot below, each of the elements in it is also connected via the same squiggly button.
      image
      image1920×1038 229 KB
    • Without these things being connected to the data set, I’m not sure how I would get them to show up on the repeater.

  • Yes the dropdown menu has the same values as the CMS— it has to, otherwise the filtering functionality does not work. I learned that because it defaults to flavors of ice cream, which it did, and it did not work until I set the values to manually match the CMS. Lol.

Question:

I see you pasted a code block below your message. Did you make any changes? If so I can’t seem to find them.

14

Hey @Dan_Suhr just checking to see if you’ve received my previous message. Thanks again for your help!

15

Hi @Dawson_Bodenhamer I did see this but have been away on holidays and just got back. My inbox is full of requests from clients so need to get ontop of that first. Will have another look later in the week to see if anything stands out.

16

@Dan_Suhr I totally understand and thank you! I really appreciate it!

17

hey @Dan_Suhr just pinging you here in case this got buried, thanks again for your assistance!

18

still havnt had a chance to review. so busy at the moment.

19

This has been solved in a separate thread.

1 Like