Mobile Tabbed Filters Widget

Example Usage

Text Search

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.MobileTabbedFilters({
    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.MobileTabbedFilters({
    container: "#yesplz-collapsible-filter",
    filters: [
      "dynamicTreeMenu",
      "brand",
      "colors",
      "textMaterials",
      "size",
      "price",
      "discounts",
      "shipping",
      "newArrivals",
      "occasions",
      "vibe",
      "patterns",
    ],
  })
);

Name	Type	Description
container	string	CSS selector for the element where the Mobile Tabbed Filters widget will be rendered.
filters	string[]	Array of filter names to be included in the Mobile Tabbed Filters widget.
externalOpener	string	CSS selector for an external element that, when clicked, will open the Mobile Tabbed Filters.
isOpenInitialy	boolean	Determines whether the Mobile Tabbed Filters should be open by default when the widget is first rendered.

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 mobile tabbed filters.

Example usage:

externalOpener: "#mobile-filter-opener"

In this example, clicking an element with the ID "mobile-filter-opener" will open the mobile tabbed filters.

isOpenInitialy

Default: false

The isOpenInitialy parameter is a boolean that determines whether the mobile tabbed filters should be open when the widget is first rendered.

When set to true, the mobile tabbed filters will be expanded by default when the page loads. If false, the filters will be collapsed initially, requiring user interaction to open them.