Dynamic Category Filter Examples

🎯 Basic Usage

Simple category filter with default options:

Code:

<div id="basic-filter"></div>
<script>
  buildCategoryFilter('basic-filter');
</script>

⚙️ Custom Options

Category filter with custom field name and label:

Code:

<div id="custom-filter"></div>
<script>
  buildCategoryFilter('custom-filter', {
    fieldName: 'template-categories',
    toggleLabel: 'Template Category'
  });
</script>

🔗 API Endpoint

Endpoint: /api/categories

Method: GET

Response Format:

{
  "categories": [
    { "id": "category-1", "name": "Business" },
    { "id": "category-2", "name": "Portfolio" },
    { "id": "category-3", "name": "E-commerce" }
  ]
}

Test API Endpoint

🚀 Integration Steps

1. Include the category-filter.js script in your page
2. Create a container element with an ID
3. Call buildCategoryFilter('containerId')
4. The filter will automatically work with Finsweet CMS Filter

For Webflow Integration:

<!-- Add this to your page head or before closing body tag -->
<script src="/category-filter.js"></script>

<!-- Replace your existing filter dropdown with: -->
<div id="category-filter-container"></div>

<script>
  // Initialize the filter
  buildCategoryFilter('category-filter-container', {
    fieldName: 'categories', // Must match your CMS filter field
    toggleLabel: 'Category'
  });
</script>