Search Bar Widget

This widget displays a search bar for text search.

Example Usage

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.SearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search",
  })
);

Parameters

Name	Type	Description
container	string	CSS selector for the element where the widget will be rendered.
startInput	string	CSS selector for the input element that triggers the search bar.
templates	object	Layout templates for the widget.
onRendered	function	Callback function invoked when the Search Bar layout is rendered.
onProductsRendered	function	Callback function invoked each time new products are rendered.
disableRecommendations	boolean	Disable the search recommendations feature.

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.

templates

Defines the layout templates for the widget. It includes two properties:

• layout: The overall layout of the search bar.
• product: The template for individual product items.

Here's an example of the default layout template:

const LAYOUT_TEMPLATE = `
<div class="yesplz-text-search-backdrop"></div>
<div class="yesplz-text-search-main">
  <div class="yesplz-text-search-container">
    <button class="yesplz-text-search-close-button"></button>
    <div class="yesplz-text-search-header">
      <div class="yesplz-text-search-bar-container">
        <form class="yesplz-text-search-form">
          <input type="text" placeholder="Search" value="" />
          <button class="submit" type="submit">Search</button>
          <button id="yesplz-text-search-form-clear" class="clear" type="button">clear</button>
        </form>
      </div>
      <div class="yesplz-text-search-menu-container">
        <div class="yesplz-menu sale-container">
          <ul>
            <li class="sale" data-menu-value="sale">Sale Only</li>
          </ul>
        </div>
        <div class="yesplz-suggestions">
          <div class="yesplz-menu">
            <ul>
              <li data-menu-value="women" class="is-active">Women</li>
              <li data-menu-value="men">Men</li>
            </ul>
          </div>
          <h5>Top Suggestions</h5>
          <ul id="yesplz-suggested-queries"></ul>
        </div>
      </div>
    </div>
    <div class="yesplz-text-search-popular-queries">
      <h4>Popular Searches</h4>
      <ul id="yesplz-popular-queries"></ul>
    </div>
    <div class="yesplz-text-search-products products wrapper grid products-grid">
      <ol id="yesplz-text-search-products" class="products list items product-items">
      </ol>
    </div>
    <div class="yesplz-text-search-footer">
      <button id="see-results">See All Results</button>
    </div>
  </div>
</div>
`;

// Usage
textsearch.addWidget(
  textsearch.widgets.SearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search",
    templates: {
      layout: LAYOUT_TEMPLATE,
    },
  })
);

And an example of the product template:

const PRODUCT_TEMPLATE = `
<li class="product-item item product jq-grid-item">
    <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>
</li>
`;

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

onRendered

Callback function invoked once when the Search Bar layout is rendered.

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

onProductsRendered

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

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

disableRecommendations

Disable the search recommendations feature.