How To

How to pre-open “Apply Voucher Code” in the Checkout page of Magento 2

Howdy folks,
Since the first execution of coupon codes in 1887 by Asa Griggs Candler to promote his company, Coca Cola. These simple coupon code marketing strategy became a game-changer for the Coca Cola Company and transformed it into “the most popular soft drink”. According to one survey, 68% of visitors will leave your store if you dont offer any coupon code or promotional offers. That’s the reason why the majority of companies are now focusing more on promoting their online sales rather than offline sales, and also focusing on increasing digital coupons. Today’s digital coupons are the best ways to generate revenue from your eCommerce site. eCommerce Digital coupons also work like as the traditional coupons work. They are basically aimed at getting customers by offering discounts and festive offers. Thus offering coupons to your customers can help your eCommerce store to grow rapidly. And Magento 2 is already equipped with this facility of providing coupon code to your customers.
While frontend customer checkout, your customer can easily apply coupon code before placing an order. But if you see this feature, it is available as a collapsed tab that sometimes can not be noticed easily. Because of that even if having coupon code your customer unable to find the option to apply while checkout and abandoned their cart. Instead, programmatically keep this collapsed tab open highlights coupon code box, and your customer can easily find and use code.
To do the same, you have to set the discount collapsible widget to true and you need to override two template files by creating a custom extension.
To do the same first we need to create a “checkout_cart_index.xml” file inside your custom extension using below code.
app/code/VENDOR/EXTENSION/view/frontend/layout/

<pre class="lang:default decode:true">
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
     <referenceContainer name="cart.summary">
         <block class="Magento\Checkout\Block\Cart\Coupon" name="checkout.cart.coupon" as="coupon" template="VENDOR_EXTENSION::cart/coupon.phtml"/>
     </referenceContainer>
 </body>
</page>
</pre>

Now you need to create one more file “coupon.phtml” at this path using following code.
app/code/VENDOR/EXTENSION/view/frontend/templates/cart/

<pre class="lang:default decode:true">
<?php
 
// @codingStandardsIgnoreFile
?>
<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "active": true, "saveState": false}}'>
 <div class="title" data-role="title">
     <strong id="block-discount-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ __('Apply Discount Code') ?></strong>
 </div>
 <div class="content" data-role="content" aria-labelledby="block-discount-heading">
     <form id="discount-coupon-form"
           action="<?= /* @escapeNotVerified */ $block->getUrl('checkout/cart/couponPost') ?>"
           method="post"
              data-mage-init='{"discountCode":{"couponCodeSelector": "#coupon_code",
                                               "removeCouponSelector": "#remove-coupon",
                                               "applyButton": "button.action.apply",
                                               "cancelButton": "button.action.cancel"}}'>
         <div class="fieldset coupon<?= strlen($block->getCouponCode()) ? ' applied' : '' ?>">
             <input type="hidden" name="remove" id="remove-coupon" value="0" />
             <div class="field">
                 <label for="coupon_code" class="label"><span><?= /* @escapeNotVerified */ __('Enter discount code') ?></span></label>
                 <div class="control">
                     <input type="text" class="input-text" id="coupon_code" name="coupon_code" value="<?= $block->escapeHtml($block->getCouponCode()) ?>" placeholder="<?= $block->escapeHtml(__('Enter discount code')) ?>" <?php if (strlen($block->getCouponCode())): ?> disabled="disabled" <?php endif; ?> />
                 </div>
             </div>
             <div class="actions-toolbar">
                 <?php if (!strlen($block->getCouponCode())): ?>
                     <div class="primary">
                         <button class="action apply primary" type="button" value="<?= /* @escapeNotVerified */ __('Apply Discount') ?>">
                                <span><?= /* @escapeNotVerified */ __('Apply Discount') ?></span>
                         </button>
                     </div>
                 <?php else: ?>
                     <div class="primary">
                         <button  type="button" class="action cancel primary" value="<?= /* @escapeNotVerified */ __('Cancel Coupon') ?>"><span><?= /* @escapeNotVerified */ __('Cancel Coupon') ?></span></button>
                     </div>
                 <?php endif; ?>
             </div>
         </div>
     </form>
 </div>
</div>
</pre>

That’s it. If you see the above “coupon.phtml” template file, we have modified code from

<pre class="lang:default decode:true">
<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
</pre>
to
<pre class="lang:default decode:true">
<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "active": true, "saveState": false}}'>
</pre>

After doing this, this custom extension will keep your coupon code box open without collapsing.
Lastly, if you found this blog helpful, don’t forget to share it with your colleagues and Magento Friends and Let us know if you are facing any issue while implementing this code.
Happy Coding!

Click to rate this post!

[Total: 10 Average: 4.6]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏