Le bloc-notes professionnel d'un développeur front-end senior
Source: Set twig variable to json file as an include.
Fichier _data/test.json:
|
1 |
{ "name":"John", "age":30, "car":null } |
Fichier template.twig:
|
1 2 3 4 5 6 7 |
{% set json %} {% include "_data/test.json" %} {% endset %} [...] <h1>{{ json }}</h1> |
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 :
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> <div class="stock-wrapper clearfix"> ${productStockLevel} </div> |
Notre tag ne pourra pas être exploité en l’état : il faut intégrer en en-tête la logique […]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<%@ 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} <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> |
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 :
|
1 |
<product:speProductStock product="${product}" divCSS="hidden-xs variant-selector" /> |
Va afficher en front :
|
1 2 3 |
<div class="hidden-xs variant-selector product-availability"> <div class="stock-wrapper">disponible</div> </div> |