CategoryHybris

[Hybris] Quels arguments à la condition c:if pour n’afficher un bloc de code que si le contenu qu’il habille est présent

Si le bloc de code n’est pas vide de contenu:

Si le bloc de code n’est pas vide de contenu et que le contenu à afficher est plus grand que « 0 »:

[Hybris] Appliquer une classe différente en fonction d’un état

bin\custom\naos\naoscommerceservices\resources\naoscommerceservices-spring.xml

bin\custom\naos\naosstorefront\web\webroot\WEB-INF\tags\responsive\oney\response.tag

[Hybris] Utiliser les conditions c:if ou sec:authorize pour afficher/masquer des informations

Tester si l’utilisateur est loggué en jstl

ou:

[Hybris] Créer et modifier des fichiers ImpEx

Distinction entre code ImpEx à importer depuis le backoffice et code ImpEx à intégrer dans un fichier *.impex

Dans nos exemples, nous allons partir du même code pour bien souligner les différences (elles ne sont pas nombreuses).

Code ImpEx à importer depuis le backoffice

L’interface backoffice pour importer du contenu ImpEx est disponible dans le CMS Cockpit Hybris via ce chemin : Hybris administration console > Console > ImpEx import, onglet Import content. Exemple de contenu importable :

Un code d’en-tête nécessaire à la moulinette BO qui réalise l’import (sans ces en-têtes correctement renseignées, l’import ne pourra pas être exécuté) :

code ImpEx à intégrer dans un fichier *.impex

Chemin vers le fichier : bin/custom/myproject/myprojectinitialdata/resources/myprojectinitialdata/import/sampledata/contentCatalogs/myproject-frContentCatalog/cms-content.impex.

Le code d’en-tête n’est, à la différence du cas d’importation depuis le backoffice, pas nécessaire (mieux, même : il ne faut pas le mettre).

Plusieurs choses à savoir sur la manière d’écrire des ImPex dans un projet Hybris (valable pour les deux méthodes d’import)

  • Les deux manipulations doivent être obligatoirement effectuées. Vous ne pouvez pas choisir entre l’une ou l’autre et vous affranchir de la seconde.
  • L’utilisation des caractères ' ' pour les différents attributs déclarés sur les éléments HTML :

  • Le doublage systématique des caractères ' ou " lorsque ceux-ci sont utilisés dans un contenu texte (pas d’exemple dans le gros bout de code plus haut, mais voir ci-dessous) :

[Hybris] Créer et appeler un fichier *.tag

Objectif: créer un fichier *.tag comprenant les informations de disponibilité relatives à un produit (stock).

La page de détail d’un produit dans Hybris embarque un composant addtocart consigné dans un fichier web/webroot/WEB-INF/views/responsive/cms/productaddtocartcomponent.jsp. Ce composant sert de base à l’affichage de plusieurs éléments :

  • un sélecteur de quantité,
  • des informations de disponibilité produit (stock),
  • des actions (boutons d’ajout au panier, retrait en magasin, ajout à la liste de souhaits.

Nous allons extraire les informations de disponibilité produit du composant productaddtocartcomponent.jsp pour les placer dans un fichier tag spécifique web/webroot/WEB-INF/tags/responsive/product/speProductStock.tag. Voici le bout de code à extraire :

Notre tag ne pourra pas être exploité en l’état : il faut intégrer en en-tête la logique […]

Plusieurs choses dans ces en-têtes :

  • <%@ tag body-content="empty" trimDirectiveWhitespaces="true" %>
  • <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  • <%@ taglib prefix="theme" tagdir="/WEB-INF/tags/shared/theme" %>
  • <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
  • <%@ attribute name="product" required="true" type="de.hybris.platform.commercefacades.product.data.ProductData" %>
  • <%@ attribute name="divCSS" required="false" %>

Dans un fichier *.tag ou *.jsp :

Va afficher en front :

[Hybris] Ajout de nouvelles locales

Les clés de locales du projet se trouvent dans web/webroot/WEB-INF/messages/base_fr.properties.

Dans ce fichier, nous allons initialiser une locale pour le terme quantité. Nous l’écrirons comme suit :

Pour l’utiliser dans un fichier *.tag, utiliser le code suivant :

ou:

Nous pouvons ensuite utiliser des fonctions de formatage propres à JSP comme par exemple fn:toUpperCase pour passer tout le texte en majuscules :

En en-tête du fichier *.tag :

Puis à l’endroit ou vous souhaitez voir apparaître votre texte :

[Hybris] Ajouter une référence JS proprement

Cas d’école : j’écris du code JS spécifique pour un bloc (un tag) donné, par exemple la pagination, et je souhaite l’inclure proprement afin :

  • qu’il ne soit pas présent directement dans le template *.jsp du bloc (chemin : /webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag)
  • qu’il soit plutôt déclaré dans un fichier séparé qui contient uniquement des directives JS propres à ce bloc (chemin : /webroot/_ui/responsive/common/js/)
  • qu’il soit exécuté uniquement si une pagination est présente dans la page qui s’affiche dans le navigateur

Ajouter, dans le template de bloc, une classe qui servira à l’exécution des directives JS

Dans /webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag :

Ici, on ajoute une classe js-spe-pagination.

Créer le fichier qui contiendra notre code JS spécifique

Dans /webroot/_ui/responsive/common/js/, créer un fichier acc.spe.pagination.js qui contient le code ci dessous :

  • ligne 3: l'_autoload va définir qu’on exécute le code présent dans la fonction spePagination à la condition que la classe .js-spe-pagination soit présente dans le DOM
  • ligne 1: l’ensemble du code JS spécifique relatif à notre pagination est encapsulé dans un namespace ACC.spePagination qu’on retrouve ensuite à chaque fois qu’on cherche à exécuter une fonction (spePagination: function (){ACC.spePagination.buildDropupPagination();})
  • Attention: noter la présence de virgules lignes 3, 4 et 8 pour bien assurer la transition entre les différentes parties du code

Déclarer la nouvelle référence JS

Dans /webroot/WEB-INF/tags/responsive/template/javaScript.tag, ajouter :

mais aussi dans web/webroot/WEB-INF/wro.xml.

Déclarer des variables (hors fonctions)

Starter kit :

Sample de code pour démarrer récupéré ici : /_ui/responsive/common/js/_autoload.js.

Activer le mode « wro » (la concaténation des fichiers JS et CSS) :

Le mode « wro » permet de concaténer l’ensemble des fichiers JS du projet. Il faut déclarer les scripts dans deux fichiers distincts :

  • /webroot/WEB-INF/tags/responsive/template/javaScript.tag (pour le JS)
  • \webroot\WEB-INF\tags\responsive\template\styleSheets.tag (pour le CSS)
  • /webroot/WEB-INF/wro.xml

Pour le second, le chemin vers chaque ressource Js se déclare comme suit :

Pour tester sans passer par une modification de conf’ plus lourde :

Ne pas versionner de code avec l’exemple ci-dessous!

Dans le fichier /webroot/WEB-INF/tags/responsive/template/javaScript.tag ajouter le caractère ! dans <c:when test="${!wro4jEnabled}"> :

où:

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑