Chips Widget

The Chips widget displays tag-like elements that represent the filter values selected in the Collapsible Filter widget. It provides a visual representation of the currently applied filters, allowing users to easily review and manage their filter selections.

Example Usage

Text Search

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.Chips({
    container: "#yesplz-chips",
  })
);

Dual Search

const dualsearch = window.yesplz.dualsearch();

dualsearch.addWidget(
  dualsearch.widgets.Chips({
    container: "#yesplz-chips",
  })
);

Parameters

Name	Type	Description
container	string	CSS selector for the HTML element where the Chips widget will be rendered.
templates	object	An object containing custom templates for the widget's layout.

templates

The templates parameter allows you to customize the HTML structure of the Chips widget. It accepts an object with a layout property, which defines the template for rendering the chips.

Default Template:

const TEMPLATE = `
<div>
  <ul>
    {{#each items}}
      <li data-type="{{this.type}}" data-value="{{this.value}}" class="is-active{{#if this.nonRemovable}} non-removable{{/if}}">
        {{this.label}}
      </li>
    {{/each}}
  </ul>
</div>
`;

This template uses Handlebars syntax to iterate over the items array and create a list item for each chip.

Each <li> element includes:

• data-type: The type of the filter (e.g., "colors", "size")
• data-value: The selected value of the filter
• class: Always includes "is-active", and adds "non-removable" for chips that can't be removed
• Content: The label of the chip

Customizing the Template

You can provide your own template to customize the appearance and structure of the chips:

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.Chips({
    container: "#yesplz-chips",
    templates: {
      layout: TEMPLATE,
    },
  })
);