HCL Commerce Version or later

Page Composer for React store

You can create a React Store using the HCL Commerce Store SDK that is provided for pages and react components. The Store SDK allows your front end developers to quickly develop and deploy a Store specially Sapphire and Emerald while focusing on creating the best user experience possible.

You can visit the Management Center for HCL Commerce to learn more about how Page Composer works with Emerald and Sapphire store. The related documentation can be found at Page Composer tool.

The Page Composer-enabled pages introduced in Version have layouts and the widgets that can be managed through Management Center. These Page Composer enabled pages have a provision for some predefined layouts as shown in the following image that depicts the templates for HCL Commerce Versions
Note: The initial HCL Commerce Versions and widgets, only have Home Page, B2B Product Page, product Page, Category Landing Page and Product Listing Page widgets.

HCL Commerce Version or laterWidgets such as Cart Page, Checkout Page, Order Confirmation page, and Bundle Page widget are added, in addition to the existing Version widgets.

HCL Commerce Version or laterFor HCL Commerce Versions and onwards, a new Kit Page widget is added.

Note: The managed portions managed by the Page Composer tool for each layout are highlighted in light blue color. The header and footer in the Emerald store are not managed by the Page Composer tool.

Refer to the topic Page Composer overview to explore the Page Composer layouts.

The following is the default Category Landing Page layout, which can be similar to the Emerald Store image shown below. Here, the first slot consists of an e-marketing-spot widget and the second slot has the child-category-grid widget.

Note: In HCL Commerce Version, this Category Landing page was rendered using src/components/layouts/category-page/CategoryPageLayout.tsx component. The rendered layout obtained as the output was similar to the OOTB layouts. However, in this file, the slots were hard-coded with the CategoryRecommendationLayout and ChildPimCategoriesLayout components, invoked from the src/components/pages-seo/category/Category.tsx component that was resolved by the SEO reducer.