on Magento 2.3 I have edited the Apply Coupon text box in the file I moved to
luma_child/Magento_Checkout/templates/cart/coupon.phtml
I altered the above file so that the coupon code box would be expanded by default which works on the view cart page.
However when I go to the checkout page (I am using default Luma child theme) the Apply Discount code box is not expanded by default like it is on the view cart page.
What is the path to the file that controls this on the actual checkout page?
Override the template located in:
vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html
Change line 7 from:
<div class="payment-option _collapsible opc-payment-additional discount-code"
data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">
To:
<div class="payment-option _collapsible opc-payment-additional discount-code _active">
Line 9 from:
<div class="payment-option-title field choice" data-role="title">
To:
<div class="payment-option-title field choice" data-role="title" aria-selected="true" aria-expanded="true">
Line 14 from:
<div class="payment-option-content" data-role="content">
To:
<div class="payment-option-content" data-role="content" style="display: block" aria-hidden="false">
This makes the Apply Discount Code section expanded by default.
To override the template, add the following to your requirejs-config.js:
var config = {
map: {
'*': {
'Magento_SalesRule/template/payment/discount.html':
'Vendor_Module/template/payment/discount.html'
}
}
};
If you don't have a requirejs-config, create one in app/code/Vendor/Module/view/frontend/requirejs-config.js.
Create the template in: app/code/Vendor/Module/view/frontend/web/template/payment/discount.html
The entire template (in Magento 2.4) would look like this:
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="payment-option _collapsible opc-payment-additional discount-code _active">
<div class="payment-option-title field choice" data-role="title" aria-selected="true" aria-expanded="true">
<span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">
<!-- ko i18n: 'Apply Discount Code'--><!-- /ko -->
</span>
</div>
<div class="payment-option-content" data-role="content" style="display: block" aria-hidden="false">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<form class="form form-discount" id="discount-form">
<div class="payment-option-inner">
<div class="field">
<label class="label" for="discount-code">
<span data-bind="i18n: 'Enter discount code'"></span>
</label>
<div class="control">
<input class="input-text"
type="text"
id="discount-code"
name="discount_code"
data-validate="{'required-entry':true}"
data-bind="value: couponCode, attr:{disabled:isApplied() , placeholder: $t('Enter discount code')} " />
</div>
</div>
</div>
<div class="actions-toolbar">
<div class="primary">
<!-- ko ifnot: isApplied() -->
<button class="action action-apply" type="submit" data-bind="'value': $t('Apply Discount'), click: apply">
<span><!-- ko i18n: 'Apply Discount'--><!-- /ko --></span>
</button>
<!-- /ko -->
<!-- ko if: isApplied() -->
<button class="action action-cancel" type="submit" data-bind="'value': $t('Cancel'), click: cancel">
<span><!-- ko i18n: 'Cancel coupon'--><!-- /ko --></span>
</button>
<!-- /ko -->
</div>
</div>
<!-- ko foreach: getRegion('captcha') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</form>
</div>
</div>
I have written an alternative solution to the answer you currently have. My answer keeps the javascript working so that the feature remains in keeping with Magento Luma theme original behaviour.
I do take over the checkout template using the checkout layout and this will hopefully be easy to integrate in your site.
Finally, I have attempted to make the least amount of changes in the templates so that it becomes a module that will be easy to maintain / upgrade in the future.
checkout_index_index.xml
<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="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="afterMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="discount" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Mbs_DiscountCollapsillable/discount</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
app/code/Mbs/DiscountCollapsillable/view/frontend/web/template/discount.html
<div class="payment-option _collapsible opc-payment-additional discount-code"
data-bind="mageInit: {'collapsible':{'active':'true', 'openedState': '_active'}}">
<div class="payment-option-title field choice" data-role="title">
<span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">
<!-- ko i18n: 'Apply Discount Code'--><!-- /ko -->
</span>
</div>
<div class="payment-option-content" data-role="content" style="display: block">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<form class="form form-discount" id="discount-form">
<div class="payment-option-inner">
<div class="field">
<label class="label" for="discount-code">
<span data-bind="i18n: 'Enter discount code'"></span>
</label>
<div class="control">
<input class="input-text"
type="text"
id="discount-code"
name="discount_code"
data-validate="{'required-entry':true}"
data-bind="value: couponCode, attr:{disabled:isApplied() , placeholder: $t('Enter discount code')} " />
</div>
</div>
</div>
<div class="actions-toolbar">
<div class="primary">
<!-- ko ifnot: isApplied() -->
<button class="action action-apply" type="submit" data-bind="'value': $t('Apply Discount'), click: apply">
<span><!-- ko i18n: 'Apply Discount'--><!-- /ko --></span>
</button>
<!-- /ko -->
<!-- ko if: isApplied() -->
<button class="action action-cancel" type="submit" data-bind="'value': $t('Cancel'), click: cancel">
<span><!-- ko i18n: 'Cancel coupon'--><!-- /ko --></span>
</button>
<!-- /ko -->
</div>
</div>
<!-- ko foreach: getRegion('captcha') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</form>
</div>
</div>
Also, the link of the full module: https://bitbucket.org/magstaging/mbs_discountcollapsillable/src/master/
