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 9.1.7.0 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 9.1.10.0.
Note: The initial HCL Commerce Versions 9.1.7.0 and
9.1.8.0 widgets, only have Home Page, B2B Product Page, product Page, Category
Landing Page and Product Listing Page widgets.
Widgets such as Cart
Page, Checkout Page, Order Confirmation page, and Bundle Page widget are added, in
addition to the existing 9.1.8.0 Version widgets.
For HCL Commerce Versions 9.1.10.0 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 9.1.6.0., 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.