Ressources utiles:
- La documentation officielle (sachant que ce n’est pas la ressource qui m’a permis d’arriver à mes fins…
- Un topo très complet sur l’utilisation et la customisation des prix dans Magento 2. Version PDF pour la postérité.
Astuces de ce billet:
- Mise en garde!
- [Magento 2] Masquer les décimales pour les prix ronds dans la liste produits
- Modifier l’élément HTML
<div />et sa classeprice-boxqui englobent l’affichage du prix dans les vues produit de Magento 2 - Modifier le markup autour du prix
Mise en garde!
Dans Magento 2, l’affichage des différents types de prix dans les différentes vues (liste produit, résultats de recherche, comparatif, fiche produit, …) est toujours accompagné d’un markup HTML assez complexe (ci-dessous un exemple récupéré dans le DOM d’une fiche produit, mais qui est identique dans une liste produit) juste pour afficher la valeur de 8,90 €:
|
1 2 3 4 5 6 7 |
<div class="price-box price-final_price" data-role="priceBox" data-product-id="5" data-price-box="product-id-5"> <span class="price-container price-final_price tax weee" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> <span id="product-price-5" data-price-amount="8.9" data-price-type="finalPrice" class="price-wrapper "><span class="price">8,90 €</span></span> <meta itemprop="price" content="8.9"> <meta itemprop="priceCurrency" content="EUR"> </span> </div> |
Dans les cas où vous devez changer le markup HTML, les classes et autres attributs pour personnaliser votre Magento SOYEZ EXTREMEMENT PRUDENTS car la présence de chacun des éléments précités a des répercussions sur le bon fonctionnement de votre site.
Modifier l’élément HTML <div /> et sa classe price-box qui englobent l’affichage du prix dans les vues produit de Magento 2
Edit 05/02/2020: en faisant un grep -rn --exclude=\*.{less,css} "price-box", j’ai obtenu des résultats de type dev/tests/functional/tests/app/Magento/Catalog/Test/Block/Product/Compare/ListCompare.php:52: protected $priceSelector = './/div[contains(@class,"price-box")]';.
Ceci sous-entend que des fonctionnalités sont attachées à la price-box uniquement lorsque la classe price-box est affectée à l’élément HTML div. Changer cet élément en span peut avoir des effets de bord sour les fonctionnalités rattachées à la price-box de votre projet Magento 2.
Ainsi, je déconseille fortement la mise en place de cette astuce dans vos projets. Conservez ici l’élément div voulu par les développeurs de Magento 2 et utilisez flexbox ou display: inline-block; pour aligner vos prix.
Testé fonctionnel Magento 2.3!. Code source du module: magento2_customPriceBox
Figurez vous que l’élément <div class="price-box" /> qui embarque tout ce qu’il faut pour afficher un prix en bonne et due forme dans Magento 2 est généré via le fichier vendor/magento/module-catalog/Pricing/Render/FinalPriceBox.php! Dans notre exemple, nous allons simplement chercher à remplacer l’élément HTML div par un span. Pour ce faire, pas le choix: il faut créer un module pour étendre la classe PHP FinalPriceBox et la fonction wrapResult().
La méthode est la même que pour surcharger un Block natif dans Magento 2. Je ne vais donc pas la décrire en détail ici. Vous pouvez vous référer au billet pré-cité pour plus de détails.
Convention: Dans notre exemple, nous travaillerons avec le vendor Sodifrance et le module CustomPriceBox.
Il faudra commencer par créer un nouveau module Sodifrance/CustomPriceBox.
app/code/Sodifrance/CustomPriceBox/etc/di.xml
|
1 2 3 4 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Magento\Catalog\Pricing\Render\FinalPriceBox" type="Sodifrance\CustomPriceBox\Plugin\FinalPriceBox" /> </config> |
app/code/Sodifrance/CustomPriceBox/Plugin/FinalPriceBox.php
Ce fichier vient étendre la classe définie dans vendor/magento/module-catalog/Pricing/Render/FinalPriceBox.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php namespace Sodifrance\CustomPriceBox\Plugin; class FinalPriceBox extends \Magento\Catalog\Pricing\Render\FinalPriceBox { /** * Wrap with standard required container * * @param string $html * @return string */ protected function wrapResult($html) { return '<span class="price-box ' . $this->getData('css_classes') . '" ' . 'data-role="priceBox" ' . 'data-product-id="' . $this->getSaleableItem()->getId() . '" ' . 'data-price-box="product-id-' . $this->getSaleableItem()->getId() . '"' . '>' . $html . '</span>'; } } |
Puis taper les commandes habituelles:
|
1 |
$ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean |
Modifier le markup autour du prix
Dans Magento 2, le code qui englobe l’affichage du prix dans les vues produit est éclaté en une multitude de petits fichiers PHTML. A l’exception de l’élément <div /> et sa classe price-box, ces derniers sont tous déclarés dans le layout XML vendor/magento/module-catalog/view/base/layout/catalog_product_prices.xml.
|
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 29 30 31 32 33 34 35 36 37 38 39 |
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd"> <block class="Magento\Framework\Pricing\Render\RendererPool" name="render.product.prices"> <arguments> <argument name="default" xsi:type="array"> <item name="default_render_class" xsi:type="string">Magento\Catalog\Pricing\Render\PriceBox</item> <item name="default_render_template" xsi:type="string">Magento_Catalog::product/price/default.phtml</item> <item name="default_amount_render_class" xsi:type="string">Magento\Framework\Pricing\Render\Amount</item> <item name="default_amount_render_template" xsi:type="string">Magento_Catalog::product/price/amount/default.phtml</item> <item name="prices" xsi:type="array"> <item name="special_price" xsi:type="array"> <item name="render_template" xsi:type="string">Magento_Catalog::product/price/special_price.phtml</item> </item> <item name="tier_price" xsi:type="array"> <item name="render_template" xsi:type="string">Magento_Catalog::product/price/tier_prices.phtml</item> </item> <item name="final_price" xsi:type="array"> <item name="render_class" xsi:type="string">Magento\Catalog\Pricing\Render\FinalPriceBox</item> <item name="render_template" xsi:type="string">Magento_Catalog::product/price/final_price.phtml</item> </item> <item name="custom_option_price" xsi:type="array"> <item name="amount_render_template" xsi:type="string">Magento_Catalog::product/price/amount/default.phtml</item> </item> <item name="configured_price" xsi:type="array"> <item name="render_class" xsi:type="string">Magento\Catalog\Pricing\Render\ConfiguredPriceBox</item> <item name="render_template" xsi:type="string">Magento_Catalog::product/price/configured_price.phtml</item> </item> </item> <!--<item name="adjustments" xsi:type="array"></item>--> </argument> </arguments> </block> </layout> |
Il faudra donc surcharger ce fichier en priorité pour modifier l’affichage de vos prix. Vous pourrez ensuite modifier les cibles des <item name="render_template" xsi:type="string" /> définis ici pour les faire pointer vers vos templates PHTML custom.