Skip to main content

Displaying the order discount on the success page in Magento 2

· 3 min read

In this article, we will implement a Magento plugin to display the order total discount and the discount percent total on the order success page.

The calculation of the discount totals in Magento 2​

We will use the following calculation to calculate the total discount of the order in our Magento 2 module. Note that the discount_amount field in the order includes the shipping discount, so we don't need to sum it up.


$discountAmount = abs($order->getDiscountAmount());

We will use the following calculation to calculate the total discount percent of the order. Note that we add the shipping_amount as the denominator because the subtotal in Magento doesn't include the shipping amount.

$discountPercent = ($discountAmount / ($order->getSubtotal() + $order->getShippingAmount()))*100;

How it will look like​

We will add some CSS to our module, so the discount total will have a margin, and the amount will be marked in a red color.

Here is how it will look:

The order full discount is displayed in the success page

The code of the module​

Let's see the plugin code that gets the full order discount and displays it on the order success page.

First, let's create the basic plugin structure in app/code/Mexbs/DisplayDiscountOnSuccessPage and the following files:

app/code/Mexbs/DisplayDiscountOnSuccessPage/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Mexbs_DisplayDiscountOnSuccessPage',
    __DIR__
);
app/code/Mexbs/DisplayDiscountOnSuccessPage/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Mexbs_DisplayDiscountOnSuccessPage" setup_version="1.0.0" />
</config>

Now, let's create the layout file that hooks to the success page and adds our template.

app/code/Mexbs/DisplayDiscountOnSuccessPage/view/frontend/layout/checkout_onepage_success.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Mexbs_DisplayDiscountOnSuccessPage::css/success.css"/>
    </head>
    <body>
        <referenceContainer name="order.success.additional.info">
            <block class="Mexbs\DisplayDiscountOnSuccessPage\Block\OrderSuccessShowDiscount"
                   name="mb.order.success.show.discount"
                   template="Mexbs_DisplayDiscountOnSuccessPage::order-success/show-discount.phtml"
                    />
        </referenceContainer>
    </body>
</page>

app/code/Mexbs/DisplayDiscountOnSuccessPage/view/frontend/templates/order-success/show-discount.phtml
<?php
/**
 * @var $block \Mexbs\DisplayDiscountOnSuccessPage\Block\OrderSuccessShowDiscount
 */
$discountData = $block->getOrderDiscountAmountAndPercent();
if(isset($discountData['discount_amount']) && $discountData['discount_amount'] > 0
    && isset($discountData['discount_percent']) && $discountData['discount_percent'] > 0): ?>
<div class="saved-discount"><strong><?= __('You saved <span class="saved">$%1 (%2%)</span> on this order!', $discountData['discount_amount'], $discountData['discount_percent']) ?></strong></div>
<?php
endif;

app/code/Mexbs/DisplayDiscountOnSuccessPage/Block/OrderSuccessShowDiscount.php
<?php
namespace Mexbs\DisplayDiscountOnSuccessPage\Block;

class OrderSuccessShowDiscount extends \Magento\Framework\View\Element\Template
{
    protected $onepage;
    public function __construct(
       \Magento\Framework\View\Element\Template\Context $context,
       \Magento\Checkout\Model\Type\Onepage $onepage,
        array $data = []
    )
    {
        parent::__construct($context, $data);
        $this->onepage = $onepage;
    }
    public function getOrderDiscountAmountAndPercent()
    {
        $session = $this->onepage->getCheckout();
        $order = $session->getLastRealOrder();
        $discountAmount = abs($order->getDiscountAmount());
        $discountPercent = ($discountAmount / ($order->getSubtotal() + $order->getShippingAmount()))*100;

        return [
            "discount_amount" => $discountAmount,
            "discount_percent" => $discountPercent
        ];
    }
}

app/code/Mexbs/DisplayDiscountOnSuccessPage/view/frontend/web/css/success.less
.saved-discount{
    margin: 20px 0;
}
.saved-discount .saved{
    color: red;
}

Installing the module​

Now, we need to run the usual commands to enable the module, compile the code, etc:

php bin/magento module:enable Mexbs_ApplyCouponProgrammatically
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Testing the module​

To test the module, add some products to the cart and make sure that a discount is applied. Complete the checkout. As we showed before, you should see a message similar to this on the Magento order success page:

The order full discount is displayed in the success page

To sum up​

In this article, we showed how to get the order discount on the success page in Magento 2 and display it together with the total percent of the discount in the order.

info

This code was tested on Magento CE 2.4.7-p3