Discounts are a great way to upscale the conversion on the eCommerce store. Using custom discounts, the store owner makes the most out of sales and develops customer loyalty. Technically, setting up a custom discount on the Magento 2 store isn't much of a big deal. It is required to exclude a part of the price cart the customers must pay for. Here, the following article brings you a step-by-step guide to help complete the configuration of custom discounts in Magento 2.
Step 1 - Enter a Total in the Sale.xml file
To enter a total in the file, follow the path
app/code/MageDelight/HelloWorld/etc/sales.xml
, then use the below script:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Sales:etc/sales.xsd">
<section name="quote">
<group name="totals">
<item name="customer_discount" instance="MageDelight\HelloWorld\Model\Total\Quote\Custom" sort_order="420"/>
</group>
</section>
</config>
Step 2 - Set the Discount Value
Insert the amount of custom discount in the model
app/code/MageDelight/HelloWorld/Model/Total/Quote/Custom.php:
<?php
namespace MageDelight\HelloWorld\Model\Total\Quote;
/**
* Class Custom
* @package MageDelight\HelloWorld\Model\Total\Quote
*/
class Custom extends \Magento\Quote\Model\Quote\Address\Total\AbstractTotal
{
/**
* @var \Magento\Framework\Pricing\PriceCurrencyInterface
*/
protected $_priceCurrency;
/**
* Custom constructor.
* @param \Magento\Framework\Pricing\PriceCurrencyInterface $priceCurrency
*/
public function __construct(
\Magento\Framework\Pricing\PriceCurrencyInterface $priceCurrency
){
$this->_priceCurrency = $priceCurrency;
}
/**
* @param \Magento\Quote\Model\Quote $quote
* @param \Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment
* @param \Magento\Quote\Model\Quote\Address\Total $total
* @return $this|bool
*/
public function collect(
\Magento\Quote\Model\Quote $quote,
\Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment,
\Magento\Quote\Model\Quote\Address\Total $total
)
{
parent::collect($quote, $shippingAssignment, $total);
$baseDiscount = 10;
$discount = $this->_priceCurrency->convert($baseDiscount);
$total->addTotalAmount('customdiscount', -$discount);
$total->addBaseTotalAmount('customdiscount', -$baseDiscount);
$total->setBaseGrandTotal($total->getBaseGrandTotal() - $baseDiscount);
$quote->setCustomDiscount(-$discount);
return $this;
}
}
Step 3: Show the Custom Discount Information
Once done with the above steps, grand total might have been updated but the customers won't be able to view the information about the total discount yet. Hence, you would be required to run the below-mentioned command to add the total in the layout file
app/code/MageDelight/HelloWorld/view/frontend/layout/checkout_cart_index.xml
from the console.
<?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="custom_discount" xsi:type="array">
<item name="component" xsi:type="string">MageDelight_HelloWorld/js/view/checkout/summary/customdiscount</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="config" xsi:type="array">
<item name="custom_discount" xsi:type="string" translate="true">Custom Discount</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 4: View Model Knockout
In order to show the total, ensure to call the model knockout
app/code/MageDelight/HelloWorld/view/frontend/web/js/view/checkout/summary/customdiscount.js
with the code snippet:
define(
[
'jquery',
'Magento_Checkout/js/view/summary/abstract-total'
],
function ($,Component) {
"use strict";
return Component.extend({
defaults: {
template: 'MageDelight_HelloWorld/checkout/summary/customdiscount'
},
isDisplayedCustomdiscount : function(){
return true;
},
getCustomDiscount : function(){
return '$10';
}
});
}
);
Now, get the discount in template knockout
app/code/MageDelight/HelloWorld/view/frontend/web/template/checkout/summary/customdiscount.html
<!-- ko if: isDisplayedCustomdiscount() -->
<tr class="totals customdiscount excl">
<th class="mark" colspan="1" scope="row" data-bind="text: custom_discount"></th>
<td class="amount">
<span class="price" data-bind="text: getCustomDiscount(), attr: {'data-th': custom_discount}"></span>
</td>
</tr>
<!-- /ko -->
After getting all the steps done rightly, you will be able to get the custom discount applied immediately in the customer’s review cart. It will be visible with the name and the discount amount. With the help of custom prices, you can offer better pricing while increasing customer loyalty. We hope that this guide helped you with the right information required to add a custom discount in the Magento 2 Store. If you come across any issue while implementing the same, feel free to reach out.