Filter Element

Filter element in Appmint empowers users to create dynamic filtering systems for various purposes, such as product filtering for ecommerce websites, event filtering for calendars, or ticket filtering for booking systems.

With its versatility and customization options, the Filter element allows you to enhance user experience by enabling them to refine and narrow down their search results based on specific criteria.

What is the Filter Element?

Filter element serves as a powerful tool for organizing and refining content based on user preferences or criteria. It enables users to set up filterable attributes and categories, allowing website visitors to sort and view relevant information according to their needs.

image

Whether you're managing a product catalog, event calendar, or booking platform, the Filter element provides an intuitive way to implement advanced filtering functionality.

Common Use Cases:

  • Ecommerce Product Filtering: Allow shoppers to filter products by category, price range, size, color, or other attributes to find exactly what they're looking for.
  • Event Filtering: Enable users to filter events by date, location, category, or type, making it easier to discover and attend relevant events.
  • Ticket Filtering: Facilitate ticket booking by offering filters based on event type, venue, seating section, ticket price, or availability.
  • Content Filtering: Provide users with the ability to filter content on blogs, portfolios, or directories by tags, topics, or custom attributes.

Using the Filter Element:

Navigate to the Preset tab and locate the Filter element under the Basic elements.. Drag the Filter element onto the canvas to add it to your webpage.

Click on the Filter element to select it. Click on the "Tune Item" icon to open the editor panel for the Filter element.

image

Configuring Properties:

  • In the Properties tab, toggle on "Show Filter" to display the filter options.

  • Toggle on "Show Action Filter" to enable additional filtering actions.

  • Choose a preset from the dropdown menu, such as None, Basic, Shopping, Property, Event, Ticket, etc.

  • Selecting a preset determines the initial configuration of the filter.

  • Choose a layout option from the dropdown menu, including None, Vertical, or Horizontal.

  • The layout option determines how the filter options are displayed to users.

  • Specify the sources for filtering, such as None, Price, Category, Brand, Attribute, Tags, etc.

  • These sources define the criteria by which content will be filtered.

  • Provide a name for the filter to help users identify its purpose or function.

  • Choose a display option for the filter, including None, Checkbox, Radio, or Select.

  • The display option determines the user interface elements used for selecting filter criteria.

  • Styling the Filter:

    • Switch to the Style tab to customize the appearance of the filter.
    • Adjust settings such as background color, shadow, padding, margin, border, width, height, transform, and effects.

  • Adding Actions:

    • Navigate to the Action tab to define actions associated with the filter.
    • Set up events, event listeners, and other interactive behavior for the filter.

  • Setting Tag Attributes:

    • Proceed to the Tag Attribute tab to configure additional HTML attributes for the filter element.

Once all configurations are complete, save your changes to apply the filter settings to the webpage.

With a wide range of filters and customization options available, the Filter element offers users endless possibilities for creative expression and design customization.

Happy building with Appmint!