Search Result Page

This guide explains how to set up the script for the search result page.

Define Widget Templates

First, define the templates that will be used in various widgets:

const productItemTemplate = `
<div>
  <div>
    <a href="{{srcUrl}}" target="{{linkTarget}}">
        <img alt={{name}} src="{{frontImg}}">
    </a>
    <div>
      <strong>
        <a href="{{srcUrl}}">{{name}}</a>
      </strong>
      {{{priceHtml}}}
    </div>
  </div>
</div>
`;

const productItemDiscountPriceTemplate = `
<div>
  <span>{{price}}</span>
  <span>{{originalPrice}}</span>
</div>
`;

const productItemPriceTemplate = `
<div class="text-sm text-gray-900 font-bold mt-1">
  {{price}}
</div>
`;

const nothingFoundTemplate = `
<div id="products-none">
  <p>Sorry, no search items are found</p>
</div>
`;

Add Required Widgets

Add the widgets you need for your search result page:

// Initialize the AI search instance
const dualsearch = window.yesplz.dualsearch({
  makePreviewRequest: false,
});

// Responsive filter widget selection based on screen width
if (window.innerWidth <= 768) {
  // Mobile view
  dualsearch.addWidget(
    dualsearch.widgets.MobileTabbedFilters({
      container: '#yesplz-collapsible-filter',
      externalOpener: '#mob-link-filterby',
      filters: ['dynamicTreeMenu', 'brand', 'colors', 'textMaterials', 'size', 'price', 'discounts', 'shipping', 'newArrivals'],
    })
  );
}
else {
  // Desktop view
  dualsearch.addWidget(
    dualsearch.widgets.CollapsibleFilters({
      container: '#yesplz-collapsible-filter',
      externalOpener: '#mob-link-filterby',
      filters: ['dynamicTreeMenu', 'brand', 'colors', 'textMaterials', 'size', 'price', 'discounts', 'shipping', 'newArrivals'],
    })
  );
}

// Add AI Message widget
dualsearch.addWidget(
  dualsearch.widgets.AiMessage({
    container: '#ai-message',
  })
);

// Add Filter Chips widget
dualsearch.addWidget(
  dualsearch.widgets.Chips({
    container: '#filter-chips',
  })
);

// Add Sale Checkbox widget
dualsearch.addWidget(
  dualsearch.widgets.SaleCheckbox({
    container: '#saleonly-checkbox',
  })
);

// Add Products List widget
dualsearch.addWidget(
  dualsearch.widgets.ProductsList({
    container: '#products-list',
    containerClassName: '',
    scrollContainer: null,
    productLinkTarget: '_blank',
    rootTag: 'ol',
    templates: {
      item: productItemTemplate,
      price: productItemPriceTemplate,
      discountPrice: productItemDiscountPriceTemplate,
      nothingFound: nothingFoundTemplate,
    },
    onRendered: (search) => {
      if (search.counts && search.counts.total)
        document.getElementById('total-found').innerHTML = search.counts.total;
    },
  })
);

// Add Pagination widget
dualsearch.addWidget(
  dualsearch.widgets.Pagination({
    container: '#yesplz-pagination',
    visiblePagesLimit: 10,
  })
);

// Add SortBy widget
dualsearch.addWidget(
  dualsearch.widgets.SortBy({
    container: '#sort-by',
  })
);

Display Search Query

Retrieve the search query from URL parameters and display it:

import qs from 'qs';

// Parse search query from URL
const searchQuery = qs.parse(window.location.search, { ignoreQueryPrefix: true });

// Display the search query
const title = document.getElementById('search-results-query');
if (title) title.innerHTML = searchQuery.query;