HCL Commerce React store layout rendering

This module is part of HCL Commerce Store development kit (CSDK) that can be used by React based application to build React web app against HCL Commerce.

Usage

npm install @hcl-csdk@layout-react --save

To use in your HCL Commerce React store project

import { registerComponent, forSite } from "@hcl-csdk/layout-react";
const site = {
  storeID: "13501",
  storeName: "Stockholm",
  transactionContext: "wcs/resources",
  searchContext: "search/resources"
};
forSite(site); // register your site
registerComponent(
  // register your component
  "StandardPageHero2BlocksLayout",
  "standard-page-hero-2-blocks",
  () =>
    import("./components/pages/standard-page-hero-2-blocks").then(
      m => m.StandardPageHero2BlocksLayout
    )
);

Hooks

useSite hook

const Header: React.FC<HeaderProps> = (props: any) => {
  const [topCategories, setTopCategories] = useState<Array<any>>([]);
  const mySite: any = useSite();
  useEffect(() => {
    if (mySite !== null) {
      const storeID: string = mySite.storeID;
      const parameters: any = {
        storeId: storeID,
        depthAndLimit: TOP_CATEGORIES_DEPTH_LIMIT
      };
      categoryViewService
        .findTopCategories(parameters, null, mySite.searchContext)
        .then(res => {
          setTopCategories(res.data.catalogGroupView);
        });
    }
  }, [mySite]);

Components

ContentRef

ContentRef takes a cid context ID as part of props.

import React from "react";

import { ContentRef } from "@hcl-csdk/layout-react";

const Footer = props => {
  return <ContentRef cid="ae72d304-ad18-4bf3-b213-4a79c829e458" />;
};

ContentRender

ContentRender expect RenderingContext to be passed in.

import React from "react";

import { ContentRender } from "@hcl-csdk/layout-react";

const Example = props => {
  return (
    <>
      <div className="grid-container">
        <ContentRender renderingContext={props.renderingContenxt} />
      </div>
    </>
  );
};

Page

Page is an entry point for utilizing HCL Commerce Search and Transacton layout framework.

import React, { Component, Fragment } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Page } from "@hcl-csdk/layout-react";

..
<Route exact path="/*" component={Page} />
..