CIF Live Search live-search-cif-component

embed="[core.cif.components.common,core.cif.components.product.v3,core.cif.components.productcarousel.v1,core.cif.components.productcollection.v2,core.cif.components.productteaser.v1,core.cif.components.searchbar.v2,core.cif.components.header.v1,core.cif.components.carousel.v1,core.cif.components.categorycarousel.v1,core.cif.components.featuredcategorylist.v1,core.cif.components.storefront-events.v1,core.cif.components.extensions.product-recs.storefront-events-collector.v1,core.wcm.components.commons.site.link,core.cif.productlist.v1]"

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
  jcr:primaryType="cq:ClientLibraryFolder"
  allowProxy="{Boolean}true"
  categories="[core.cif.productlist.v1]"
  jsProcessor="[default:none,min:none]"/>

#base=css

productlist.css

  /* #search-plp-root */

html {
  font-size: 62.5% !important;
}

body {
  font-size: 1.6rem;
}

.root.container {
  max-width: inherit;
}

.container {
  margin-left: auto;
  margin-right: auto;
}

div.ds-sdk-sort-dropdown {
  z-index: 9;
}

js/productlist.js

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2023 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
"use strict";

class ProductList {
  constructor() {
    const stateObject = {
      categoryName: null,
      currentCategoryUrlPath: null,
    };
    this._state = stateObject;
    this._init();
  }

  _init() {
    this._initWidgetPLP();
  }

  _injectStoreScript(src) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = src;

    document.head.appendChild(script);
  }

  async _getStoreData() {
    // get from session storage
    const sessionData = sessionStorage.getItem(
      "WIDGET_STOREFRONT_INSTANCE_CONTEXT"
    );
    // WIDGET_STOREFRONT_INSTANCE_CONTEXT is set from searchbar/clientlibs/js/searchbar.js
    // if not, we will need to retrieve from graphql separately here.

    if (sessionData) {
      this._state.dataServicesSessionContext = JSON.parse(sessionData);
      return;
    }
  }

  getStoreConfigMetadata() {
    const storeConfig = JSON.parse(
      document
        .querySelector("meta[name='store-config']")
        .getAttribute("content")
    );

    const { storeRootUrl } = storeConfig;
    const redirectUrl = storeRootUrl.split(".html")[0];
    return { storeConfig, redirectUrl };
  }

  async _initWidgetPLP() {
    if (!window.LiveSearchPLP) {
      const liveSearchPlpSrc =
        "https://plp-widgets-ui.magento-ds.com/v1/search.js";
      this._injectStoreScript(liveSearchPlpSrc);
      // wait until script is loaded
      await new Promise((resolve) => {
        const interval = setInterval(() => {
          if (window.LiveSearchPLP && window.LiveSearchAutocomplete) {
            // Widget expects LiveSearchAutocomplete already loaded to rely on data-service-graphql
            clearInterval(interval);
            resolve();
          }
        }, 200);
      });
    }
    await this._getStoreData();
    const { dataServicesSessionContext } = this._state;
    if (!dataServicesSessionContext) {
      console.log("no dataServicesSessionContext");
      return;
    }

    const root = document.getElementById("search-plp-root");
    if (!root) {
      console.log("plp root not found.");
      return;
    }
    // get dataset from root
    const categoryUrlPath = root.getAttribute("data-plp-urlPath") || "";
    const categoryName = root.getAttribute("data-plp-title") || "";
    const storeDetails = {
      environmentId: dataServicesSessionContext.environment_id,
      environmentType: dataServicesSessionContext.environment,
      apiKey: dataServicesSessionContext.api_key,
      websiteCode: dataServicesSessionContext.website_code,
      storeCode: dataServicesSessionContext.store_code,
      storeViewCode: dataServicesSessionContext.store_view_code,
      config: {
        pageSize: dataServicesSessionContext.page_size,
        perPageConfig: {
          pageSizeOptions: dataServicesSessionContext.page_size_options,
          defaultPageSizeOption:
            dataServicesSessionContext.default_page_size_option,
        },
        minQueryLength: dataServicesSessionContext.min_query_length,
        currencySymbol: dataServicesSessionContext.currency_symbol,
        currencyRate: dataServicesSessionContext.currency_rate,
        displayOutOfStock: dataServicesSessionContext.display_out_of_stock,
        allowAllProducts: dataServicesSessionContext.allow_all_products,
        locale: dataServicesSessionContext.locale,
        currentCategoryUrlPath: categoryUrlPath,
        categoryName,
        displayMode: "", // "" for plp || "PAGE" for category/catalog
      },
      context: {
        customerGroup: dataServicesSessionContext.customer_group,
      },
      route: ({ sku }) => {
        return `${
          this.getStoreConfigMetadata().redirectUrl
        }.cifproductredirect.html/${sku}`;
      },
      searchQuery: "search_query",
    };
    setTimeout(() => {
      console.log("init PLP");
      window.LiveSearchPLP({ storeDetails, root });
    }, 0);
  }
}

(function () {
  function onDocumentReady() {
    new ProductList({});
  }

  if (document.readyState !== "loading") {
    onDocumentReady();
  } else {
    document.addEventListener("DOMContentLoaded", onDocumentReady);
  }
})();

<div
data-sly-use.productList="com.adobe.cq.commerce.core.components.models.productlist.ProductList"
id="search-plp-root"
class="productlist__root"
data-plp-urlPath="${productList.storefrontContext.urlPath}"
data-plp-title="${productList.title}">
</div>

sling:resourceSuperType="venia/components/commerce/productlist"

sling:resourceType="venia/components/commerce/productlist"

sling:resourceType="venia/components/commerce/productlist"

import '@adobe/magento-storefront-event-collector';

describe.skip('Product List Component Dialog', function () {