Magento2 How to Discount Description add on Checkout order summary

The question:

I Want to add Coupon Description in Order Summary

Magento2 How to Discount Description add on Checkout order summary
enter image description here

I have to Find the file here

app/design/frontend/[VendorName]/[theme]/Magento_SalesRule/web/template/cart/totals/discount.html

<!-- ko if: isDisplayed() -->
<tr class="totals discount">
    <th class="mark" scope="row">
        <span class="title" data-bind="text: getTitle()"></span>
        <span class="discount coupon" data-bind="text: getCouponCode()"></span>
    </th>
    <td class="amount">
        <span class="price" data-bind="text: getValue(), attr: {'data-th': name}"></span>
    </td>
</tr>
<!-- /ko -->

Here Hoe can I get Coupon Description

Note: I have added coupon description in Backend.

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Take a look at Magento default:

vendor/magento/module-sales-rule/Plugin/CartTotalRepository.php

As we can see, coupon_label is an extension attribute.

So, we can follow this rule. Create our coupon description extension attribute.

app/code/Vendor/Quote/etc/extension_attributes.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="MagentoQuoteApiDataTotalsInterface">
        <attribute code="coupon_description" type="string" />
    </extension_attributes>
</config>

app/code/Vendor/Quote/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">
    <type name="MagentoQuoteModelCartCartTotalRepository">
        <plugin name="coupon_description_plugin" type="VendorQuotePluginCartTotalRepository" />
    </type>
</config>

app/code/Vendor/Quote/Plugin/CartTotalRepository.php

<?php declare(strict_types=1);

namespace VendorQuotePlugin;

use MagentoQuoteApiDataTotalsExtensionFactory;
use MagentoQuoteApiDataTotalsInterface;
use MagentoSalesRuleApiRuleRepositoryInterface;
use MagentoSalesRuleModelCoupon;

/**
 * Class CartTotalRepository
 * @package MagentoSalesRulePlugin
 */
class CartTotalRepository
{
    /**
     * @var TotalsExtensionFactory
     */
    private $extensionFactory;

    /**
     * @var RuleRepositoryInterface
     */
    private $ruleRepository;

    /**
     * @var Coupon
     */
    private $coupon;

    /**
     * CartTotalRepository constructor.
     * @param TotalsExtensionFactory $extensionFactory
     * @param RuleRepositoryInterface $ruleRepository
     * @param Coupon $coupon
     */
    public function __construct(
        TotalsExtensionFactory $extensionFactory,
        RuleRepositoryInterface $ruleRepository,
        Coupon $coupon
    ) {
        $this->extensionFactory = $extensionFactory;
        $this->ruleRepository = $ruleRepository;
        $this->coupon = $coupon;
    }

    /**
     * @param MagentoQuoteModelCartCartTotalRepository $subject
     * @param TotalsInterface $result
     * @return TotalsInterface
     *
     * @throws MagentoFrameworkExceptionLocalizedException
     * @throws MagentoFrameworkExceptionNoSuchEntityException
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function afterGet(
        MagentoQuoteModelCartCartTotalRepository $subject,
        TotalsInterface $result
    ) {
        if ($result->getExtensionAttributes() === null) {
            $extensionAttributes = $this->extensionFactory->create();
            $result->setExtensionAttributes($extensionAttributes);
        }

        $extensionAttributes = $result->getExtensionAttributes();
        $couponCode = $result->getCouponCode();

        if (empty($couponCode)) {
            return $result;
        }
        $this->coupon->loadByCode($couponCode);
        $ruleId = $this->coupon->getRuleId();

        if (empty($ruleId)) {
            return $result;
        }
        $rule = $this->ruleRepository->getById($ruleId);
        $extensionAttributes->setCouponDescription($rule->getDescription());
        $result->setExtensionAttributes($extensionAttributes);
        return $result;
    }
}

Check window.checkoutConfig.totalsData in browser console:

enter image description here

Frontend Part:

We will use our custom js component and templates

app/code/Vendor/Quote/view/frontend/layout/checkout_cart_index.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">
    <body>
        <referenceBlock name="checkout.cart.totals">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="block-totals" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="discount" xsi:type="array">
                                    <item name="component" xsi:type="string">Vendor_Quote/js/view/cart/totals/discount</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Vendor/Quote/view/frontend/layout/checkout_index_index.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">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="totals" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="discount" xsi:type="array">
                                                            <item name="component" xsi:type="string">Vendor_Quote/js/view/summary/discount</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Vendor/Quote/view/frontend/web/js/view/cart/totals/discount.js

define([
    'Magento_SalesRule/js/view/summary/discount'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Quote/cart/totals/discount'
        },

        getDescription: function() {
            if (!this.totals()) {
                return null;
            }
            if (typeof this.totals()['extension_attributes'] === 'undefined') return null;
            return this.totals()['extension_attributes']['coupon_description'];
        }
    });
});

app/code/Vendor/Quote/view/frontend/web/js/view/summary/discount.js

define([
    'Magento_SalesRule/js/view/summary/discount'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Quote/cart/totals/discount'
        },

        getDescription: function() {
            if (!this.totals()) {
                return null;
            }
            if (typeof this.totals()['extension_attributes'] === 'undefined') return null;
            return this.totals()['extension_attributes']['coupon_description'];
        },

        /**
         * @override
         *
         * @returns {Boolean}
         */
        isDisplayed: function () {
            return this.getPureValue() != 0; //eslint-disable-line eqeqeq
        }
    });
});

app/code/Vendor/Quote/view/frontend/web/template/cart/totals/discount.html

<!-- ko if: isDisplayed() -->
<tr class="totals">
    <th colspan="1" style="" class="mark" scope="row">
        <span class="title" data-bind="text: getTitle()"></span>
        <span class="discount coupon" data-bind="text: getCouponLabel()"></span>
        <span class="discount description" data-bind="text: getDescription()"></span>
    </th>
    <td class="amount" data-bind="attr: {'data-th': title}">
        <span><span class="price" data-bind="text: getValue()"></span></span>
    </td>
</tr>
<!-- /ko -->

app/code/Vendor/Quote/view/frontend/web/template/summary/discount.html

<!-- ko if: isDisplayed() -->
<tr class="totals discount">
    <th class="mark" scope="row">
        <span class="title" data-bind="text: getTitle()"></span>
        <span class="discount coupon" data-bind="text: getCouponCode()"></span>
        <span class="discount description" data-bind="text: getDescription()"></span>
    </th>
    <td class="amount">
        <span class="price" data-bind="text: getValue(), attr: {'data-th': name}"></span>
    </td>
</tr>
<!-- /ko -->

Result:

enter image description here

Method 2

You can override

app/design/frontend/[VendorName]/[theme]/Magento_SalesRule/web/template/cart/totals/discount.html and add below code

<span class="description" data-bind="text: getCouponDescription()"></span>

in your theme and also override below js as well

app/design/frontend/[VendorName]/[theme]/Magento_SalesRule/js/view/summary/discount.js

add function like getCouponDescription and add below code

getCouponCode: function () {
if (!this.totals()) {
return null;
}

    return this.totals()['coupon_description'];
},

add extension attribute in your quote api for coupon_description

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="MagentoQuoteApiDataCartInterface">
        <attribute code="coupon_description" type="string" />
    </extension_attributes>
</config>

and create plugin

$extensionAttributes = $cart->getExtensionAttributes();
        $quoteId = $cart->getId();
        $couponDescription = "Your coupon descriptin code"
        $extensionAttributes->setCouponDescription($couponDescription);
        $cart->setExtensionAttributes($extensionAttributes);

Hope it should works

Method 3

The quickest way is to override the SalesRule module’s template and JS.

This is how I did it on several of my shops:

In you theme folder create

Magento_SalesRule/web/template/cart/totals/discount.html

<!-- ko if: isDisplayed() -->
<tr class="totals">
    <th colspan="1" style="" class="mark" scope="row">
        <span class="title" data-bind="text: getDiscountLabel()"></span>
        <span class="discount coupon" data-bind="text: getCouponLabel()"></span>
    </th>
    <td class="amount" data-bind="attr: {'data-th': title}">
        <span><span class="price" data-bind="text: getValue()"></span></span>
    </td>
</tr>
<!-- /ko -->

Magento_SalesRule/web/js/view/summary/discount.js

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/quote'
], function (Component, quote) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_SalesRule/summary/discount'
        },
        totals: quote.getTotals(),

        /**
         * @return {*|Boolean}
         */
        isDisplayed: function () {
            return this.isFullMode() && this.getPureValue() != 0; //eslint-disable-line eqeqeq
        },

        /**
         * @return {*}
         */
        getCouponCode: function () {
            if (!this.totals()) {
                return null;
            }

            return this.totals()['coupon_code'];
        },

        /**
         * @return {*}
         */
        getCouponLabel: function () {
            if (!this.totals()) {
                return null;
            }

            return this.totals()['coupon_label'];
        },

        /**
         * @return {*}
         */
        getDiscountLabel: function () {
            if (!this.totals()) {
                return null;
            }

            return this.totals()['total_segments'][2]['title'];
        },

        /**
         * @return {Number}
         */
        getPureValue: function () {
            var price = 0;

            if (this.totals() && this.totals()['discount_amount']) {
                price = parseFloat(this.totals()['discount_amount']);
            }

            return price;
        },

        /**
         * @return {*|String}
         */
        getValue: function () {
            return this.getFormattedPrice(this.getPureValue());
        }
    });
});

Make sure to flush the static files cache and Magento’s cache afterwards.

You should then be able to see the label (description) of the discount.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment