0.0.3-beta.12 • Published 4 years ago
@hcl-csdk/layout-react v0.0.3-beta.12
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} />
..
0.0.3-beta.11
4 years ago
0.0.3-beta.12
4 years ago
0.0.3-beta.10
4 years ago
0.0.3-beta.9
4 years ago
0.0.3-beta.8
4 years ago
0.0.3-beta.7
4 years ago
0.0.3-beta.6
4 years ago
0.0.3-beta.3
4 years ago
0.0.3-beta.4
4 years ago
0.0.3-beta.5
4 years ago
0.0.3-beta.2
4 years ago
0.0.3-beta.1
4 years ago
0.0.3-beta.0
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago