CMS Filtering between Collections and Category

Framer CMS Filtering example - Filters between different collections and categories.

https://enthusiastic-light-914365.framer.app/ 

Purpose:

This is to demonstrate the ability of the Framers CMS for Blog creation. It is not intended to be a good design but rather well coded (so please Ignore the poor design). 

How:

This was accomplished through using Framers Custom code and several code components. 

Why was Custom Code needed? 

- This particular project wanted to create a filter for the CMS that the would dynamically change depending on the category the user clicked on. 

- It was also intended to work across different categories.

There are 3 code overrides that are used:

CMScomponent - This changes the filter setting depending on what has been picked

FilterComponent - the purpose of this code is to change the look of the different buttons - which one has been pressed etc. 

FilterTextComponent - This captures the category pressed.

The filter text would connect to a the individual category button (for example "1"). 

the FilterComponent would attach to the layer above the different buttons 

The CMS component would attach to the CMS collection.

As well, there are different IDs for the different components. This is to ensure that a button which should only work for collection 2 does not interfere with collection 1 and vice versa. 

Conclusion and Reflection

I have not seen many of these types of CMS collections created in framer. I completed it for a client and will link the website below for anyone to view. 

It was difficult at first trying to make sure buttons only work for certain CMS components, and it still has work to be done to be simplified -  but is at a stage where anyone can use it and edit it to add more collections etc.

Thank you for reading.

James