Add Custom Discount tab in checkout page side-bar total summary.
Magento 2 Checkout and Cart Page cart item total show custom field value at frontend. It similar to Discount
You can do this with both ways by custom module Or by custom theme, I'm explaining the theme process; you can follow the same steps for module difference in directory structure.
Show attribute in cart page
Step 1. Need to override checkout_cart_index.xml file in theme or Module
File name is :checkout_cart_index.xml in site the directory Magento_Checkout/layout/checkout_cart_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
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="discountonmrp" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/discountonmrp</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Product Discount on MRP</item>
<item name="template" xsi:type="string">Magento_Checkout/cart/totals/discountonmrp</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 2. Now need to create your js and template file, which are declared in xml file
File name is discountonmrp.js in the path Magento_Checkout/web/js/view/summary/discountonmrp.js
define([
'jquery',
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/quote'
], function ($, Component, quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/summary/discountonmrp'
},
/**
* Get pure value.
*
* @return {*}
*/
getPureValue: function () {
var totals = quote.getTotals()();
if (parseFloat(totals.extension_attributes.discounton_mrp) !== 0) {
return totals.extension_attributes.discounton_mrp;
}
$('.discounonmrp').addClass('hide-element');
return 0;
},
/**
* @return {*|String}
*/
getValue: function () {
return this.getFormattedPrice(this.getPureValue());
}
});
});
Step 3. Create template file which have html
File is discountonmrp.html in Magento_Checkout/cart/totals/discountonmrp
<tr class="totals sub discounonmrp">
<th class="mark" colspan="1" scope="row" data-bind="i18n: title"></th>
<td class="amount" data-th="Product Discount on MRP">
<span class="price" data-bind="text: getValue()"></span>
</td>
</tr>
Now you can add same field for checkout page. For that, you need to override checkout_index_index.xml file in the path
Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="discountonmrp" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/discountonmrp</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Product Discount on MRP</item>
<item name="template" xsi:type="string">Magento_Checkout/cart/totals/discountonmrp</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 4. You need to create extension attribute for quote by which you get value for show in frontend
File is extension_attributes.xml in your custom module /app/code/Vendor/Module/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="Magento\Quote\Api\Data\TotalsInterface">
<attribute code="discounton_mrp" type="string"/>
</extension_attributes>
</config>
Step 5. Now need to override CartTotalRepository by di.xml file
Create file inside the app/code/Vendor/Module/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="Magento\Quote\Model\Cart\CartTotalRepository">
<plugin name="Vendor_Module::dicounton_mrp" type="Vendor\Module\Plugin\Cart\CartTotalRepository" />
</type>
</config>
Step 6. Create Plugin file inside your module
Vendor\Module\Plugin\Cart\CartTotalRepository.php
<?php
namespace Vendor\Module\Plugin\Cart;
use Magento\Framework\App\ProductMetadataInterface;
use Magento\Quote\Api\Data\TotalsExtensionFactory;
use \Magento\Checkout\Model\Cart;
/**
* Fix Magento bug on checkout API.
* Insert discount breakdown data.
*/
class CartTotalRepository
{
/**
* @var ProductMetadataInterface
*/
private $productMetadata;
/**
* @var TotalsExtensionFactory
*/
private $totalsExtensionFactory;
/**
* @var Cart $_cart
*/
private $_cart;
/**
* Construct
*
* @param \Magento\Framework\App\ProductMetadataInterface $productMetadata
* @param \Magento\Quote\Api\Data\TotalsExtensionFactory $totalsExtensionFactory
* @param \Magento\Checkout\Model\Cart $_cart
*/
public function __construct(
ProductMetadataInterface $productMetadata,
TotalsExtensionFactory $totalsExtensionFactory,
Cart $_cart
) {
$this->productMetadata = $productMetadata;
$this->totalsExtensionFactory = $totalsExtensionFactory;
$this->_cart = $_cart;
}
/**
* Fix Magento bug on checkout API
*
* @param \Magento\Quote\Model\Cart\CartTotalRepository $subject
* @param int|string $cartId
* @return array
*/
public function beforeGet(\Magento\Quote\Model\Cart\CartTotalRepository $subject, $cartId)
{
return [$cartId];
}
/**
* Fix Magento bug on checkout API
*
* @param \Magento\Quote\Model\Cart\CartTotalRepository $subject
* @param \Magento\Quote\Model\Cart\Totals $quoteTotals
* @return \Magento\Quote\Model\Cart\Totals
*/
public function afterGet(\Magento\Quote\Model\Cart\CartTotalRepository $subject, $quoteTotals)
{
$extensionAttributes = $quoteTotals->getExtensionAttributes();
if (!$extensionAttributes) {
$extensionAttributes = $this->totalsExtensionFactory->create();
}
$quote = $this->_cart->getQuote();
if ($quote) {
if ($quote->getAllVisibleItems()) {
$amount = 0;
foreach ($quote->getAllVisibleItems() as $item) {
if ($item->getProduct()->getFinalPrice() < $item->getProduct()->getPrice()) {
$price = $item->getProduct()->getPrice() - $item->getProduct()->getFinalPrice();
$amount += $price* $item->getQty();
}
}
if($amount > 0) {
$amount = (string)'-'.$amount;
}
$extensionAttributes->setDiscountonMrp($amount);
$quoteTotals->setExtensionAttributes($extensionAttributes);
}
}
return $quoteTotals;
}
}
After flow all above steps need to run magento deploy commands.
php bin/magento s:s:d -f
php bin/magento c:f
Result:
