Creating a custom widget

• L'ajout d'une définition de widget dans les outils dépend des définitions de widget fournies dans le tableau PLWIDGETDEF. Avant d'apporter des modifications à l'interface utilisateur des outils, les définitions de widget doivent être insérées dans le tableau. Dans cet exemple, une définition de widget pour l'ID de magasin (STOREENT) 0 est ajoutée :

  INSERT INTO PLWIDGETDEF(PLWIDGETDEF_ID, STOREENT_ID, IDENTIFIER, VENDOR, WIDGETTYPE, JSPPATH, DEFINITIONXML, STATE, CREATEDATE, LASTUPDATE) 
  VALUES(-100000, 0, 'example_widget', 'hcl', 1, '', '<Definition> </Definition>', 1, CURRENT DATE, CURRENT DATE);

  Note: La valeur de PLWIDGETDEF_ID doit être unique. Ne sélectionnez pas une valeur proche des valeurs par défaut. Cela évitera les conflits avec les futures définitions de widget fournies par HCL Commerce.
  Query: SELECT * FROM plwidgetdef ORDER BY PLWIDGETDEF_ID

  Table 2. Tableau PLWIDGETDEF

  PLWIDGETDEF_ID	STOREENT_ID	IDENTIFIER	UI_OBJECT_NAME	VENDOR	WIDGETTYPE	DEFENITIONXML
  1504	11501	'SubCategoryPageContainer'	NULL	'ibm'	2	'Container/SubCategoryPageContainer.jsp'
  1505	11501	'SearchLandingPageContainer'	NULL	'ibm'	2	'Container/LandingPageContainer.jsp'
  1506	11501	'StaticContentContainer'	NULL	'ibm'	2	'Container/StaticContentContainer.jsp'
  1507	11501	'SearchResultPageContainer'	NULL	'ibm'	2	'Container/SubCategoryPageContainerWithTabs.jsp'
  1508	11501	'ProductPageContainer'	NULL	'ibm'	2	'Container/ProductPageContainer.jsp'
  1509	11501	'ProductPageContainer(2)'	NULL	'ibm'	2	'Container/ProductPageContainerFullWidth.jsp'
  -100000	11501	'example_widget'	NULL	hcl'	1	''

INSERT INTO WCS.PLSTOREWIDGET 

(PLSTOREWIDGET_ID, STOREENT_ID, PLWIDGETDEF_ID, STATE, DEFINITIONXML, OPTCOUNTER) 

VALUES(-100000, 12501, -100000, 1, NULL, 0);

• Détails du widget Présentation
• Widget Présentation, qui se trouve sous le répertoire des composants du générateur de page. Ce répertoire se trouve à l'adresse commerce-tooling/src/app/features/page-builder/components.

• layout-widgets.component.ts
• layout-widgets.component.html
• layout-widgets.component.scss
• layout-widgets.json

{
"id": "-100000",
"name": "example-widget",
"title": "PAGE_BUILDER.EXAMPLE_WIDGET",
"description": "PAGE_BUILDER.EXAMPLE_WIDGET_DESCRIPTION",
"properties": [
{
"name": "title",
"value": "Title!"
},
{
"name": "height",
"value": "short"
}

"EXAMPLE_WIDGET": "Example Widget",
"EXAMPLE_WIDGET_DESCRIPTION": "Example widget description!",
"TITLE": "Title",
"HEIGHT": "Height",
"SHORT": "Short",
"TALL": "Tall",
"INVALID_TITLE": "Invalid title",

• layout-widget-details.json : Les détails du widget sont définis et répertoriés dans ce fichier.
  • Mettez à jour le fichier layout-widget-details.json avec les lignes de code suivantes :

    {
    "id": "-100000",
    "title": "PAGE_BUILDER.EXAMPLE_WIDGET",
    "exampleWidgetType: true
    }

    Note: Comme il s'agit d'un widget personnalisé, l'indicateur example-widget-type est ajouté, car les paramètres qu'il contient sont différents des autres widgets.
• layout-widget-details.component.html : Il s'agit du modèle du composant layout-widget-details. En fonction du type de widget, ce fichier doit être mis à jour pour l'entrée de texte et une entrée de boîte radio avec un indicateur qui active ou désactive les zones personnalisées.
  • Mettez à jour le fichier layout-widget-details.component.html avec les lignes de code suivantes :

    <ng-container *ngIf="widgetType.exampleWidgetType">
    <mat-form-field appearance="outline">
    <mat-label>{{'PAGE_BUILDER.TITLE' | translate}}</mat-label>
    <input matInput id="titleInput" formControlName="titleInput" [maxlength]="256" autocomplete="off">
    <mat-error *ngIf="titleInput.errors">
    {{'PAGE_BUILDER.INVALID_TITLE' | translate }}
    </mat-error>
    </mat-form-field>
    <div class="hc-type-label">{{ 'PAGE_BUILDER.HEIGHT' | translate }}</div>
    <mat-radio-group formControlName="height">
    <mat-radio-button value="short">{{'PAGE_BUILDER.SHORT'| translate}}</mat-radio-button>
    <mat-radio-button value="tall">{{'PAGE_BUILDER.TALL'| translate}}</mat-radio-button>
    </mat-radio-group>
    </ng-container>

• layout-widget-details.component.ts : Ce fichier agit en tant que contrôleur du composant. Voici les quelques fonctions qui peuvent être gérées en mettant à jour ce fichier :
  1. Chargement des détails du widget à partir du fichier layout-widget-details.json.
  2. Définition des indicateurs nécessaires.
  3. Contrôle des modifications apportées au widget.
  4. Conservation des modifications apportées au widget.
  • Ajoutez deux contrôles de formulaire, titleInput et height. Mettez à jour le fichier avec les lignes de code suivantes :

    widgetTypes: Array<any> = (LayoutWidgetTypes as any).default;
    widgetType: any = null;
    widgetForm: FormGroup;
    name: FormControl;
    wrap: FormControl;
    autoSlideshow: FormControl;
    interval: FormControl;
    playDirection: FormControl;
    populationChoice: FormControl;
    emsType: FormControl;
    emsName: FormControl;
    titleInput: FormControl;
    height: FormControl;
    
    @ViewChild("nameInput") nameInput: ElementRef<HTMLInputElement>;

  • Définissez et initialisez les contrôles titleInput et height. Modifiez les méthodes createFormControls() et createForm() pour définir et initialiser les contrôles.
  • Mettez à jour le fichier avec les lignes de code suivantes :

    this.height.setValue(widgetProperties.height);
    if (this.widgetType?.exampleWidgetType) {
    this.titleInput.enable();
    this.height.enable();
    } else {
    this.titleInput.disable();
    this.height.disable();
    }

    private createForm() {
    this.widgetForm = new FormGroup({
    name: this.name,
    wrap: this.wrap,
    autoSlideshow: this.autoSlideshow,
    interval: this.interval,
    playDirection: this.playDirection,
    populationChoice: this.populationChoice,
    emsType: this.emsType,
    emsName: this.emsName,
    titleInput: this.titleInput,
    height: this.height
    });
    }
    }

  • Implémentez la logique de chargement initiale pour les zones personnalisées dans la méthode initialize(). Mettez à jour le fichier avec les lignes de code suivantes :

    this.emsName.setValue(widgetProperties.emsName);
    this.titleInput.setValue(widgetProperties.title);
    this.height.setValue(widgetProperties.height);
    if (this.widgetType?.exampleWidgetType) {
    	this.titleInput.enable();
    	this.height.enable();
    } else {
    	this.titleInput.disable();
    	this.height.disable();				
    }
    if (this.widgetType?.selectMarketingSpot && widgetProperties.emsType === "local") {
    	this.emsName.enable();
    } else {
    	this.emsName.disable();
    }
    if (this.widgetType?.carousel) {
    	this.interval.enable();
    } else {
    	this.interval.disable();
    }
    } else {
    	this.name.setValue("");
    	this.wrap.setValue(false);
    	this.autoSlideshow.setValue(false);
    	this.interval.setValue(5000);
    	this.playDirection.setValue("forward");
    	this.populationChoice.setValue(null);
    	this.emsType.setValue(null);
    	this.emsName.setValue("");
    	this.titleInput.setValue("");
    	this.height.setValue(null);
    }
    }

  • Implémentez la logique de conservation des détails du widget dans la méthodesave(). Mettez à jour le fichier avec les lignes de code suivantes :

    if (this.widgetType?.exampleWidgetType) {
    		this.updateProperty("titleInput", this.titleInput.value);
    		this.updateProperty("height", this.height.value);
    	}

  • Enregistrez et fermez le fichier. Le panneau des détails du widget apparaît dans l'onglet Widget de la section Présentation, comme illustré dans l'image ci-dessous :