Search View component, this controls how the products are displayed on the front end.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @cityelectricalfactors/cef_search-view in KB


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
      <SearchViewComponent config={config} />,

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")

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.