How can I filter the "Cards" function?

Hi guys thank you for your always kind support, I would like to ask in this ocassion about the “Card” function, which I really love, is there any way to use them as “Products” or “Items” which I can filter with a search bar? For instance, lets suppose I got a smartphone list made with Cards, and I got a big search bar in the top of my page, is it possible that the search button can filter them? and show me just the ones that are related to the word? (Example I type Samsung and only the samsung ones are showed) I hope this may be possible and hopefuly you can give me a suggestion on how to make it, thanks a lot :slight_smile:

Hello Mathew,

Thanks for writing in! Please be advised that the search function works differently from the filter button. The search functionality usually looks for the keyword in the database of your site and displays the results in an independent search results page. The filter button on the other hand works only within the page.

Regretfully the card element cannot be linked to each other or be able to link to a filter button. What you need is a grid-like structure to display your products or items along with the filter button. You can do all this by using the Essential Grid or The Grid plugin. You may check out the plugins here:

For example: https://theme-one.com/the-grid/panama/

Hope this makes sense.

Its seems nice, however it lost the amazing animation that cards have :(, but in anycase, do this “grid” plugin has the animations that are showed in this example: https://theme-one.com/the-grid/panama/ when I clic in a category? that kind of compense the animation that I wanted with Cards but I want to know if the plugin includes that or that is css animation, thanks Renuel

Hello Mathew,

All the things you see in the example URL: https://theme-one.com/the-grid/panama/ is from the plugin. You can replicate it 100% including the effects and animations when you create the grid. The category names were used as the sort filter button to filter the items display on the grid. No need to use custom CSS as it is already with the grid skin style which is the Panama skin.

Hope this helps.

Thank you! Just a final question (I promise :sweat_smile: ) if I put lets say 100 items or even more, is it possible that they start loading just only until I scroll down? I’m not sure if I am clear enough with the question , but my worry is that the page takes too much time to load in case there are too many items, best regards and really appretiate the support

Hello Mathew,

If that is the case, you will have to enable the AJAX loading when you scroll the page. It is in the Load/Ajax tab in the grid settings.

To learn more about AJAX loading, kindly check out their documentation here:

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.