Get the extension here - https://store.ncengine.com/l/framer-search

Demo - https://nc-engine-demos.framer.website/search

Current Version - v0.1.2

Report bugs and Requests - https://github.com/NoCode-Engine/extensions-bug-triage/issues/new?assignees=gate3&labels=framer-search&projects=&template=bug_report.md

Introduction

The documentation covers how to use the Framer CMS Search Extension by NoCode Engine. We ran into some issues recently while building a website that has a lot of CMS items and it was difficult to find what we wanted on our long list of items, so we decided to build this extension to solve our issue and also to help anybody that needs this.

Getting Started

If you are familiar with our work, you will know we value flexibility and functionality over anything else, we try our best to not interfere with your creative process. This extension follows thesame ethos.

To learn how to add custom classes to a component/element in framer, visit this page. Here are the classes currently available:

Class Name Description Required
nc-item The class for each framer item in a collection list. The item should be placed in a Parent Frame and then this class should be added to that frame. True
nc-rl-searchinput The class for the input textbox you wish to enter your search terms into True
nc-rl-searchable This class identifies an element that contains the data you wish to the extension to search through. You might decide to only let some parts of your collection list items be searchable. Simply add this to the element containing the text that should be searchable by the extension. True
nc-rl-filterInput The class for the element that should be used to toggle a filter on and off. Currently this supports a button and a checkbox. It works as a toggle in both cases which means, when you click on the element when it has not been selected as a filter initially, it will filter all using the text/value of the element, the next time you click it, it will remove this filter False
nc-rl-filterable This class is similar to nc-rl-searchable, but in this case it should be added to an element or section of the collection list that should be used in a filter False

Using The Extension

This is super simple. After copying the extension using its link into your project, just:

  1. Place the extension anywhere on the canvas (It doesn’t matter where).
  2. Add the classes as specified in the table in the previous section
  3. Your are done, enjoy and leave us a rating.

Trouble Shooting

Notes

To serve you better and in order to get to your bug requests quickly, kindly create an issue using the link below. You can also add your questions and suggestions as well.