I want to expand “Apply Discount Code” as default

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}

Using Magento 2
I would like to expand the "Apply Discount Code" as default.

The current code is

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="false" aria-expanded="false" tabindex="0">

I think the code should be

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">

I have no idea where to edit this code
Thank you in advance

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

add a comment |

Using Magento 2
I would like to expand the "Apply Discount Code" as default.

The current code is

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="false" aria-expanded="false" tabindex="0">

I think the code should be

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">

I have no idea where to edit this code
Thank you in advance

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

add a comment |

Using Magento 2
I would like to expand the "Apply Discount Code" as default.

The current code is

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="false" aria-expanded="false" tabindex="0">

I think the code should be

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">

I have no idea where to edit this code
Thank you in advance

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

Using Magento 2
I would like to expand the "Apply Discount Code" as default.

The current code is

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="false" aria-expanded="false" tabindex="0">

I think the code should be

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">

I have no idea where to edit this code
Thank you in advance

magento2

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

asked Oct 17 '18 at 23:47

Darren Sutherland

15819

add a comment |

2 Answers
2

active

oldest

votes

You have set the Discount collapsible widget to active true.

You can do so by overriding the template file in your custom module.

app/code/Anshu/Custom/view/frontend/layout/checkout_cart_index.xml

<?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="MagentoCheckoutBlockCartCoupon" name="checkout.cart.coupon" as="coupon" template="Anshu_Custom::cart/coupon.phtml"/>

        </referenceContainer>

    </body>

</page>

app/code/Anshu/Custom/view/frontend/templates/cart/coupon.phtml

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

In the coupon.phtml template file, I have changed

<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>

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

I have added "active": true in the collapsible widget configuration.

Anshu is the namespace and Custom the module name.

edited Nov 14 '18 at 13:46

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

Unfortunately this did not work. Also tried editing vendor/magento/module-checkout/view/frontend/templates/cart/coupon.phtml directly but the change did not work

– Darren Sutherland
Oct 18 '18 at 22:40

@DarrenSutherland Are you using any custom theme? or if the default template is already overwritten? Check which template is being called.

– Anshu Mishra
Oct 19 '18 at 6:11

I'm using the theme Infortis Ultimo. using Chrome this is what I can find <div class="payment-option _collapsible opc-payment-additional discount-code" data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" data-collapsible="true" role="tablist">

– Darren Sutherland
Oct 21 '18 at 1:16

Try to change data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" to data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}"

– Anshu Mishra
Oct 21 '18 at 9:48

discount.phtml or coupon.phtml file?

– jafar pinjar
Nov 14 '18 at 12:32

|
show 8 more comments

I've got the same issue and I'm also using Ultimo but that doesn't override Magento core for this functionality.

I need the "Apply Discount Code" block expanded by default and then I'll sort it's styling out, it's a bit hidden as standard.

I've got the correct file - vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html

but not matter what I do, the block won't expand on load.

I've tried adding "active": true into

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">

changed to

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}">

but that didn't work, so I tried

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active' },'active': true}">

but that didn't work either.

It might be that the first div isn't the one collpasing as when I inspect it and click on it it's actually the next div that expands and collapses

<div class="payment-option-title field choice" data-role="title">

    <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">

Does anyone have any idea on how to get the collapsed div to expand by default. I've researched it on the web and read the javascript accordion instructions on the Magento site but I can't figure it out.

Would really appreciate the help.

edited 16 hours ago

answered 16 hours ago

wjpbill

516

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f246918%2fi-want-to-expand-apply-discount-code-as-default%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You have set the Discount collapsible widget to active true.

You can do so by overriding the template file in your custom module.

app/code/Anshu/Custom/view/frontend/layout/checkout_cart_index.xml

<?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="MagentoCheckoutBlockCartCoupon" name="checkout.cart.coupon" as="coupon" template="Anshu_Custom::cart/coupon.phtml"/>

        </referenceContainer>

    </body>

</page>

app/code/Anshu/Custom/view/frontend/templates/cart/coupon.phtml

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

In the coupon.phtml template file, I have changed

<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>

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

I have added "active": true in the collapsible widget configuration.

Anshu is the namespace and Custom the module name.

edited Nov 14 '18 at 13:46

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

Unfortunately this did not work. Also tried editing vendor/magento/module-checkout/view/frontend/templates/cart/coupon.phtml directly but the change did not work

– Darren Sutherland
Oct 18 '18 at 22:40

@DarrenSutherland Are you using any custom theme? or if the default template is already overwritten? Check which template is being called.

– Anshu Mishra
Oct 19 '18 at 6:11

I'm using the theme Infortis Ultimo. using Chrome this is what I can find <div class="payment-option _collapsible opc-payment-additional discount-code" data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" data-collapsible="true" role="tablist">

– Darren Sutherland
Oct 21 '18 at 1:16

Try to change data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" to data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}"

– Anshu Mishra
Oct 21 '18 at 9:48

discount.phtml or coupon.phtml file?

– jafar pinjar
Nov 14 '18 at 12:32

|
show 8 more comments

You have set the Discount collapsible widget to active true.

You can do so by overriding the template file in your custom module.

app/code/Anshu/Custom/view/frontend/layout/checkout_cart_index.xml

<?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="MagentoCheckoutBlockCartCoupon" name="checkout.cart.coupon" as="coupon" template="Anshu_Custom::cart/coupon.phtml"/>

        </referenceContainer>

    </body>

</page>

app/code/Anshu/Custom/view/frontend/templates/cart/coupon.phtml

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

In the coupon.phtml template file, I have changed

<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>

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

I have added "active": true in the collapsible widget configuration.

Anshu is the namespace and Custom the module name.

edited Nov 14 '18 at 13:46

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

Unfortunately this did not work. Also tried editing vendor/magento/module-checkout/view/frontend/templates/cart/coupon.phtml directly but the change did not work

– Darren Sutherland
Oct 18 '18 at 22:40

@DarrenSutherland Are you using any custom theme? or if the default template is already overwritten? Check which template is being called.

– Anshu Mishra
Oct 19 '18 at 6:11

I'm using the theme Infortis Ultimo. using Chrome this is what I can find <div class="payment-option _collapsible opc-payment-additional discount-code" data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" data-collapsible="true" role="tablist">

– Darren Sutherland
Oct 21 '18 at 1:16

Try to change data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" to data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}"

– Anshu Mishra
Oct 21 '18 at 9:48

discount.phtml or coupon.phtml file?

– jafar pinjar
Nov 14 '18 at 12:32

|
show 8 more comments

You have set the Discount collapsible widget to active true.

You can do so by overriding the template file in your custom module.

app/code/Anshu/Custom/view/frontend/layout/checkout_cart_index.xml

<?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="MagentoCheckoutBlockCartCoupon" name="checkout.cart.coupon" as="coupon" template="Anshu_Custom::cart/coupon.phtml"/>

        </referenceContainer>

    </body>

</page>

app/code/Anshu/Custom/view/frontend/templates/cart/coupon.phtml

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

In the coupon.phtml template file, I have changed

<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>

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

I have added "active": true in the collapsible widget configuration.

Anshu is the namespace and Custom the module name.

edited Nov 14 '18 at 13:46

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

You have set the Discount collapsible widget to active true.

You can do so by overriding the template file in your custom module.

app/code/Anshu/Custom/view/frontend/layout/checkout_cart_index.xml

<?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="MagentoCheckoutBlockCartCoupon" name="checkout.cart.coupon" as="coupon" template="Anshu_Custom::cart/coupon.phtml"/>

        </referenceContainer>

    </body>

</page>

app/code/Anshu/Custom/view/frontend/templates/cart/coupon.phtml

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

In the coupon.phtml template file, I have changed

<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>

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

I have added "active": true in the collapsible widget configuration.

Anshu is the namespace and Custom the module name.

edited Nov 14 '18 at 13:46

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

edited Nov 14 '18 at 13:46

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

answered Oct 18 '18 at 5:14

Anshu Mishra

5,64652662

Unfortunately this did not work. Also tried editing vendor/magento/module-checkout/view/frontend/templates/cart/coupon.phtml directly but the change did not work

– Darren Sutherland
Oct 18 '18 at 22:40

@DarrenSutherland Are you using any custom theme? or if the default template is already overwritten? Check which template is being called.

– Anshu Mishra
Oct 19 '18 at 6:11

I'm using the theme Infortis Ultimo. using Chrome this is what I can find <div class="payment-option _collapsible opc-payment-additional discount-code" data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" data-collapsible="true" role="tablist">

– Darren Sutherland
Oct 21 '18 at 1:16

Try to change data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" to data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}"

– Anshu Mishra
Oct 21 '18 at 9:48

discount.phtml or coupon.phtml file?

– jafar pinjar
Nov 14 '18 at 12:32

|
show 8 more comments

Unfortunately this did not work. Also tried editing vendor/magento/module-checkout/view/frontend/templates/cart/coupon.phtml directly but the change did not work

– Darren Sutherland
Oct 18 '18 at 22:40

@DarrenSutherland Are you using any custom theme? or if the default template is already overwritten? Check which template is being called.

– Anshu Mishra
Oct 19 '18 at 6:11

I'm using the theme Infortis Ultimo. using Chrome this is what I can find <div class="payment-option _collapsible opc-payment-additional discount-code" data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" data-collapsible="true" role="tablist">

– Darren Sutherland
Oct 21 '18 at 1:16

Try to change data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" to data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}"

– Anshu Mishra
Oct 21 '18 at 9:48

discount.phtml or coupon.phtml file?

– jafar pinjar
Nov 14 '18 at 12:32

Unfortunately this did not work. Also tried editing vendor/magento/module-checkout/view/frontend/templates/cart/coupon.phtml directly but the change did not work

– Darren Sutherland
Oct 18 '18 at 22:40

@DarrenSutherland Are you using any custom theme? or if the default template is already overwritten? Check which template is being called.

– Anshu Mishra
Oct 19 '18 at 6:11

I'm using the theme Infortis Ultimo. using Chrome this is what I can find <div class="payment-option _collapsible opc-payment-additional discount-code" data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" data-collapsible="true" role="tablist">

– Darren Sutherland
Oct 21 '18 at 1:16

Try to change data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" to data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}"

– Anshu Mishra
Oct 21 '18 at 9:48

discount.phtml or coupon.phtml file?

– jafar pinjar
Nov 14 '18 at 12:32

|
show 8 more comments

I've got the same issue and I'm also using Ultimo but that doesn't override Magento core for this functionality.

I need the "Apply Discount Code" block expanded by default and then I'll sort it's styling out, it's a bit hidden as standard.

I've got the correct file - vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html

but not matter what I do, the block won't expand on load.

I've tried adding "active": true into

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">

changed to

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}">

but that didn't work, so I tried

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active' },'active': true}">

but that didn't work either.

It might be that the first div isn't the one collpasing as when I inspect it and click on it it's actually the next div that expands and collapses

<div class="payment-option-title field choice" data-role="title">

    <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">

Would really appreciate the help.

edited 16 hours ago

answered 16 hours ago

wjpbill

516

add a comment |

I've got the same issue and I'm also using Ultimo but that doesn't override Magento core for this functionality.

I need the "Apply Discount Code" block expanded by default and then I'll sort it's styling out, it's a bit hidden as standard.

I've got the correct file - vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html

but not matter what I do, the block won't expand on load.

I've tried adding "active": true into

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">

changed to

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}">

but that didn't work, so I tried

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active' },'active': true}">

but that didn't work either.

It might be that the first div isn't the one collpasing as when I inspect it and click on it it's actually the next div that expands and collapses

<div class="payment-option-title field choice" data-role="title">

    <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">

Would really appreciate the help.

edited 16 hours ago

answered 16 hours ago

wjpbill

516

add a comment |

I've got the same issue and I'm also using Ultimo but that doesn't override Magento core for this functionality.

I need the "Apply Discount Code" block expanded by default and then I'll sort it's styling out, it's a bit hidden as standard.

I've got the correct file - vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html

but not matter what I do, the block won't expand on load.

I've tried adding "active": true into

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">

changed to

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}">

but that didn't work, so I tried

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active' },'active': true}">

but that didn't work either.

It might be that the first div isn't the one collpasing as when I inspect it and click on it it's actually the next div that expands and collapses

<div class="payment-option-title field choice" data-role="title">

    <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">

Would really appreciate the help.

edited 16 hours ago

answered 16 hours ago

wjpbill

516

I've got the same issue and I'm also using Ultimo but that doesn't override Magento core for this functionality.

I need the "Apply Discount Code" block expanded by default and then I'll sort it's styling out, it's a bit hidden as standard.

I've got the correct file - vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html

but not matter what I do, the block won't expand on load.

I've tried adding "active": true into

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">

changed to

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}">

but that didn't work, so I tried

<div class="payment-option _collapsible opc-payment-additional discount-code"

 data-bind="mageInit: {'collapsible':{'openedState': '_active' },'active': true}">

but that didn't work either.

It might be that the first div isn't the one collpasing as when I inspect it and click on it it's actually the next div that expands and collapses

<div class="payment-option-title field choice" data-role="title">

    <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">

Would really appreciate the help.

edited 16 hours ago

answered 16 hours ago

wjpbill

516

edited 16 hours ago

answered 16 hours ago

wjpbill

516

answered 16 hours ago

wjpbill

516

answered 16 hours ago

wjpbill

516

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdjykuj