如何在Magento 2的结帐页面中预先打开“应用优惠券代码”

Magento
2023-09-02 14:55:24
29600 阅读

在前端客户结账时，您的客户可以在下订单之前轻松应用优惠券代码。但是，如果您看到此功能，则可以将其用作折叠选项卡，有时不容易注意到。因此，即使拥有优惠券代码，您的客户也无法在结帐时找到申请选项并放弃购物车。相反，以编程方式将此折叠的选项卡保持打开状态，突出显示优惠券代码框，您的客户可以轻松查找和使用代码。

为此，您必须将折扣可折叠小部件设置为 true，并且需要通过创建自定义扩展来覆盖两个模板文件。

首先，我们需要使用以下代码在自定义扩展中创建一个“checkout_cart_index.xml”文件。

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>

现在，您需要使用以下代码在此路径上再创建一个文件“coupon.phtml”。

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>

就是这样。如果您看到上面的“coupon.phtml”模板文件，我们已经修改了以下

代码执行此操作后，此自定义扩展将使您的优惠券代码框保持打开状态而不会折叠。

最后，如果您发现此博客有帮助，请不要忘记与您的同事和Magento朋友分享，如果您在实现此代码时遇到任何问题，请告诉我们。

祝您编码愉快！

<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>