Dual Search Bar Widget

This widget displays a dual search bar for text and AI search. See Search result page for instructions on how to configure the Search Results page.

Example Usage

const dualsearch = window.yesplz.dualsearch();

dualsearch.addWidget(
  dualsearch.widgets.DualSearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search",
    searchPageUrl: "/result.html",
  })
);

Parameters

Name	Type	Description
container	string	CSS selector for the element where the widget will be rendered.
startInput	string	Selector for the input element that triggers the search bar.
searchPageUrl	string	Path to the search result page.
templates	object	Layout templates for the widget.
onRendered	function	Callback function invoked when the Search Bar widget is rendered.
onBeforeProductRendered	function	Callback function to set product template
onProductsRendered	function	Callback function invoked each time new products are rendered.

container

Selector for the element where the widget will be integrated.

startInput

Selector for the input element. The search bar will start on its focus.

searchPageUrl

Path to the search result page. Once the user searches, they will be directed to this URL.
Default value: /search.html

templates

Defines the layout templates for the product:

const PRODUCT_TEMPLATE = `
  <div class="product-item item product">
    <div class="product-item-info">
        <div class="product-image-block">
            <a class="product-item-photo" href="{{srcUrl}}" target="{{linkTarget}}">
                <img class="photo image lazyloaded" alt="" src="{{frontImg}}">
            </a>
        </div>
        <div class="product-item-details">
            <div class="brand">
                <a href="{{srcUrl}}">{{brand}}</a>
            </div>
            <strong class="product-item-name">
                <a title="" class="product-item-link" href="{{srcUrl}}">{{name}}</a>
            </strong>
            <div class="price-box price-final_price">
              {{#if isSale}}
              <span class="old-price">
                <span class="price-container price-final_price tax weee">
                  <span data-price-type="oldPrice" class="price-wrapper ">
                    <span class="price">{{originalPrice}}</span>
                  </span>
                </span>
              </span>
              {{/if}}
              <span class="normal-price{{#if isSale}} special-price{{/if}}">
                <span class="price-container price-final_price tax weee">
                  <span data-price-type="finalPrice" class="price-wrapper ">
                    <span class="price">{{price}}</span>
                  </span>
                </span>
              </span>
            </div>
        </div>
    </div>
  </div>
`;

// Usage
dualsearch.addWidget(
  dualsearch.widgets.DualSearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search",
    templates: {
      product: PRODUCT_TEMPLATE,
    },
  })
);

onRendered

Callback function invoked once when the Dual Search Bar widget is rendered.

dualsearch.addWidget(
  dualsearch.widgets.DualSearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search",
    onRendered: () => {
      // Code to execute when the widget is rendered
    },
  })
);

onBeforeProductRendered

Callback function to set product template before products are rendered.

dualsearch.addWidget(
  dualsearch.widgets.DualSearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search",
    onBeforeProductRendered: (productHtml, productData) => {
      // productHtml: HTML string template for the product
      // productData: Object containing product data (productName, productUrl, frontImgSrc, etc.)
      // return: Modified HTML string for the product
      return productHtml;
    },
  })
);

onProductsRendered

Callback function invoked each time new products are rendered. Receives a list of rendered products as an argument.

dualsearch.addWidget(
  dualsearch.widgets.DualSearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search",
    onProductsRendered: (products) => {
      // Code to execute when products are rendered
    },
  })
);