Collapsible Filters Widget

Example Usage

Text Search

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.CollapsibleFilters({
    container: "#yesplz-collapsible-filter",
    filters: [
      "dynamicTreeMenu",
      "brand",
      "colors",
      "textMaterials",
      "size",
      "price",
      "discounts",
      "shipping",
      "newArrivals",
      "occasions",
      "vibe",
      "patterns",
    ],
  })
);

Dual Search

const dualsearch = window.yesplz.dualsearch();

dualsearch.addWidget(
  dualsearch.widgets.CollapsibleFilters({
    container: "#yesplz-collapsible-filter",
    filters: [
      "dynamicTreeMenu",
      "brand",
      "colors",
      "textMaterials",
      "size",
      "price",
      "discounts",
      "shipping",
      "newArrivals",
      "occasions",
      "vibe",
      "patterns",
    ],
  })
);

Parameters

Name	Type	Description
container	string	CSS selector for the HTML element where the widget will be rendered.
filters	string[]	Array of filter names to be included in the collapsible filters widget.
externalOpener	string	CSS selector for an external element that, when clicked, will open the Mobile Tabbed Filters.

container

The container parameter is a string that represents a CSS selector for the HTML element where the CollapsibleFilters widget will be rendered. This could be an ID selector (e.g., "#yesplz-collapsible-filter") or any valid CSS selector that uniquely identifies the target element in your HTML structure.

filters

The filters parameter is an array of strings, each representing a specific filter type to be included in the CollapsibleFilters widget.

Available filter types include:

• "dynamicTreeMenu": A hierarchical menu for category-based filtering.
• "brand": Filter products by brand names.
• "colors": Allow selection of product colors.
• "textMaterials": Filter by material types (e.g., cotton, leather, etc.).
• "size": Filter products by size options.
• "price": Allow filtering products within specific price ranges.
• "discounts": Filter products with active discounts or promotions.
• "shipping": Filter by shipping options. (e.g., priority, standard, etc.).
• "newArrivals": Filter products based on how recently they were added to the inventory (e.g., within last 1 day, 7 days, etc.).
• "occasions": Filter products based on suitable occasions or events (e.g., work, night out, home, festival, etc.).
• "vibe": Filter products based on style or mood (e.g., casual, preppy, minimal, romantic, etc.).
• "patterns": Filter products based on their pattern or print (e.g., solid, animal, floral, dots, etc.).

You can customize the filters array to include any combination of these filter types based on your specific requirements.

externalOpener

Default: None

The externalOpener parameter is a string that represents a CSS selector for an external element that, when clicked, will open the collapsible filters.

Example usage:

externalOpener: "#collapsible-filter-opener"