Flux de rendu de résolution de présentation et SEO du magasin
Ce document fournit des informations sur la SEO du magasin (Optimisation du moteur de recherche) et le flux de rendu de présentation.
Le flux de rendu de résolution de présentation et SEO du magasin est comme illustré dans l'image ci-dessous :
Toutes les informations de magasin sont échangées entre le composant React, Elasticsearch et le serveur de transactions.
- Toutes les informations provenant du Centre de gestion seront partagées par une URL.
- Ces informations sont détectées par le composant SEO.
- Le composant SEO appelle le nœud final de l'URL du service REST Elasticsearch HCL Commerce.
- Le service d'URL peut répondre de l'une des deux manières suivantes :
- Avec les informations de présentation - Le composant SEO utilise les informations de présentation directement à partir de la réponse.
- Sans informations de présentation - En fonction du type de page, le composant SEO utilise la présentation par défaut du dossier de configuration default-layout du magasin par défaut src/configs/default-layout.
- La présentation de chargement différé répond avec un composant d'ordre élevé à l'aide de containerName à partir de l'objet de présentation. Les composants de présentation sont dans le dossier src/components/commerce-layouts.
- Les emplacements de chargement différé avec le composant d'ordre élevé de widget répondent à la présentation à l'aide de widgetName à partir de l'objet de présentation. Les composants du widget sont dans le dossier src/components/commerce-widgets.
- Le widget chargé va construire l'interface utilisateur à l'aide des données du serveur de transactions et du serveur de recherche.
Mappage de la définition de widget au composant React
Note: L'IDENTIFICATEUR dans la table PLWIDGETDEF est renvoyé en tant que containterName et widgetName dans l'objet de présentation de réponse de service URL. Ensuite, il est utilisé comme nom de fichier de composant React pour le chargement différé des présentations et des widgets.
Le tableau ci-dessous fournit plus d'informations sur les modèles de présentation et les identificateurs pris en charge pour Composeur de page :
| Canevas de présentation | IDENIFICATEUR de PLWIDGETDEF | Fichier de magasin React | Importer un composant à partir du package React-Component |
|---|---|---|---|
| Page de produit B2B | b2b-product-page | src/components/commerce-layouts/b2b-product-page.tsx | import { BreadcrumbWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Page Offre groupée | bundle-page | src/components/commerce-layouts/bundle-page.tsx | import { ProductPageLayout } from "@hcl-commerce-store-sdk/react-component"; |
| Page Panier | cart-page | src/components/commerce-layouts/cart-page.tsx | import {BuiltInPageLayout} from "@hcl-commerce-store-sdk/react-component"; |
| Page d'accueil Catégorie | category-landing-page | src/components/commerce-layouts/category-landing-page.tsx | import {ProductListingPageLayout }from "@hcl-commerce-store-sdk/react-component"; |
| Page Paiement | check-out-page | src/components/commerce-layouts/check-out-page.tsx | import {BuiltInPageLayout} from "@hcl-commerce-store-sdk/react-component"; |
| Page d'accueil | home-page | src/components/commerce-layouts/home-page.tsx | import {HomePageLayout } from "@hcl-commerce-store-sdk/react-component" |
| Page Kit | kit-page | src/components/commerce-layouts/kit-page.tsx | import { ProductPageLayout } from "@hcl-commerce-store-sdk/react-component"; |
| Page Confirmation de la commande | order-confirmation-page | src/components/commerce-layouts/order-confirmation-page.tsx | import {BuiltInPageLayout} from "@hcl-commerce-store-sdk/react-component"; |
| Page Liste de produits | product-listing-page | src/components/commerce-layouts/product-listing-page.tsx | import {ProductListingPageLayout }from "@hcl-commerce-store-sdk/react-component"; |
| Page de produit | product-page | src/components/commerce-layouts/product-page.tsx | import { ProductPageLayout } from "@hcl-commerce-store-sdk/react-component" |
Le tableau ci-dessous fournit plus d'informations sur le widget et les identificateurs pris en charge pour Composeur de page :
| Widget | Identificateur de PLWIDGETDEF | Fichier de magasin React | Importer un composant à partir du package React-Component |
|---|---|---|---|
| Filtre d'attribut | attribute-filter-widget | src/components/commerce-widgets/attribute-filter-widget.tsx | import { ProductAttributeFilterWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Trajet de navigation | breadcrumb-trail-widget | src/components/commerce-widgets/breadcrumb-trail-widget.tsx | import { BreadcrumbWidget } from "@hcl-commerce-store-sdk/react-component"; |
| D'offre groupée | bundle-widget | src/components/commerce-widgets/bundle-widget.tsx | import { BundleWidget, withCustomTableContext, } from "@hcl-commerce-store-sdk/react-component"; |
| Carrousel de contenu | content-carousel-widget | src/components/commerce-widgets/content-carousel-widget.tsx | import { ContentCarouselWidget} from "@hcl-commerce-store-sdk/react-component"; |
| Emplacement E-Marketing | e-marketing-spot-widget | src/components/commerce-widgets/e-marketing-spot-widget.tsx | import { EMarketingSpotWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Navigation à facettes | facet-navigation-widget | src/components/commerce-widgets/facet-navigation-widget.tsx | import { ProductFilterWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Produit vedette | featured-product-recommendation-widget | src/components/commerce-widgets/featured-product-recommendation-widget.tsx | S/O |
| De kit | kit-widget | src/components/commerce-widgets/kit-widget.tsx | import { KitWidget, withCustomTableContext, } from "@hcl-commerce-store-sdk/react-component"; |
| Contenu marketing | content-recommendation-widget | src/components/commerce-widgets/content-recommendation-widget.tsx | import { ContentRecommendationWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Détails du produit | product-details-widget | src/components/commerce-widgets/product-details-widget.tsx | S/O |
| Liste de produits | catalog-entry-list-widget | src/components/commerce-widgets/catalog-entry-list-widget.tsx | import { CatalogEntryListWidget as CatalogEntryList } from "@hcl-commerce-store-sdk/react-component"; |
| Récapitulatif des produits | product-information-widget | src/components/commerce-widgets/product-information-widget.tsx | import { ProductInformationWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Recommandation de catégories | category-recommendation-widget | src/components/commerce-widgets/category-recommendation-widget.tsx | import { CategoryRecommendationWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Produits recommandés | catalog-entry-recommendation-widget | src/components/commerce-widgets/catalog-entry-recommendation-widget.tsx | import { ProductRecommendationWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Produits associés | merchandising-association-widget | src/components/commerce-widgets/merchandising-association-widget.tsx | import { MerchandisingAssociationContent } from "@hcl-commerce-store-sdk/react-component"; |
| Liste des SKU | sku-list-widget | src/components/commerce-widgets/sku-list-widget.tsx | import { SkuListWidget } from "@hcl-commerce-store-sdk/react-component"; |
| Liste de sous-catégories | child-category-grid-widget | src/components/commerce-widgets/child-category-grid-widget.tsx | import { ChildCategoryGridWidget } from "@hcl-commerce-store-sdk/react-component"; |