CEF Search View Component

This component is to be used in conjunction with the CEF Search Gem.

Important info regarding the component.

This is the generic pack file example for our components.

Once you have pulled this in via yarn (yarn add 'cef_component-name') please change the import name and from to the component name.

You will also need to wrap the javascript_pack_tag call with a class to match the component name, for example component = cef_search-view, class = .cef_search-view.

import { render } from "react-dom";
import React from "react";
import SearchViewComponent from "@cityelectricalfactors/cef_search-view";

document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".search-view")) {
    const node = document.querySelector(".search-view");
    const searchTerm = node.getAttribute("data-search-term");
    const siteName = node.getAttribute("data-site-name");
    const requestPath = node.getAttribute("data-request-path");
    const mode = node.getAttribute("data-mode");
    

    const config = {
      searchUrl: `${requestPath}.json`,
      showSidebar: true,
      showHeader: true,
      showContent: true,
      showPagination: true,
      searchTerm: searchTerm,
      sidebarType: "filters || categories",
      flexDirection: "row",
      contentFlexDirection: "row",
      mode: mode,
      showAddToFavourites: false,
      showBrandImage: true,
      showCompare: true,
      showPrice: true,
      showAddToBasket: true,
      siteName: siteName,
      compareAmount: 5
    };
    render(
      <SearchViewComponent config={config} />,
      document.querySelector(".search-view")
    );
  }
});

Inside your Rails view you'll then need to call the component. This can be done by using the following. The data-attributes are required by the component above.

%section.search-view{'data-search-term': params[:q], 'data-site-name': t("general.site_name"), "data-mode": "search", "data-request-path": request.path}
  = javascript_pack_tag("COMPONENTNAME")