Liferay Commerce - Plongée dans l'architecture des produits

Dans cet article de notre série dédiée à Liferay Commerce, nous allons explorer certains éléments fondamentaux de l'architecture des produits, en nous concentrant sur ce qui est visible pour les utilisateurs dans les pages de catalogue, de comparateur ou de détail produit.

Au centre de la personnalisation de l'affichage des produits se trouvent les objets CPCatalogEntry et CPSku. Ces objets sont conçus pour maximiser les performances tout en réduisant la charge des requêtes. Ils encapsulent les informations essentielles nécessaires à l'affichage des produits, sans être directement liés à la base de données. Cette conception permet de fluidifier l'expérience utilisateur et de rendre le système plus réactif.

CPCatalogEntry

Package : com.liferay.commerce.product.catalog

Cet objet joue un rôle crucial dans l'affichage des aspects de base d'un produit. Il encapsule les informations essentielles du produit comme :

• Dimensions du produit

• Noms

• Descriptions

• URL simplifiée

• Mots clés

• Type de produit

• la liste des CPSku

• la liste de CPDefinitionOptionRel

• CPDefinitionId

• CPProductId

La plupart de ces propriétés sont traduisibles et sont du type Map<Locale,String>, vous permettant de gérer facilement l’internationalisation de votre site.

Vous retrouverez ces éléments dans l’onglet “Détail” de la page produit dans le back-office (Applications Menu > Commerce > Products Management > Products)

Exemple de produit tiré du Site Intializer Minium : vitrine du module commerce de Liferay

---

Voici quelques exemples permettant de récupérer les propriétés de cet objet sur les différentes pages du site :

1. Personnalisation du comparateur (Compare) ou la barre de comparaison (MiniCompare):

La personnalisation du comparateur (Compare) ou de la barre de comparaison (MiniCompare) est un aspect que nous souhaitons examiner de manière plus détaillée, avant d'aborder plus rapidement les autres pages.

Il existe plusieurs méthodes pour personnaliser ces éléments.

a. Les widgets templates

Tout d'abord, vous pouvez créer un nouveau widget template depuis l'onglet " Widget Templates " de la page Design > Templates.

Les templates " Product Comparison Bar Template", pour la barre de comparaison, et " Product Comparison Table Template", pour le comparateur, vous permettront de donner le visuel que vous souhaitez à ces deux éléments du comparateur.

Liferay facilite la récupération des propriétés du CPCatalogEntry grâce au champ " Commerce Product Catalog Entries" dans l'écran de construction des templates. En cliquant dessus, il vous permet de rajouter automatiquement le code nécessaire pour boucler sur les produits présents dans le comparateur. Vous pourrez ainsi récupérer les propriétés de cet objet et les afficher comme vous le souhaitez. 

<#if entries?has_content>
	<#list entries as curCPCatalogEntry>
		${curCPCatalogEntry.CPDefinitionId}
	</#list>
</#if> 

Bien que cette technique soit facile d'accès et permette une modification rapide de l'affichage, elle présente quelques points faibles.

Tout d'abord, il peut être difficile d'appliquer un style entièrement personnalisé à ce code sans utiliser les classes prédéfinies de Clay ou de votre thème.
De plus, il peut parfois être ardu d'assurer une synchronisation parfaite entre votre dépôt Git et la version présente sur le site sans utiliser un Site Initializer (outil très puissant permettant de créer des templates intégrant la quasi totalité des éléments d’un site, des fragments aux rôles des utilisateurs).
Enfin, il est déconseillé d'ajouter de la logique à ce code.

b. Créer votre propre portlet MVC

Si vous avez besoin d'une personnalisation plus poussée de votre comparateur, envisagez la création d'un portlet MVC. Cette approche vous garantira le contrôle total sur la version déployée sur votre site, vous permettant d'ajouter facilement le style ou la logique nécessaires.

Voici comment débuter le renderer du comparateur :

@Component(property = {
        "commerce.product.content.list.renderer.key=beorn-compare",
        "commerce.product.content.renderer.order=" + Integer.MIN_VALUE,
        "commerce.product.content.list.renderer.portlet.name=" + CPPortletKeys.CP_COMPARE_CONTENT_WEB
}, service = CPContentListRenderer.class)
public class CPCompareRenderer implements CPContentListRenderer {

Pour la barre de comparaison, remplacer simplement le CP_COMPARE_CONTENT_WEB par CP_COMPARE_CONTENT_MINI_WEB.

Votre renderer implémentera l’interface com.liferay.commerce.product.content.render.list.CPContentListRenderer de Liferay et devra surcharger trois fonctions :

@Override
    public String getKey() {
        return TEMPLATE_KEY;
    }

Qui permet de récupérer la clef du titre du template.

 

@Override
    public String getLabel(Locale locale) {
        ResourceBundle resourceBundle = ResourceBundleUtil.getBundle(
                "content.Language", locale, getClass());

        return language.get(resourceBundle, TEMPLATE_KEY);
    }

Pour récupérer le titre de la template dans la langue de l’utilisateur.

Et enfin la procédure render qui prend en paramètres l'HttpServletRequest et l'HttpServletResponse afin de rendre la vue.

@Override
    public void render(
            HttpServletRequest httpServletRequest,
            HttpServletResponse httpServletResponse)
            throws Exception {
            
            // Le reste du code
            
            jspRenderer.renderJSP(
                servletContext, httpServletRequest, httpServletResponse, "/compare/view.jsp"); 
    }

Pour récupérer la liste des CPCatalogEntry dans le cadre du comparateur, vous pouvez utiliser le CPDataSourceResult inclus dans la requête. Voici un extrait de code illustrant cette récupération :

CPDataSourceResult cpDataSourceResult = (CPDataSourceResult) httpServletRequest
                                        .getAttribute(CPWebKeys.CP_DATA_SOURCE_RESULT);
List<CPCatalogEntry> cpCatalogEntries = cpDataSourceResult.getCPCatalogEntries();

 

3. Personnalisation d’un résultat de recherche ou d’un élément d’une collection de produit

Lorsque vous souhaitez customiser les cartes des produits lors de l’affichage des résultats de recherche ou d’une collection, vous pouvez récupérer le CPCatalogEntry dans votre requête à l’aide du CPContentHelper inclus dans la requête comme ceci :

CPContentHelper cpContentHelper = (CPContentHelper) httpServletRequest
                                  .getAttribute(CPContentWebKeys.CP_CONTENT_HELPER);
CPCatalogEntry cpCatalogEntry = cpContentHelper.getCPCatalogEntry(httpServletRequest); 

 

Les CPDefinitionOption

Package : com.liferay.commerce.product.model

Dans l'écosystème de Liferay Commerce, les CPDefinitionOption représentent les caractéristiques des produits susceptibles de varier, telles que la taille, la couleur ou le conditionnement. Ces options sont essentielles pour définir les différentes variantes ou SKU (Stock Keeping Unit, en français UGS : Unité de Gestion de Stock) d'un produit.

Les CPDefinitionOption ne se limitent pas à la simple définition des variantes de produits.  Elles jouent également un rôle crucial dans l'implémentation de diverses fonctionnalités, telles que :

• Création de filtres pour le catalogue produits :
  Elles permettent de créer des filtres dynamiques pour améliorer la navigation et la recherche des produits dans votre catalogue.

• Association d'images ou documents à des options spécifiques :
  Elles permettent d'afficher des images ou documents relatifs aux variantes choisies par l'utilisateur, enrichissant ainsi l'expérience visuelle et informative des produits.

Vous pouvez retrouver ces éléments dans l'onglet "Option" de la page produit dans le back-office de Liferay (Applications Menu > Commerce > Products Management > Products).

 

Les CPDefinitionOption contiennent les propriétés suivantes :

• Clé

• Noms (traduisibles)

• Descriptions (traduisibles)

• Le type de valeurs possible pour cette option (DDMFormFieldTypeName), par exemple un texte ou une liste de valeurs

• "Facetable" : permet d'inclure cette option dans les filtres des pages de résultats de recherche

• Priorité

• Requis

• Contribution au SKU

Ces CPDefinitionOption offrent une solution simple et efficace pour afficher les éléments variables de vos produits. Elles améliorent la recherche et la présentation des différentes variantes des produits sur le site, rendant l'expérience utilisateur plus riche et plus intuitive.

Les CPSku : variantes du produit

Package : com.liferay.commerce.product.catalog

Les SKU  représentent les différentes variantes d'un produit disponibles dans l'écosystème Liferay. Par exemple, pour des chaussures d'un même modèle, les différentes tailles ou couleurs disponibles formeraient des CPSku distincts.

Vous pouvez gérer ces éléments dans l'onglet "SKUs" de la page produit dans le back-office de Liferay (Menu Applications > Commerce > Gestion des Produits > Produits).

 

Ces CPSku contiennent les informations essentielles nécessaires à leur affichage, notamment :

• CPInstanceId : identifiant unique du CPSku

• ExternalReferenceCode : référence externe du CPSku

• Prix : le prix du produit, avec ou sans promotion

• Gtin : le Global Trade Item Number du produit (il peut être présent sur le code barre des produits)

• Numéro de pièce constructeur

• SKU de remplacement (ReplacementCPInstanceUuid): référence du CPSku en cas de remplacement

• Produit de remplacement (ReplacementCProductId): référence du produit en cas de remplacement

• Statut : état du CPSku, tel que "publié" ou "peut être commandé"

Conclusion

Nous avons tenté de vous donner un aperçu de l'univers de la personnalisation de l'affichage des produits dans Liferay, en mettant en lumière les objets CPCatalogEntry et CPSku.  Nous avons exploré diverses méthodes pour récupérer et afficher les données de ces objets sur les pages du site, telles que le comparateur ou les résultats de recherche, tout en soulignant l'importance de l'optimisation des performances.

Cependant, notre exploration ne s'arrête pas là.  Dans notre prochain blog, nous plongerons encore plus profondément dans la structure interne des produits dans Liferay, en mettant l'accent sur les CPDefinition (contenant notamment les spécifications du produit) et les CPInstance (objets contenant tous les éléments caractérisant les SKU). Ces éléments jouent un rôle crucial dans la gestion des produits et des variantes, offrant une flexibilité et une modularité essentielles pour répondre aux besoins des utilisateurs. Restez à l'écoute !