Create multi-column layouts

import { autocomplete } from "@algolia/autocomplete-js";  import "@algolia/autocomplete-theme-classic";  autocomplete({  container: "#autocomplete",  openOnFocus: true,  plugins: [],  render({ render, html }, root) {  render(  html`<div class="aa-PanelLayout aa-Panel--scrollable">  <div class="aa-PanelSections">  <div class="aa-PanelSection--left"></div>  <div class="aa-PanelSection--right"></div>  </div>  </div>`,  root,  );  }, }); 

// ... import { createLocalStorageRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches"; import { createQuerySuggestionsPlugin } from "@algolia/autocomplete-plugin-query-suggestions"; import { liteClient as algoliasearch } from "algoliasearch/lite";  import "@algolia/autocomplete-theme-classic";  // You can use the example application credentials in case you don't have your own yet. // const appId = 'latency'; // const apiKey = '6be0576ff61c053d5f9a3225e2a90f76'; const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");  const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({  key: "multi-column-layout-example",  limit: 2, });  const querySuggestionsPlugin = createQuerySuggestionsPlugin({  searchClient,  indexName: "autocomplete_demo_products_query_suggestions",  getSearchParams() {  return {  ...recentSearchesPlugin.data.getAlgoliaSearchParams(),  hitsPerPage: 7,  };  }, });  autocomplete({  container: "#autocomplete",  openOnFocus: true,  plugins: [recentSearchesPlugin, querySuggestionsPlugin],  render({ elements, render, html }, root) {  const { recentSearchesPlugin, querySuggestionsPlugin } = elements;   render(  html`<div class="aa-PanelLayout aa-Panel--scrollable">  <div class="aa-PanelSections">  <div class="aa-PanelSection--left">  ${recentSearchesPlugin} ${querySuggestionsPlugin}  </div>  <div class="aa-PanelSection--right"></div>  </div>  </div>`,  root,  );  }, }); 

// ...  autocomplete({  container: "#autocomplete",  openOnFocus: true,  plugins: [recentSearchesPlugin, querySuggestionsPlugin],  getSources({ query }) {  return [  // ...  {  sourceId: "products",  getItems() {  return getAlgoliaResults({  searchClient,  queries: [  {  indexName: "autocomplete_demo_products",  params: {  query,  hitsPerPage: 4,  },  },  ],  });  },  // ...  },  ];  },  render({ elements, render, html }, root) {  const { recentSearchesPlugin, querySuggestionsPlugin } = elements;   render(  html`<div class="aa-PanelLayout aa-Panel--scrollable">  <div class="aa-PanelSections">  <div class="aa-PanelSection--left">  ${recentSearchesPlugin} ${querySuggestionsPlugin}  </div>  <div class="aa-PanelSection--right"></div>  </div>  </div>`,  root,  );  }, }); 

function cx(...classNames) {  return classNames.filter(Boolean).join(" "); }  function formatPrice(value, currency) {  return value.toLocaleString("en-US", { style: "currency", currency }); }  export function ProductItem({ html, hit, components }) {  return html`  <a  href="https://example.org/"  target="_blank"  rel="noreferrer noopener"  class="${cx("aa-ItemLink", hit.objectID)}"  >  <div class="aa-ItemContent">  <div class="aa-ItemPicture">  <img  src="${hit.image_urls[0]}"  alt="${hit.name}"  onLoad=${() => {  const imgEl = document.querySelector(  `.${hit.objectID} .aa-ItemPicture`,  );  imgEl.classList.add("aa-ItemPicture--loaded");  }}  />  </div>   <div class="aa-ItemContentBody">  <div>  ${hit.brand &&  html`  <div class="aa-ItemContentBrand">  ${components.Highlight({ hit, attribute: "brand" })}  </div>  `}  <div class="aa-ItemContentTitleWrapper">  <div class="aa-ItemContentTitle">  ${components.Highlight({ hit, attribute: "name" })}  </div>  </div>  </div>  <div>  <div class="aa-ItemContentPrice">  <div class="aa-ItemContentPriceCurrent">  ${formatPrice(hit.price.value, hit.price.currency)}  </div>  ${hit.price.on_sales &&  html`  <div class="aa-ItemContentPriceDiscounted">  ${formatPrice(hit.price.discounted_value, hit.price.currency)}  </div>  `}  </div>  <div class="aa-ItemContentRating">  <ul>  ${Array(5)  .fill(null)  .map(  (_, index) =>  html`<li key="${index}">  <div  class="${cx(  "aa-ItemIcon aa-ItemIcon--noBorder aa-StarIcon",  index >= hit.reviews.rating && "aa-StarIcon--muted",  )}"  >  <svg viewBox="0 0 24 24" fill="currentColor">  <path  d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"  />  </svg>  </div>  </li>`,  )}  </ul>  <span class="aa-ItemContentRatingReviews">  (${hit.reviews.count})  </span>  </div>  </div>  </div>  </div>  </a>  `; } 

// ...  autocomplete({  // ...  getSources() {  return [  // ...  {  sourceId: 'products',  getItems({ /_..._/ }) {  // ...  },  templates: {  item({ html, item, components }) {  return ProductItem({ html, hit: item, components });  },  },  // ...  },  ];  },  render({ elements, render, html }, root) {  const { recentSearchesPlugin, querySuggestionsPlugin, products } = elements;   render(  html`<div class="aa-PanelLayout aa-Panel--scrollable">  <div class="aa-PanelSections">  <div class="aa-PanelSection aa-PanelSection--left">  ${recentSearchesPlugin} ${querySuggestionsPlugin}  </div>  <div class="aa-PanelSection aa-PanelSection--right">  ${products}  </div>  </div>  </div>`,  root  );  }, });