Home > widget-integration > InstantSearchSelectors
InstantSearchSelectors class
Service for theme detection and selector management.
Technical Support teams can extend this service for custom themes:
Signature:
export declare class InstantSearchSelectors
Example
window.boostWidgetIntegration.extend('InstantSearchSelectors', (InstantSearchSelectors) => {
return class CustomSelectors extends InstantSearchSelectors {
// Add custom theme detection
protected getThemeConfigs() {
return {
...super.getThemeConfigs(),
myCustomTheme: {
searchInputSelector: '.my-search-input',
dialogSelector: '.my-search-modal'
}
};
}
};
});
Constructors
|
Constructor |
Modifiers |
Description |
|---|---|---|
|
Constructs a new instance of the |
Properties
|
Property |
Modifiers |
Type |
Description |
|---|---|---|---|
|
| |||
|
|
HTMLElement[] |
Dialogs closed by . Tracked by identity (not a | |
|
|
boolean |
True when a dialog we closed left the theme's scroll lock engaged, so ISW is responsible for releasing it when it closes. | |
|
|
Methods
|
Method |
Modifiers |
Description |
|---|---|---|
|
|
Ask the theme's own dialog component to close itself. Horizon 2025+ releases its scroll lock only inside Deliberately not awaited: Horizon's | |
|
Close theme search panels built as Horizon locks scroll for these from a document-level | ||
|
Click all visible theme close buttons to dismiss overlays. When ISW opens in **full-width** style, certain themes show their own search overlay/modal that conflicts with ISW. This method clicks all known close buttons to dismiss those overlays. **Legacy**: Inline logic inside | ||
|
Detect open theme dialogs. **1:1 port of legacy | ||
|
|
Detect theme name from various sources. | |
|
Dismiss the Symmetry theme's search overlay. Removes the | ||
|
|
Find a predictive search container inside a parent element. Tries each selector from | |
|
Resolve the ISW container the theme is actually displaying. The mobile/desktop containers are toggled by the widget/theme CSS (media queries), whose breakpoint may not match the JS | ||
|
Get all search input elements. **Legacy**: document.querySelectorAll('input[name="q"]...') **New**: Method using theme-specific selector | ||
|
|
Build the combined CSS selector for theme close buttons. Merges the built-in close-button selectors (Prestige, Super Store, etc.) with an optional custom selector from | |
|
Get ISW container selector. | ||
|
Resolve the element keyboard focus must stay inside while ISW is open. Full-width layouts wrap the search bar *and* the results in Scoped via , not the width heuristic: resolving the hidden container yields no focusable elements and the trap goes dead. | ||
|
Get the ISW root element from the DOM. | ||
|
Get the ISW root element selector. | ||
|
Get the predictive search selectors list. Useful for extending or customizing which selectors are tried. | ||
|
Get the suggestion wrapper element for the current device. | ||
|
|
Get theme configurations map. Override to add custom theme support. **Legacy**: Hard-coded selectors scattered across index.js **New**: Centralized configuration object | |
|
Get theme-specific search configuration. Detection priority: 1. Custom config from window.boostWidgetIntegrationConfig 2. Theme name from window.theme or Shopify theme settings 3. Selector presence detection 4. Default fallback | ||
|
Get ISW wrapper selector. | ||
|
|
Check whether something other than the dialogs ISW closed still holds a theme scroll lock. Sources considered: - any open dialog we did not close ourselves (cart drawer, menu modal) - | |
|
Hide theme search dialogs when ISW opens (full-width style). **1:1 port of legacy Themes that lock page scroll from their dialog component (Horizon 2025+) get called first so their own | ||
|
Check if current style is full-width. **Legacy**: isStyleFullWidth(context) function **New**: Method on selectors service | ||
|
Check if current device is mobile or tablet (≤ 991 px). Matches the legacy | ||
|
Check whether the suggestion panel is currently visible. The panel is considered visible when its wrapper element exists and does **not** have the **Legacy**: | ||
|
Check whether the Symmetry theme's search mode is active. Symmetry adds a **Legacy**: | ||
|
Check whether a theme scroll lock is currently engaged. Looks for the | ||
|
|
Match theme from custom config. | |
|
Release a theme scroll lock left behind by a dialog ISW closed. Only acts when ISW is the owner of the stale lock ( saw it survive) and nothing else still legitimately holds it — an open drawer or another modal keeps its lock untouched, see . | ||
|
Restore theme dialogs when ISW closes. **1:1 port of legacy Note: In practice this is effectively a no-op for the full-width case. For the dropdown/injection case where the dialog stayed open, the | ||
|
Wait for the ISW root element ( Uses a MutationObserver on **Legacy**: | ||
|
Wait for a predictive search container inside a dialog element. Shopify themes render predictive search components asynchronously inside their search dialogs. This method waits for one of the known selectors to become available so ISW can inject itself adjacent to the container. **Legacy**: |