Modifier l'apparence des totaux de la page panier et du tunnel de commande

  • De le 29 janvier 2015
  • Difficulté : 1/4

Modifier l'apparence des totaux de la page panier et du tunnel de commande Modifier l'apparence des totaux est assez simple. Il est parfois nécessaire d'jouter des balises ou des classes sur un total en particulier (subtotal, shipping, tax, grand total...), cela peut se faire sans surcharge.

La classe de bloc par défaut pour l'affichage d'un total est Mage_Checkout_Block_Total_Default, le template utilisé est checkout/total/default.phtml. Le template est identique pour tous les totaux, l'apparence est donc commune.

L'idée est donc, pour un total en particulier, de modifier le bloc par défaut et d'y associer un template personnalisé.

Cart total Cart total custom

Dans cet article j'ajoute un nouveau module, mais cela peut être parfaitement intégré à l'un de vos modules existant.

Architecture du module

Cet architecture présente tous les cas de figure possibles. N'ajoutez que les blocs et templates dont vous avez besoin. Intégrez les blocs à un module adapté.

Développement du module

Dans le fichier de configuration, il nous faut ajouter un nouvel alias de bloc, ainsi que la déclaration d'un nouveau layout.

app/code/local/Magentix/Theme/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Magentix_Theme>
            <version>0.1.0</version>
        </Magentix_Theme>
    </modules>
    <global>
        <blocks>
            <theme>
                <class>Magentix_Theme_Block</class>
            </theme>
        </blocks>
    </global>
    <frontend>
        <layout>
            <updates>
                <magentix_document>
                    <file>theme.xml</file>
                </magentix_document>
            </updates>
        </layout>
    </frontend>
</config>

La suite se passe dans les layouts, où nous ajoutons 2 handles correspondants respectivement à la page panier et à la dernière étape du tunnel de commande.

Le nom des nouveaux blocs est important, il permet à Magento d'utiliser le bloc du module à la place du bloc par défaut. Le nom doit être formé de cette façon : [code]_total_renderer.

app/design/frontend/base/default/layout/theme.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <checkout_cart_index>
        <block type="theme/cart_total_shipping" name="shipping_total_renderer" />
        <block type="theme/cart_total_subtotal" name="subtotal_total_renderer" />
        <block type="theme/cart_total_tax" name="tax_total_renderer" />
        <block type="theme/cart_total_grand" name="grand_total_total_renderer" />
    </checkout_cart_index>
    <checkout_onepage_review>
        <block type="theme/checkout_total_shipping" name="shipping_total_renderer" />
        <block type="theme/checkout_total_subtotal" name="subtotal_total_renderer" />
        <block type="theme/checkout_total_tax" name="tax_total_renderer" />
        <block type="theme/checkout_total_grand" name="grand_total_total_renderer" />
    </checkout_onepage_review>
</layout>

Dans le bloc du module (nous prenons comme exemple les frais de port pour la page panier), il n'y a que la variable $_template à modifier, le reste hérite de la classe native Mage_Checkout_Block_Total_Default.

app/code/local/Magentix/Theme/Block/Cart/Total/Shipping.php

<?php

class Magentix_Theme_Block_Cart_Total_Shipping extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'cart/total/shipping.phtml';

}

Il peut être utile d'ajouter dans le bloc de nouvelles méthodes, par exemple :

app/code/local/Magentix/Theme/Block/Cart/Total/Shipping.php

<?php

class Magentix_Theme_Block_Cart_Total_Shipping extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'cart/total/shipping.phtml';

    /**
     * Check if shipping is free
     *
     * @return bool
     */
    public function isFreeShipping()
    {
        return (float)$this->getTotal()->getValue() ? false : true;
    }

}

Il reste enfin à éditer le template correspondant.

app/design/frontend/base/default/template/cart/total/Shipping.phtml

<tr>
    <td class="a-right cart-total-shipping">
        <?php echo $this->escapeHtml($this->getTotal()->getTitle()); ?>
    </td>
    <td class="a-right cart-total-shipping">
        <?php if ($this->isFreeShipping()): ?>
            <?php echo $this->__('Free') ?>
        <?php else: ?>
            <?php echo $this->helper('checkout')->formatPrice($this->getTotal()->getValue()) ?>
        <?php endif; ?>
    </td>
</tr>

Le même bloc peut être utilisé dans le panier et le tunnel d'achat. Reprenez le template par défaut checkout/total/default.phtml avant d'entamer les modifications.

Dans la logique du module créé pour cet article (un template différent pour le panier et le tunnel de commande), nous aurions ensuite :

app/code/local/Magentix/Theme/Block/Cart/Total/Grand.php

<?php

class Magentix_Theme_Block_Cart_Total_Grand extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'cart/total/grand.phtml';

}

app/code/local/Magentix/Theme/Block/Cart/Total/Subtotal.php

<?php

class Magentix_Theme_Block_Cart_Total_Subtotal extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'cart/total/subtotal.phtml';

}

app/code/local/Magentix/Theme/Block/Cart/Total/Tax.php

<?php

class Magentix_Theme_Block_Cart_Total_Tax extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'cart/total/tax.phtml';

}

app/code/local/Magentix/Theme/Block/Checkout/Total/Grand.php

<?php

class Magentix_Theme_Block_Checkout_Total_Grand extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'checkout/total/grand.phtml';

}

app/code/local/Magentix/Theme/Block/Checkout/Total/Shipping.php

<?php

class Magentix_Theme_Block_Checkout_Total_Shipping extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'checkout/total/shipping.phtml';

}

app/code/local/Magentix/Theme/Block/Checkout/Total/Subtotal.php

<?php

class Magentix_Theme_Block_Checkout_Total_Subtotal extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'checkout/total/subtotal.phtml';

}

app/code/local/Magentix/Theme/Block/Checkout/Total/Tax.php

<?php

class Magentix_Theme_Block_Checkout_Total_Tax extends Mage_Checkout_Block_Total_Default
{

    protected $_template = 'checkout/total/tax.phtml';

}
commentaires

Commentez cet article : Modifier l'apparence des totaux de la page panier et du tunnel de commande