Étiquette : prix

[Magento 2] Supprimer le supplément de prix du champ Select pour un produit configurable

08/10/2020 / admin

Testé fonctionnel sur une version 2.3. Source: MAGENTO 2 – REMOVE PRICE FROM SELECT DROPDOWN ON CONFIGURABLE PRODUCTS.

Partie à commenter dans la surcharge que vous ferez du fichier vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js dans votre thème:

                        if (optionPriceDiff !== 0) {
                            options[i].label += ' ' + priceUtils.formatPrice(
                                optionPriceDiff,
                                this.options.priceFormat,
                                true
                            );
                        }

if (optionPriceDiff !== 0) {

options[i].label += ' ' + priceUtils.formatPrice(

optionPriceDiff,

this.options.priceFormat,

true

);

}

[Magento 2] Créer des Swatches (ou échantillons) pour afficher toutes les options et prix d’un produit configurable dans la liste des catégories et des produits

11/02/2020 / admin

Testé fonctionnel Magento 2.3!

Ressources en ligne m’ayant permises d’arriver à mes fins:

La documentation officielle de Magento 2 sur la création de Swatches (échantillons)
Want to display price in configurable products each options in magento 2 qui donne une bonne partie de la solution côté code, mais qui a nécessité encore quelques adaptations
Un peu de documentation sur les méthodes parseInt() et sa remplaçante dans ma solution parseFloat()
How to replace all dots in a string using JavaScript?

Créer un produit configurable

A la création des configurations, vous allez créer un attribut dont le type d’entrée catalogue pour le propriétaire de la boutique sera Texte échantillon (Text Swatches). Ceci permettra d’afficher les différentes options de votre produit configurable comme Magento 2 le fait pour les couleurs par exemple.

Boutiques > Produit [Attributs]
Propriétés > Propriétés de l’attribut:
Type d’entrée catalogue pour le propriétaire de la boutique: Texte échantillon
Propriétés > Gérer les échantillons (valeurs de votre attribut) > ajouter des échantillons. Attention: la valeur saisie dans le champ « Admin » sera celle affichée en front (?!)

Propriétés du front office > Propriétés du front office

Utiliser dans la navigation par filtres: Filtrable (avec résultats)

Visible sur les pages du catalogue de la boutique: Oui

Utiliser dans les listes de produits: Oui

Utiliser pour le tri des listes produits: Oui

Remarque importante: la visibilité pour chacune de vos configuration doit être sur Non visible individuellement.

Modifier le fichier `vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js`

Archive contenant le fichier final modifié: swatch-renderer.

NDLA: pardon pour ce contenu moitié anglais/moitié français repris en partie de ce post sur StackOverflow. Et attention car je n’ai pas repris ligne pour ligne les directives données dans ce dit post. J’ai amélioré le code notamment sur certains aspects que je décris au moment venu.

Dans Magento 2, la gestion des différentes options/swatches/échantillons des produits configurables se fait via javaScript, dans ce fichier plus précisément: vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js. Il faudra donc commencer par le surcharger dans app/design/frontend/Vendor/default/Magento_Swatches/web/js/swatch-renderer.js.

Dans ce fichier, les valeurs de chaque échantillon sont générées via la fonction _RenderSwatchOptions.

Modification #1: `_RenderSwatchOptions` do not get data of $widget veriable. So, I have make below change.

Avant:

_RenderSwatchOptions: function (config, controlId)

1	_RenderSwatchOptions: function (config, controlId)

Après modification:

_RenderSwatchOptions: function (config, controlId, $widget)

1	_RenderSwatchOptions: function (config, controlId, $widget)

Change #2: search with `_RenderSwatchOptions` and change argument from where this function call from `swatch-renderer.js` file

Avant:

options = $widget._RenderSwatchOptions(item, controlLabelId),

1	options = $widget._RenderSwatchOptions(item, controlLabelId),

Après modification:

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

1	options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

Change #3: Now I can get the value of $widget object in to `_RenderSwatchOptions` function but not abel to get price value of options.

So, to add option id wise price please add below code below the line change which applied in #2.

Avant:

var item = this,
controlLabelId = 'option-label-' + item.code + '-' + item.id,
options = $widget._RenderSwatchOptions(item, controlLabelId),

var item = this,

controlLabelId = 'option-label-' + item.code + '-' + item.id,

options = $widget._RenderSwatchOptions(item, controlLabelId),

Après modification… De nombreux axes d’amélioration du code trouvé sur StackOverflow ici:

Le prix retourné était un nombre entier (pour un prix de 12,50 € renseigné en backoffice, c’est la valeur 12 s’affichait) à cause de l’utilisation de la méthode parseInt() (qui renvoie seulement un entier) que j’ai remplacé par la méthode parseFloat() (qui renvoie également les décimales). J’ai également utilisé la méthode toFixed(2) avec une valeur de « 2 » pour afficher deux chiffres après la virgule.
Le prix retourné via la méthode parseFloat() séparait les décimales avec un caractère . au lieu d’une virgule. J’ai donc mis en place un remplacement automatique via la méthode replace (replace(/\./g,',').

$.each(this.options.jsonConfig.attributes, function () {
    var item = this;

    $widget.optionsMap[item.id] = {};

    // Aggregate options array to hash (key => value)
    $.each(item.options, function () {
        if (this.products.length > 0) {
            $widget.optionsMap[item.id][this.id] = {
                price: parseFloat(
                    $widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount, 10
                ).toFixed(2).replace(/\./g,','),
                products: this.products
            };
        }
    });

    var controlLabelId = 'option-label-' + item.code + '-' + item.id,
        options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),
        select = $widget._RenderSwatchSelect(item, chooseText),
        input = $widget._RenderFormInput(item),
        listLabel = '',
        label = '';

$.each(this.options.jsonConfig.attributes, function () {

var item = this;

$widget.optionsMap[item.id] = {};

// Aggregate options array to hash (key => value)

$.each(item.options, function () {

if (this.products.length > 0) {

$widget.optionsMap[item.id][this.id] = {

price: parseFloat(

$widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount, 10

).toFixed(2).replace(/\./g,','),

products: this.products

};

}

});

var controlLabelId = 'option-label-' + item.code + '-' + item.id,

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

select = $widget._RenderSwatchSelect(item, chooseText),

input = $widget._RenderFormInput(item),

listLabel = '',

label = '';

Change #4: Add price div into `_RenderSwatchOptions` function.

My attribute is swatch options with type = text. So, I made below changes.

Avant:

if (type === 0) {
    // Text
    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +    
        '</div>';
}

if (type === 0) {

// Text

html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +

'</div>';

}

Après modification… Un tout petit axe d’amélioration du code trouvé sur StackOverflow ici:

J’ai rajouté la devise €, mais de façon totalement fixe (pas récupérée dynamiquement). C’est encore un axe d’amélioration.

if (type === 0) {
    // Text
    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +
        '<div class="custom-option-price">' + $widget.optionsMap[config.id][id]['price'] + ' €</div>'+
        '</div>';
} else if (type === 1) {

if (type === 0) {

// Text

html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +

'<div class="custom-option-price">' + $widget.optionsMap[config.id][id]['price'] + ' €</div>'+

'</div>';

} else if (type === 1) {

[Magento 2] Masquer les décimales pour les prix ronds dans la liste produits

05/02/2020 / admin

Lorsque mon prix affiche 99,00 €, je souhaite que soit affiché uniquement la valeur avant la virgule: 99 €. Pour celà, il faut surcharger le fichier vendor/magento/module-catalog/view/base/templates/product/price/amount/default.phtml dans un thème.

Remarque: on voit dans notre exemple que le fichier natif est « rangé » dans le dossier base ce qui signifie que cette vue PHTML va servir pour afficher des informations autant en front que dans l’interface d’administration de Magento 2. J’ai cependant besoin de n’afficher mon prix sans décimales qu’en front. Pour ce faire, je vais recréer une version modifiée de mon fichier de départ dans app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/price/amount/default.phtml.

La partie qui nous intéresse plus particulièrement se situe dans l’élément <span class="price-wrapper">:

<span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>
    <?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>
    data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"
    data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"
    class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"
>

    <?php
    $dot = ".";
    $price = $block->escapeHtmlAttr($block->getDisplayValue());
    ?>
    <?php if(strpos($price, $dot) !== false) :?>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php else :?>
        <span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php endif; ?>

</span>

<span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>

<?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>

data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"

data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"

class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"

<?php

$dot = ".";

$price = $block->escapeHtmlAttr($block->getDisplayValue());

<?php if(strpos($price, $dot) !== false) :?>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php else :?>

<span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php endif; ?>

</span>

J’ai remarqué, en parcourant la source de la page avec l’inspecteur d’éléments, qu’il existait dans le bloc <div class="price-box"> un data attribut data-price-amount qui contenait déjà les prix ronds sans décimales (data-price-amount="99" au lieu de data-price-amount="99.00"). L’idée ici est de le ré-exploiter.

    <?php
    $dot = ".";
    $price = $block->escapeHtmlAttr($block->getDisplayValue());
    ?>

<?php

$dot = ".";

$price = $block->escapeHtmlAttr($block->getDisplayValue());

Ci-dessus, je créer une variable $dot qui contient juste le caractère .. Je vais avoir besoin de savoir si la valeur de mon data-price-amount contient la valeur de $dot ou pas.

Je crée également une variable $price qui contient la valeur de mon data-price-amount (le prix).

    <?php if(strpos($price, $dot) !== false) :?>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php else :?>
        ...
    <?php endif; ?>

<?php if(strpos($price, $dot) !== false) :?>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php else :?>

...

<?php endif; ?>

Dans une condition if/else, j’utilise la fonction strpos de PHP pour vérifier si la valeur de $price contient la valeur de $dot.

Si « oui » (!== false), alors je conserve l’affichage standard du prix dans Magento 2 (un <span class="price"></span> avec des décimales, peu importe si le prix est de 99,00 €).

    <?php if(strpos($price, $dot) !== false) :?>
        ...
    <?php else :?>
        <span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php endif; ?>

<?php if(strpos($price, $dot) !== false) :?>

...

<?php else :?>

<span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php endif; ?>

Si « non » (code après le <?php else :?>) j’ajoute un <span class="price-without-decimal"> au-dessus de l’affichage standard du prix dans Magento 2 pour y afficher la valeur de mon attribut data-price-amount (un prix sans décimales, si mon code fonctionne correctement).

Attention: je me retrouve désormais avec 2 prix affichés si je suis dans le cas où la valeur du prix ne contient pas de décimales. J’ai choisi de conserver l’affichage standard du prix dans Magento 2 dans le DOM au cas où il sert (via un javaScript ou autre…) à des calculs.

Pour masquer ce dernier à l’utilisateur, j’utilise CSS:

.price-box .price-without-decimal + .price {
  position: absolute;
  left: -99999em;
}

.price-box .price-without-decimal + .price {

position: absolute;

left: -99999em;

}

Le fichier app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/price/amount/default.phtml complet:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>

<!--Override from: vendor/magento/module-catalog/view/base/templates/product/price/amount/default.phtml-->

<?php /** @var $block \Magento\Framework\Pricing\Render\Amount */ ?>

<span class="price-container <?= $block->escapeHtmlAttr($block->getAdjustmentCssClasses()) ?>"
        <?= $block->getSchema() ? ' itemprop="offers" itemscope itemtype="http://schema.org/Offer"' : '' ?>>
    <?php if ($block->getDisplayLabel()) :?>
        <span class="price-label"><?= $block->escapeHtml($block->getDisplayLabel()) ?></span>
    <?php endif; ?>
    <span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>
        <?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>
        data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"
        data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"
        class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"
    >

        <?php
        $dot = ".";
        $price = $block->escapeHtmlAttr($block->getDisplayValue());
        ?>
        <?php if(strpos($price, $dot) !== false) :?>
            <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
        <?php else :?>
            <span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>
            <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
        <?php endif; ?>

    </span>
    <?php if ($block->hasAdjustmentsHtml()) :?>
        <?= $block->getAdjustmentsHtml() ?>
    <?php endif; ?>
    <?php if ($block->getSchema()) :?>
        <meta itemprop="price" content="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>" />
        <meta itemprop="priceCurrency" content="<?= $block->escapeHtmlAttr($block->getDisplayCurrencyCode()) ?>" />
    <?php endif; ?>
</span>

<?php

/**

* See COPYING.txt for license details.

<?php /** @var $block \Magento\Framework\Pricing\Render\Amount */ ?>

<span class="price-container <?= $block->escapeHtmlAttr($block->getAdjustmentCssClasses()) ?>"

<?= $block->getSchema() ? ' itemprop="offers" itemscope itemtype="http://schema.org/Offer"' : '' ?>>

<?php if ($block->getDisplayLabel()) :?>

<span class="price-label"><?= $block->escapeHtml($block->getDisplayLabel()) ?></span>

<?php endif; ?>

<span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>

<?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>

data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"

data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"

class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"

<?php

$dot = ".";

$price = $block->escapeHtmlAttr($block->getDisplayValue());

<?php if(strpos($price, $dot) !== false) :?>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php else :?>

<span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php endif; ?>

</span>

<?php if ($block->hasAdjustmentsHtml()) :?>

<?= $block->getAdjustmentsHtml() ?>

<?php endif; ?>

<?php if ($block->getSchema()) :?>

<?php endif; ?>

</span>

(partie en work-in-progress) Si vous voulez pouvoir cibler certaines pages spécifiquement, voici ce qu’il faut mettre dans votre layout XML:

<!--		From: vendor/magento/module-catalog/view/base/layout/default.xml-->
<!--		https://magento.stackexchange.com/questions/210585/change-price-template-only-for-product-view-page-->
<block class="Magento\Framework\Pricing\Render" name="product.price.render.default">
    <arguments>
        <argument name="price_render_handle" xsi:type="string">catalog_product_prices</argument>
        <argument name="use_link_for_as_low_as" xsi:type="boolean">true</argument>
<!--        set "override" configuration settings here -->
    </arguments>
</block>

<argument name="price_render_handle" xsi:type="string">catalog_product_prices</argument>

</arguments>

</block>

[Magento 2] Manipuler le rendu des prix

29/01/2020 / admin

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 classe price-box qui 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 €:

<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&nbsp;€</span></span>
            <meta itemprop="price" content="8.9">
        <meta itemprop="priceCurrency" content="EUR">
    </span>
</div>

</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

<?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>

<?xml version="1.0"?>

</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.

<?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>';
        }
    }

<?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:

$ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean

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.

<?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>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<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="render_template" xsi:type="string">Magento_Catalog::product/price/special_price.phtml</item>

</item>

<item name="render_template" xsi:type="string">Magento_Catalog::product/price/tier_prices.phtml</item>

</item>

<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="amount_render_template" xsi:type="string">Magento_Catalog::product/price/amount/default.phtml</item>

</item>

<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>

</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.

Articles récents

Catégories

Archives

Méta

Étiquette : prix

[Magento 2] Supprimer le supplément de prix du champ Select pour un produit configurable

[Magento 2] Créer des Swatches (ou échantillons) pour afficher toutes les options et prix d’un produit configurable dans la liste des catégories et des produits

Créer un produit configurable

Modifier le fichier `vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js`

Modification #1: `_RenderSwatchOptions` do not get data of $widget veriable. So, I have make below change.

Change #2: search with `_RenderSwatchOptions` and change argument from where this function call from `swatch-renderer.js` file

Change #3: Now I can get the value of $widget object in to `_RenderSwatchOptions` function but not abel to get price value of options.

Change #4: Add price div into `_RenderSwatchOptions` function.

[Magento 2] Masquer les décimales pour les prix ronds dans la liste produits

[Magento 2] Manipuler le rendu des prix

Mise en garde!

Modifier l’élément HTML `<div />` et sa classe `price-box` qui englobent l’affichage du prix dans les vues produit de Magento 2

app/code/Sodifrance/CustomPriceBox/etc/di.xml

app/code/Sodifrance/CustomPriceBox/Plugin/FinalPriceBox.php

Modifier le markup autour du prix

Créer un produit configurable

Modifier le fichier vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

Modification #1: _RenderSwatchOptions do not get data of $widget veriable. So, I have make below change.

Change #2: search with _RenderSwatchOptions and change argument from where this function call from swatch-renderer.js file

Change #3: Now I can get the value of $widget object in to _RenderSwatchOptions function but not abel to get price value of options.

Change #4: Add price div into _RenderSwatchOptions function.

Mise en garde!

Modifier l’élément HTML <div /> et sa classe price-box qui englobent l’affichage du prix dans les vues produit de Magento 2

app/code/Sodifrance/CustomPriceBox/etc/di.xml

app/code/Sodifrance/CustomPriceBox/Plugin/FinalPriceBox.php

Modifier le markup autour du prix

Modifier le fichier `vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js`

Modification #1: `_RenderSwatchOptions` do not get data of $widget veriable. So, I have make below change.

Change #2: search with `_RenderSwatchOptions` and change argument from where this function call from `swatch-renderer.js` file

Change #3: Now I can get the value of $widget object in to `_RenderSwatchOptions` function but not abel to get price value of options.

Change #4: Add price div into `_RenderSwatchOptions` function.

Modifier l’élément HTML `<div />` et sa classe `price-box` qui englobent l’affichage du prix dans les vues produit de Magento 2