Home > widget-integration > DOM_SELECTOR

DOM_SELECTOR variable

CSS selectors for filter widget DOM elements.

Pre-defined selectors for querying filter widget elements in the DOM. Technical Support teams can use these for custom DOM manipulation.

Signature:

DOM_SELECTOR: {
	readonly COLLECTION_HEADER: "#boost-sd__collection-header";
	readonly REFINE_BY_DESKTOP: "div[class^=\"boost-sd__refine-by\"]";
	readonly REFINE_BY_MOBILE: "#bc-refine-by-mobile";
	readonly FILTER_OPTION_TITLE: ".boost-sd__filter-option-title";
	readonly FILTER_OPTION_TITLE_OPENING: ".boost-sd__filter-option-title--opening";
	readonly FILTER_OPTION_LABEL: ".boost-sd__filter-option-label";
	readonly FILTER_OPTION_LISTITEM: ".boost-sd__filter-option-listitem";
	readonly SCROLL_TO_TOP: ".boost-sd__scroll-to-top";
	readonly TOOLBAR_TOP_MOBILE: ".boost-sd__toolbar-top-mobile .boost-sd__filter-tree-toggle-button";
	readonly FILTER_TREE_TOGGLE_EXPAND: ".boost-sd__filter-tree-toggle-button--expand";
	readonly TOOLBAR_TABINDEX: ".boost-sd__toolbar [tabindex]";
	readonly FILTER_OPTION_RANGE_SLIDER_UNIT: ".boost-sd__filter-option-range-slider-unit";
	readonly META_NOINDEX: "meta[content=\"noindex,nofollow,nosnippet\"]";
}

Remarks

These selectors target specific filter widget components and are used throughout FilterHandler and FilterHelper for element access.

Example

window.boostWidgetIntegration.extend('FilterHandler', (FilterHandler) => {
  return class extends FilterHandler {
    handleAction(e, actionId, metadata) {
      // Find and style the collection header
      const header = this.document.querySelector(DOM_SELECTOR.COLLECTION_HEADER);
      if (header) {
        header.style.borderBottom = '2px solid #333';
      }
      return super.handleAction(e, actionId, metadata);
    }
  };
});