How to add a customization button on the checkout ...

PHPCuong · ‎12-11-2023

Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series.

Recently, I got a request from a fan on my YouTube channel. It was a request from @asfarwaheed3913 Youtube channel, that he wanted to create a customization button on the checkout page, when clicking this button it will show a popup content with the Google Maps content, and then the client can close this popup by clicking the close button.

At this time I have free time, so I created this video so everybody can watch, please subscribe to my channel and share my videos so I will get motivated to make new videos.

Let's do this practice, we must create a new customization module called PHPCuong_CustomerAddress. This module will override the default template of the street field. Then we can add a customization button called "Show Google Maps" next to this street field.

Watch the video about this practice here https://www.youtube.com/watch?v=3ANR_SfyIAY&list=PL98CDCbI3TNvPczWSOnpaMoyxVISLVzYQ&index=98

Milople · ‎02-16-2024

Hi @PHPCuong,

To add a customization button on the checkout page:

First create a file at Vendor_Module/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="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="custom-form" xsi:type="array">
                                                                <!-- Add this item to configure your js file  -->
                                                                <item name="component" xsi:type="string">Milople_Customization/js/popup</item>
                                                                <item name="config" xsi:type="array">
                                                                    <!-- And this to add your html template  -->
                                                                    <item name="template" xsi:type="string">Milople_Customization/checkout/popup-content</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>
</page>

After this add new file at

 <!-- app/code/YourVendor/YourModule/view/frontend/templates/checkout/popup-content.phtml -->

<button id="custom-button">Customize Checkout</button>
<div id="popup-content" style="display: none;">
    <!-- Google Maps content goes here -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3152.754452651938!2d-122.0840864843229!3d37.422040079827695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580cf7e26cf19%3A0xa90477e837e49695!2sGoogleplex!5e0!3m2!1sen!2sus!4v1588735338476!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    <button id="close-button">Close</button>
</div>

And create js file at :

// app/code/YourVendor/YourModule/view/frontend/web/js/popup.js

require(['jquery'], function($) {
    $(document).ready(function() {
        $('#custom-button').on('click', function() {
            // Show the popup
            $('#popup-content').show();
        });

        $('#close-button').on('click', function() {
            // Close the popup
            $('#popup-content').hide();
        });
    });
});

After this new button will be created when clicking this button it will show a popup content with the Google Maps content, and then the client can close this popup by clicking the close button.

If the issue will be resolved, Click Kudos & Accept as a Solution.

gp2830446gd0bf · ‎02-28-2024

To add a customization button on the Magento 2 checkout page for showing Google Maps in a popup, you need to create a new module, perhaps named PHPCuong_CustomerAddress. This module should override the default template of the checkout's street field to include your custom button. When clicked, this button will trigger a popup displaying Google Maps, allowing the client to view the map and close the popup afterward. This involves editing Magento's layout XML files, creating a new template file for the button, and possibly adding JavaScript for the popup functionality and integrating the Google Maps API.

How to add a customization button on the checkout page

How to add a customization button on the checkout page

Re: How to add a customization button on the checkout page

Re: How to add a customization button on the checkout page