Conversion de la page d'accueil de catégorie en page compatible pour Composeur de page

Dans les pages compatibles pour Composeur de page introduites dans HCL Commerce version 9.1.7.0., les présentations et les widgets utilisés dans ces pages peuvent être gérés via .Le sujet suivant décrit les étapes à suivre pour convertir une page Catégorie en page compatible pour Composeur de page.

Procedure

Créez une présentation pour l'identificateur category-landing-page sous le chemin src/components/commerce-layouts d'accès avec le nom category-landing-page.tsx.

Cette présentation doit idéalement référencer le composant d'ordre supérieur withLayout appelé avec un composant qui référence deux widgets dans la présentation.

Cette présentation peut être similaire au fragment de code suivant :

/*
 *==================================================
 * Licensed Materials - Property of HCL Technologies
 *
 * HCL Commerce
 *
 * (C) Copyright HCL Technologies Limited 2020,2021
 *
 *==================================================
 */
//UI
import { CategoryLandingPageLayout } from "@hcl-commerce-store-sdk/react-component";
//Foundation
import { withLayout } from "../../_foundation/hooks/use-layout";

export default withLayout(CategoryLandingPageLayout);

De même, le composant CategoryLandingPageLayout peut être similaire au fragment de code suivant.

/*
 *==================================================
 * Licensed Materials - Property of HCL Technologies
 *
 * HCL Commerce
 *
 * (C) Copyright HCL Technologies Limited 2021
 *
 *==================================================
 */
//Standard libraries
import React from "react";
//UI
import { StyledGrid, StyledContainer } from "../../elements";
//types
import { PageLayoutProps } from "../..";

/**
 * Category Landing Page Layout
 * @description Two rows layout.
 * @param cid Unique identifier for this component.
 * @param slots All the slots containing commerce widgets in this layout.
 */
export const CategoryLandingPageLayout: React.FC<PageLayoutProps> = ({
  cid,
  slots = [],
  ...props
}) => {
  const SlotOne = () => {
    return (
      <>
        {slots["1"] && (
          <StyledGrid container>
            <StyledGrid item xs={12}>
              {slots["1"].map((e: any) => {
                const CurrentComponent = e.CurrentComponent;
                return <CurrentComponent key={e.key} />;
              })}
            </StyledGrid>
          </StyledGrid>
        )}
      </>
    );
  };

  const SlotTwo = () => {
    return (
      <>
        {slots["2"] && (
          <StyledGrid container>
            {slots["2"].map((e: any) => {
              const CurrentComponent = e.CurrentComponent;
              return (
                <StyledGrid item key={e.key} xs={12}>
                  <CurrentComponent />
                </StyledGrid>
              );
            })}
          </StyledGrid>
        )}
      </>
    );
  };

  return (
    <StyledContainer id={cid}>
      {slots["1"] ? <SlotOne /> : null}
      {slots["2"] ? <SlotTwo /> : null}
    </StyledContainer>
  );
};

Reportez-vous au tableau PLWIDGETDEF de HCL Commerce comme illustré dans l'image ci-dessous.
Note: Ici, les widgets purs sont identifiés avec la valeur WIDGETTYPE comme 1, tandis que les conteneurs sont identifiés avec la valeur WIDGETTYPE comme 2.
Créez deux widgets qui doivent être référencés dans la présentation récemment créée et placez-les sous le chemin src/components/commerce-widgets avec les noms e-marketing-spot-widget.tsx et child-category-grid-widget.tsx. Ces noms correspondent à la colonne IDENTIFIER du tableau PLWIDGETDEF avec le suffixe .tsx.
Créez une présentation pour Page d'accueil de catégorie dans CMC et affectez les deux types de widget dans les deux emplacements d'agencement, comme illustré dans l'image ci-dessous.
Note: L'image ci-dessus illustre l'affectation du widget Emplacement e-marketing à la présentation Page d'accueil de catégorie, à l'aide d'un e-marketing propre à une page et basé sur un suffixe.

Note: En l'absence de présentations valides, des présentations par défaut sont utilisées. Elles sont fournies dans la version 9170 sous le dossier src/configs/default-layout. Leur dénomination (sans l'extension de fichier) correspond à la colonne IDENTIFIER du tableau PLWIDGETDEF.