HCL Commerce Version 9.1.7.0 or later

Store SEO and Layout resolution rendering flow

This document provides information about the store SEO (Search Engine Optimization) and layout rendering flow.

Store SEO and Layout resolution rendering flow is as shown in the image below:

All the store information is exchanged between React Component, Elastic search, and Transaction server.
  • All the information that is taken from the Management Center will be shared across by a URL.
  • This information is detected by the SEO component.
  • SEO component invokes HCL Commerce Elastic Search REST service URL endpoint.
  • URL service can respond in either of the two ways mentioned below:
    • With layout information - SEO component uses the layout information directly from the response.
    • Without layout information - Based upon the page type, SEO component uses default layout from store default-layout configuration folder src/configs/default-layout.
  • Lazy load layout responds with high order component using containerName from layout object. The layout components are in src/components/commerce-layouts folder.
  • Lazy load slots with widget high order component responds to layout using widgetName from layout object. The widget components are in src/components/commerce-widgets folder.
  • Loaded widget will construct the UI using the data from Transaction server and Search server.

Mapping Widget definition to React Component

Note: IDENTIFIER in PLWIDGETDEF table is returned as containterName and widgetName in URL service response layout object Then it is used as React component filename for lazy loading the layouts and widgets.
The table below provides more information on Layout templates and Identifiers supported for Page Composer:
Table 1. OOTB Layout Mapping
Layout Template IDENIFIER from PLWIDGETDEF React store file Import component from React-Component package
B2B Product Page b2b-product-page src/components/commerce-layouts/b2b-product-page.tsx import { BreadcrumbWidget } from "@hcl-commerce-store-sdk/react-component";​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Bundle Page bundle-page src/components/commerce-layouts/bundle-page.tsx import { ProductPageLayout } from "@hcl-commerce-store-sdk/react-component";
Cart Page cart-page src/components/commerce-layouts/cart-page.tsx import {​​​​​​​BuiltInPageLayout}​​​​​​​​​​​​​​ from "@hcl-commerce-store-sdk/react-component";
Category Landing Page category-landing-page src/components/commerce-layouts/category-landing-page.tsx import {​​​​​​​​​​​​​​ProductListingPageLayout }​​​​​​​​​​​​​​from "@hcl-commerce-store-sdk/react-component";​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Checkout Page check-out-page src/components/commerce-layouts/check-out-page.tsx import {​​​​​​​BuiltInPageLayout}​​​​​​​​​​​​​​ from "@hcl-commerce-store-sdk/react-component";
Home Page home-page src/components/commerce-layouts/home-page.tsx import {​​​​​​​​​​​​​​HomePageLayout }​​​​​​​​​​​​​​ from "@hcl-commerce-store-sdk/react-component"​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Kit Page kit-page src/components/commerce-layouts/kit-page.tsx import { ProductPageLayout } from "@hcl-commerce-store-sdk/react-component";
Order Confirmation page order-confirmation-page src/components/commerce-layouts/order-confirmation-page.tsx import {​​​​​​​BuiltInPageLayout}​​​​​​​​​​​​​​ from "@hcl-commerce-store-sdk/react-component";
Product Listing page product-listing-page src/components/commerce-layouts/product-listing-page.tsx import {​​​​​​​​​​​​​​ProductListingPageLayout }​​​​​​​​​​​​​​from "@hcl-commerce-store-sdk/react-component";​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Product Page product-page src/components/commerce-layouts/product-page.tsx import {​​​​​​​ ProductPageLayout }​​​​​​​​​​​​​​ from "@hcl-commerce-store-sdk/react-component"​​​​​​​​​​​​​​​​​​​​​
The table below provides more information on Widget and Identifiers supported for Page Composer:
Table 2. OOTB Widgets
Widget Identifier from PLWIDGETDEF React store file Import component from React-Component package
Attribute Filter attribute-filter-widget src/components/commerce-widgets/attribute-filter-widget.tsx import { ProductAttributeFilterWidget } from "@hcl-commerce-store-sdk/react-component";
Breadcrumb Trail breadcrumb-trail-widget src/components/commerce-widgets/breadcrumb-trail-widget.tsx import { BreadcrumbWidget } from "@hcl-commerce-store-sdk/react-component";
Bundle bundle-widget src/components/commerce-widgets/bundle-widget.tsx import { BundleWidget, withCustomTableContext, } from "@hcl-commerce-store-sdk/react-component";
Content Carousel content-carousel-widget src/components/commerce-widgets/content-carousel-widget.tsx import { ContentCarouselWidget} from "@hcl-commerce-store-sdk/react-component";
E-Marketing Spot e-marketing-spot-widget src/components/commerce-widgets/e-marketing-spot-widget.tsx import { EMarketingSpotWidget } from "@hcl-commerce-store-sdk/react-component";
Facet Navigation facet-navigation-widget src/components/commerce-widgets/facet-navigation-widget.tsx import { ProductFilterWidget } from "@hcl-commerce-store-sdk/react-component";
Featured Product featured-product-recommendation-widget src/components/commerce-widgets/featured-product-recommendation-widget.tsx N/A
Kit kit-widget src/components/commerce-widgets/kit-widget.tsx import { KitWidget, withCustomTableContext, } from "@hcl-commerce-store-sdk/react-component";
Marketing Content content-recommendation-widget src/components/commerce-widgets/content-recommendation-widget.tsx import { ContentRecommendationWidget } from "@hcl-commerce-store-sdk/react-component";
Product Details product-details-widget src/components/commerce-widgets/product-details-widget.tsx N/A
Product List catalog-entry-list-widget src/components/commerce-widgets/catalog-entry-list-widget.tsx import { CatalogEntryListWidget as CatalogEntryList } from "@hcl-commerce-store-sdk/react-component";
Product Summary product-information-widget src/components/commerce-widgets/product-information-widget.tsx import { ProductInformationWidget } from "@hcl-commerce-store-sdk/react-component";
Recommend Categories category-recommendation-widget src/components/commerce-widgets/category-recommendation-widget.tsx import { CategoryRecommendationWidget } from "@hcl-commerce-store-sdk/react-component";
Recommend Products catalog-entry-recommendation-widget src/components/commerce-widgets/catalog-entry-recommendation-widget.tsx import { ProductRecommendationWidget } from "@hcl-commerce-store-sdk/react-component";
Related Products merchandising-association-widget src/components/commerce-widgets/merchandising-association-widget.tsx import { MerchandisingAssociationContent } from "@hcl-commerce-store-sdk/react-component";
SKU List sku-list-widget src/components/commerce-widgets/sku-list-widget.tsx import { SkuListWidget } from "@hcl-commerce-store-sdk/react-component";
Subcategory List child-category-grid-widget src/components/commerce-widgets/child-category-grid-widget.tsx import { ChildCategoryGridWidget } from "@hcl-commerce-store-sdk/react-component";