Étiquette : bloc

[RBS Change 3.x] Attribuer un ID unique à un élément

19/08/2016 / admin

Problème : nous avons un template de bloc unique (un menu dans notre exemple) qui est utilisé plusieurs fois dans la page, chaque fois pour afficher un contenu différent mais avec un balisage similaire. Nous voulons cependant attribuer un ID unique à chaque occurence de ce bloc dans le DOM (dans notre exemple, pour pouvoir les ouvrir/fermer avec le composant Collapse de Bootstrap 3).

Solution : appliquer ${root/getDocument/getId} sur la valeur des attributs href et id :

<tal:block metal:define-macro="menuLevel">
	[...]
</tal:block>

<div tal:attributes="class menuClass">
	<h3 change:h="" tal:condition="configuration/getShowTitle">

	<a class="" role="button" data-toggle="collapse" href="#js-footer-menu-nav-${root/getDocument/getId}" aria-expanded="false" aria-controls="">${root/getLabelAsHtml}<i class="icon icon-chevron-down"></i></a>

	</h3>
	<div id="js-footer-menu-nav-${root/getDocument/getId}" class="js-footer-menu-nav">
		<tal:block tal:define="parent root" metal:use-macro="menuLevel" />		
	</div>
</div>

<tal:block metal:define-macro="menuLevel">

[...]

</tal:block>

<a class="" role="button" data-toggle="collapse" href="#js-footer-menu-nav-${root/getDocument/getId}" aria-expanded="false" aria-controls="">${root/getLabelAsHtml}<i class="icon icon-chevron-down"></i></a>

</h3>

<tal:block tal:define="parent root" metal:use-macro="menuLevel" />

</div>

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

14/06/2016 / admin

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 :

<c:if test="${product.stock.stockLevel gt 0}">
	<c:set var="productStockLevel">${product.stock.stockLevel}&nbsp;
		<spring:theme code="product.variants.in.stock"/>
	</c:set>
</c:if>
<c:if test="${product.stock.stockLevelStatus.code eq 'lowStock'}">
	<c:set var="productStockLevel">
		<spring:theme code="product.variants.only.left" arguments="${product.stock.stockLevel}"/>
	</c:set>
</c:if>
<c:if test="${isForceInStock}">
	<c:set var="productStockLevel">
		<spring:theme code="product.variants.available"/>
	</c:set>
</c:if>
<div class="stock-wrapper clearfix">
	${productStockLevel}
</div>

<c:if test="${product.stock.stockLevel gt 0}">

<c:set var="productStockLevel">${product.stock.stockLevel} 

<spring:theme code="product.variants.in.stock"/>

</c:set>

</c:if>

<c:if test="${product.stock.stockLevelStatus.code eq 'lowStock'}">

<c:set var="productStockLevel">

<spring:theme code="product.variants.only.left" arguments="${product.stock.stockLevel}"/>

</c:set>

</c:if>

<c:if test="${isForceInStock}">

<c:set var="productStockLevel">

<spring:theme code="product.variants.available"/>

</c:set>

</c:if>

${productStockLevel}

</div>

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

<%@ 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" %>

<%-- stock --%>
<div class="${divCSS} product-availability">
	<c:set var="isForceInStock" value="${product.stock.stockLevelStatus.code eq 'inStock' and empty product.stock.stockLevel}"/>
	<c:if test="${product.stock.stockLevel gt 0}">
		<c:set var="productStockLevel">${product.stock.stockLevel}&nbsp;
			<spring:theme code="product.variants.in.stock"/>
		</c:set>
	</c:if>
	<c:if test="${product.stock.stockLevelStatus.code eq 'lowStock'}">
		<c:set var="productStockLevel">
			<spring:theme code="product.variants.only.left" arguments="${product.stock.stockLevel}"/>
		</c:set>
	</c:if>
	<c:if test="${isForceInStock}">
		<spring:theme code="product.variants.available" var="productStockLevel"/>
	</c:if>
	<div class="stock-wrapper">
		${productStockLevel}
	</div>
</div>

<%@ 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" %>

<%-- stock --%>

<c:set var="isForceInStock" value="${product.stock.stockLevelStatus.code eq 'inStock' and empty product.stock.stockLevel}"/>

<c:if test="${product.stock.stockLevel gt 0}">

<c:set var="productStockLevel">${product.stock.stockLevel} 

<spring:theme code="product.variants.in.stock"/>

</c:set>

</c:if>

<c:if test="${product.stock.stockLevelStatus.code eq 'lowStock'}">

<c:set var="productStockLevel">

<spring:theme code="product.variants.only.left" arguments="${product.stock.stockLevel}"/>

</c:set>

</c:if>

<c:if test="${isForceInStock}">

<spring:theme code="product.variants.available" var="productStockLevel"/>

</c:if>

${productStockLevel}

</div>

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 :

<product:speProductStock product="${product}" divCSS="hidden-xs variant-selector" />

1	<product:speProductStock product="${product}" divCSS="hidden-xs variant-selector" />

Va afficher en front :

<div class="hidden-xs variant-selector product-availability">
    <div class="stock-wrapper">disponible</div>
</div>

<div class="stock-wrapper">disponible</div>

</div>

[Change cross commerce] Surcharger un template issu d’un module standard dans un thème personnalisé

27/03/2015 / admin

Attention : doc en cours de rédaction …

Arborescence standard : où trouve-t’on les templates standards ?
- Deux types de fichiers concernés : les directives Angular JS et les blocs
Arborescence d’un thème personnalisé : où consigner nos surcharges des templates standards ?

Surcharger le template qui affiche la liste de produits

Arborescence standard : où trouve-t’on les templates standards ?

Plugins
|_ Modules
   |_ Rbs
      |_ Catalog
         |_ Assets
            |_ Twig
               |_ Blocks
                  |_ product-list.twig
               |_ product-list-directives.twig
               |_ product-list-item.twig

Plugins

|_ Modules

|_ Rbs

|_ Catalog

|_ Assets

|_ Twig

|_ Blocks

|_ product-list.twig

|_ product-list-directives.twig

|_ product-list-item.twig

Deux types de fichiers concernés : les directives Angular JS et les blocs

Arborescence d’un thème personnalisé : où consigner nos surcharges des templates standards ?

App
|_ Themes
   |_ Project
      |_ [nom_de_votre_plugin]
         |_ Assets
            |_ I18n
               |_ fr_FR
                  |_ admin.json
            |_ Twig
               |_ Project_[nom_de_votre_plugin]
                  |_ Blocks
                     |_ rbs-catalog-product-list.twig
               |_ Rbs_Catalog
                  |_ product-list-directives.twig
                  |_ product-list-item.twig
         |_ blocks-templates.json

App

|_ Themes

|_ Project

|_ [nom_de_votre_plugin]

|_ Assets

|_ I18n

|_ fr_FR

|_ admin.json

|_ Twig

|_ Project_[nom_de_votre_plugin]

|_ Blocks

|_ rbs-catalog-product-list.twig

|_ Rbs_Catalog

|_ product-list-directives.twig

|_ product-list-item.twig

|_ blocks-templates.json

blocks-templates.json : déclarer l’existence d’une surcharge de template pour la rendre exploitable en backoffice.

Le fichier json permet également de passer un certain nombre de paramètres.

{
  "Rbs_Catalog_ProductList": {
    "templates": {
      "Project_Kidiliz:rbs-catalog-product-list.twig": {
      "label": "t.project.kidiliz.admin.template_rbs_catalog_product_list",
      "parameters": {
        "itemsPerLine": {
        "type": "Integer",
        "defaultValue": 3,
        "label": "m.rbs.catalog.admin.product_list_items_per_line"
        },
        "showOrdering": {
        "type": "Boolean",
        "defaultValue": true,
        "label": "m.rbs.catalog.admin.product_list_show_ordering"
        }
      }
    }
  }
}

{

"Rbs_Catalog_ProductList": {

"templates": {

"Project_Kidiliz:rbs-catalog-product-list.twig": {

"label": "t.project.kidiliz.admin.template_rbs_catalog_product_list",

"parameters": {

"itemsPerLine": {

"type": "Integer",

"defaultValue": 3,

"label": "m.rbs.catalog.admin.product_list_items_per_line"

"showOrdering": {

"type": "Boolean",

"defaultValue": true,

"label": "m.rbs.catalog.admin.product_list_show_ordering"

}

admin.json : créer une locale pour identifier votre nouveau template en backoffice.

{
  "label": {
	"message": "[nom_de_votre_theme]"
  },
  "template_rbs_catalog_product_list": {
	"message": "Liste produits"
  }
}

{

"label": {

"message": "[nom_de_votre_theme]"

"template_rbs_catalog_product_list": {

"message": "Liste produits"

}

Nomenclature

La surcharge d’un template se trouvant nativement dans le répertoire Plugins/Modules/[nom_du_vendor]/[nom_du_module]/Assets/Twig/Blocks/ se fera obligatoirement dans le répertoire App/Themes/[nom_du_vendor]/[nom_de_votre_plugin]/Assets/Twig/[nom_du_vendor]_[nom_de_votre_plugin]/Blocks/.

Ainsi, pour notre exemple de liste produits, le template product-list.twig se trouvant nativement dans le répertoire Plugins/Modules/Rbs/Catalog/Assets/Twig/Blocks/ se fera obligatoirement dans le répertoire App/Themes/Project/[nom_de_votre_plugin]/Assets/Twig/Project_[nom_de_votre_plugin]/Blocks/.

Attention : l’unique emplacement censé regrouper les surcharges de l’ensemble des templates des répertoires Twig/Blocks/ de tous les modules de Change Cross Commerce pouvant se retrouver rapidement saturé de fichiers, il est conseillé pour optimiser la lisibilité de préfixer les libellés de vos fichiers surchargés.

Ainsi, la surcharge du fichier standard product-list.twig pourrait se nommer rbs-catalog-product-list.twig pour [nom_du_vendor]-[nom_du_plugin]-[nom_du_template_standard].twig.

Utilisation de {% extends %} : rbs-catalog-product-list.twig

{% extends 'Rbs_Catalog/Blocks/product-list.twig' %}

1	{% extends 'Rbs_Catalog/Blocks/product-list.twig' %}

Utilisation de {% use %} : product-list-directives.twig

{% use '@Rbs_Base/Rbs_Catalog/product-list-directives.twig' %}

1	{% use '@Rbs_Base/Rbs_Catalog/product-list-directives.twig' %}

rbs-order-order-detail.twig

On n’utilise ni {% extends %}, ni {% use %} dans ce cas là :

{% block rbsOrderOrderDetailUse %}
	{% use 'Rbs_Generic/icon-templates.twig' %}
	{% use 'Rbs_Order/order-templates.twig' %}
	{% use 'Rbs_Productreturn/return-templates.twig' %}
{% endblock rbsOrderOrderDetailUse %}

[ Vos ré-écritures de code ... ]

{% block rbsOrderOrderDetailUse %}

{% use 'Rbs_Generic/icon-templates.twig' %}

{% use 'Rbs_Order/order-templates.twig' %}

{% use 'Rbs_Productreturn/return-templates.twig' %}

{% endblock rbsOrderOrderDetailUse %}

[ Vos ré-écritures de code ... ]

Remarque : Les surcharges de fichiers issus des répertoires Blocks/ peuvent contenir des directives Angular issues des fichiers [libellé]-directives.twig. Ceci évite de surcharger un fichier supplémentaire.

Articles récents

Catégories

Archives

Méta

Étiquette : bloc

[RBS Change 3.x] Attribuer un ID unique à un élément

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

[Change cross commerce] Surcharger un template issu d’un module standard dans un thème personnalisé

Arborescence standard : où trouve-t’on les templates standards ?

Deux types de fichiers concernés : les directives Angular JS et les blocs

Arborescence d’un thème personnalisé : où consigner nos surcharges des templates standards ?

blocks-templates.json : déclarer l’existence d’une surcharge de template pour la rendre exploitable en backoffice.

admin.json : créer une locale pour identifier votre nouveau template en backoffice.

Nomenclature

Utilisation de {% extends %} : rbs-catalog-product-list.twig

Utilisation de {% use %} : product-list-directives.twig

rbs-order-order-detail.twig