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:
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:
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"; |