Conseils utiles pour personnaliser l’engagement d’IBM Sterling Store / Blogs / Perficient

La personnalisation d’IBM Sterling Store Engagement permet aux entreprises d’adapter l’application à leurs besoins spécifiques, améliorant ainsi à la fois les fonctionnalités et l’expérience utilisateur. Ce guide fournit des conseils et des stratégies avancés aux parties prenantes techniques impliquées dans la personnalisation des composants de l’interface utilisateur de l’application IBM Sterling Store Engagement. Voici quelques conseils utiles pour commencer les efforts de personnalisation.

Comprendre l’architecture

Avant de commencer à personnaliser IBM Sterling Store Engagement, il est essentiel d’avoir une compréhension approfondie de son architecture. La plateforme est construite sur un cadre modulaire qui exploite des microservices, permettant des personnalisations flexibles et évolutives. Familiarisez-vous avec les composants clés, notamment le front-end (couche UI), les services back-end et les protocoles de communication entre eux. Savoir comment ces éléments interagissent vous aidera à identifier les meilleurs points d’intégration et de personnalisation. Ces connaissances fondamentales garantissent que vos personnalisations sont à la fois efficaces et maintenables, réduisant ainsi le risque de conflits et améliorant la stabilité globale de votre déploiement.

Disposition du répertoire de l’application

Comprendre la structure de l’interface utilisateur

Avant de personnaliser les composants de l’interface utilisateur, familiarisez-vous avec la structure et la présentation existantes d’IBM Sterling Store Engagement. Identifiez les composants que vous souhaitez modifier ou étendre en fonction des besoins de votre entreprise.

Personnalisation du composant de l’interface utilisateur

Pour ajouter un nouveau flux dans l’interface utilisateur, accédez au répertoire et exécutez la commande suivante :

fil nouvelle-extension-feature –module-name= –port=

• Crée une nouvelle application Angular avec le préfixe « isf » sous /extensions/features/.
• Installe un spa unique angulaire.
• Génère main.single-spa.ts dans le dossier src.
• Crée un module chargé paresseux avec dans le dossier src/app.
• Met à jour src/app-routing.module.ts avec :
  – Une route pour le module chargé paresseux.
  – Un EmptyRouteComponent pour les itinéraires sans correspondance.
• Ajoute des scripts de démarrage et de construction à package.json.
• Enregistre l’application dans /extensions/override-static-assets/root-config/custom/import-map.json.
• Génère des dossiers i18n dans src/assets pour la localisation, y compris un en.json vide dans src/assets//i18n.
• Configure TranslateModule pour charger les fichiers JSON du bundle de traduction approprié.

Personnalisation HTML et CSS

Localiser les fichiers de composants : accédez aux répertoires de composants appropriés dans la structure de votre projet. Mettez à jour les modèles HTML (.html) pour refléter de nouvelles mises en page ou incorporer des fonctionnalités supplémentaires. Ajuster CSS (.scss) pour correspondre aux directives de conception de votre marque ou améliorer l’attrait visuel. Tirez parti du matériel angulaire pour des éléments d’interface utilisateur cohérents, le cas échéant.

Amélioration des fonctionnalités des composants et des services angulaires

Étendre la logique des composants : si nécessaire, étendez les fichiers TypeScript (*.ts) pour ajouter ou modifier le comportement des composants. Écrivez la logique métier pour appeler l’application composite. Voici un exemple d’extrait de code.

Fichier Service.ts

import { Injectable } from '@angular/core';
import { MashupService, WizardService, AppCtxStore } from '@store/core';

@Injectable()
export class ExtnCustomDataService {

  private MASHUP_NAME = 'extn_isf_getOrderList';
  constructor(
    private _mashupService: MashupService,
  ) { }

  public getOrderList(input) {
    return this. _mashupService.callMashup(this. MASHUP_NAME, input,
      {'handleMashupError': true, 'showMask': false }).then(
        mashupOutput => this. _mashupService.getMashupOutput(mashupOutput, this. MASHUP_NAME),
        mashupError => Promise.reject(mashupError));
  }
}

Fichier composant.ts

this._extnCustomDataService. getOrderList (inputMashup).then((output) => {
 //logic to handle the mashup output
});

Navigation vers les itinéraires

La gestion efficace du routage est la clé d’une expérience utilisateur fluide. Voici comment gérer le routage. Les nouvelles routes sont présentes dans /extensions/root-config/custom.

{"type": "route",
    "path": "shell/module_name",
    "routes": [
      {
        "type": "application",
        "name": "module_name"
      }
    ]
  }

Communication avec différents composants

Les composants angulaires peuvent communiquer entre eux des manières suivantes :

• Parent à enfant : utilisation du décorateur @Input() pour transmettre des données d’un composant parent à un composant enfant.
• Enfant à parent : utilisation du décorateur @Output() et d’EventEmitter pour envoyer des données d’un composant enfant à un composant parent.
• Composants frères et sœurs : utilisation d’un service partagé pour échanger des données et des messages.
• Composants non liés : utilisant également un service partagé pour l’échange de données.
• Interaction des composants via ViewChild : accès aux méthodes et propriétés du composant enfant à l’aide du décorateur @ViewChild dans le composant parent.

Travailler avec des mashups

La couche Mashup est utilisée pour les appels XAPI permettant de gérer les données dans la couche backend. Chaque appel XAPI et plusieurs appels XAPI sont toujours appelés dans le cadre d’une seule transaction. Chaque XAPI multiple fait partie d’une seule transaction. La couche mashup est un mélange de XAPI et d’autres mashups.

Nouveaux mashups personnalisés

Enregistrez les applications composites personnalisées :
– Placez vos fichiers mashup personnalisés dans le répertoire /extensions/isf/webpages/mashupxmls/.
– Assurez-vous que chaque nom de fichier se termine par _mashups.xml.Convention de dénomination :
– Utilisez le format suivant pour l’ID d’application composite : extn_isf....

Remplacement des applications composites

Étendez une application composite fournie par l’application à l’aide de l’extensibilité de remplacement, copiez les applications composites existantes dans des fichiers portant le suffixe _overridemashups.xml dans le répertoire /extensions/isf/webpages/mashupxmls/.

Incrémentation des applications composites

Étendez les applications composites de manière incrémentielle, lorsque vous avez besoin d’ajouter des attributs à l’entrée ou à la sortie de l’application composite, copiez l’application composite existante dans des fichiers portant le suffixe _incrementalmashups.xml dans le répertoire /extensions/isf/webpages/mashupxmls/.

Copiez le fichier mashup mis à jour sur appserver- /smcfs.ear/isf.war/extn/mashupxmls

redémarrez le serveur d’applications pour valider vos modifications.

Essai

Pour vérifier localement le nouveau flux, démarrez l’application en exécutant la commande suivante :

Liens de référence :