I am working with magento2, and now I want open popup modal box when the user clicks on checkout link. Instead of the open checkout page, it should open my custom pop box with the module in magento2. Anyone know about this please give me a suggestion.

  • Can you please give me one example or what exactly we need to work with my custom module. Because I did not have more knowledge about custom module and how to override checkout javascript with my current module please give me suggestions Commented Jun 27, 2019 at 16:37
  • I want exactly as you said.I make changes in one file and I got popup open at click on checkout button. I posted my code in answer section. Commented Jan 30, 2020 at 13:30

3 Answers 3


Please try with below event, which is working with before checkout page.


Observers are used, when you want to do something with the data of cart , but for your requirement you need work with js , html and phtml.

For example if you want to open a popup on click of minicart on the sidebar Proceed To checkout button then override


and then change this events['click ' + this.options.button.checkout] as per your requirement

If you want to check the same in checkout page then override


and remove

        "checkoutUrl":"<?= /* @escapeNotVerified */ $block->getCheckoutUrl() ?>"

then add your popup on click or you can add your data-mage-init


When user click on checkout button of cart page, one popup will be open. I think you want this.

I hope this will help you.

Filepath : \vendor\magento\module-checkout\view\frontend\templates\onepage\link.phtml

You have to override this file.

// @codingStandardsIgnoreFile
<?php if ($block->isPossibleOnepageCheckout()):?>
    <button type="button"
            title="<?= /* @escapeNotVerified */ __('Proceed to Checkout') ?>"

            class="action primary checkout<?= ($block->isDisabled()) ? ' disabled' : '' ?> chirg"
            <?php if ($block->isDisabled()):?>disabled="disabled"<?php endif; ?>>
        <span><?= /* @escapeNotVerified */ __('Proceed to Checkout') ?></span>
<?php endif?>

<div id="messages2">
      <div class="col-sm-6">
        <h2><a href="/customer/account/login">New User Click here</a></h2>
      <div class="col-sm-6">
        <h2><a data-mage-init='{"Magento_Checkout/js/proceed-to-checkout":{"checkoutUrl":"<?= /* @escapeNotVerified */ $block->getCheckoutUrl() ?>"}}'>COntinue with Guest Checkout</a></h2>

<script type="text/javascript">
// <![CDATA[
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: []

            var popup = modal(options, $('#messages2'));
// ]]>  

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.