1

I need to add a button under the phone number filed in the shipping address section in a one-page checkout and the button should be visible only when the user enters the phone number. Based on the entered number, I need to check the condition whether the button is visible or not. How to achieve this?. I already followed this link https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_edit_form.html but I did not know how to add button under the phone number.

1 Answer 1

2

You can override checkout shipping address Phone component to show and control a custom Button under Phone filed.

I assume you are using a custom Module named "Company_MyModule" for this customisation.

Please create the followings files and follow the steps as describe below.

step 1)

Create checkout_index_index.xml under YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/layout/

File : YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<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="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">                                                      
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <!-- the field you are customizing -->
                                                                <item name="telephone" xsi:type="array">                                                                    
                                                                    <item name="component" xsi:type="string">Company_MyModule/js/form/telephone</item>
                                                                    <!-- add validation rules here-->
                                                                    <item name="validation" xsi:type="array">
                                                                            <item name="required-entry" xsi:type="boolean">true</item>
                                                                            <item name="validate-phoneStrict" xsi:type="boolean">true</item>
                                                                    </item>
                                                                    <item name="config" xsi:type="array">
                                                                        <!-- Assigning a new template -->
                                                                        <item name="elementTmpl" xsi:type="string">Company_MyModule/form/phone_button</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

step 2)

Create the custom UI Component js file telephone.js under YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/web/js/form/

File : YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/web/js/form/telephone.js

define([
    'underscore',
    'uiRegistry',
    'ko',
    'Magento_Ui/js/form/element/abstract',
    'Magento_Ui/js/modal/modal'
],  function (_, uiRegistry, ko, Component) {
    'use strict';
   return Component.extend({       
        isShowPhoneButton: ko.observable(false),        
        showPhonePopUp: function (){
            alert("I am Clicked");
        },
        onUpdate: function(){
            var self = this;
            this._super();
            if(this.checkInvalid()){                                
                self.isShowPhoneButton(false);
            } else {                
                self.isShowPhoneButton(true);
            }
        }       
    });
});

Step 3)

Create the custom UI Component template file phone_button.html under YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/web/template/form

File : YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/web/template/form/phone_button.html

<!-- input field element and corresponding bindings -->
<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',    
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }" />
<!-- additional content -->
<div class="clearer">&nbsp;</div>
<button type="button" class="action" data-bind="click: showPhonePopUp, visible: isShowPhoneButton()">
     <span data-bind="i18n: 'My Button'">My Button</span>
</button>

step 5)

Run followings commands to refresh cache.

php bin/magento cache:f

NOTE:

I added two validation class for checkout shipping address phone number field. Those are "required-entry" and "validate-phoneStrict" in the layout XML file checkout_index_index.xml. Please update the validation section as per your needs.

---------------------
---------------------
<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="boolean">true</item>
    <item name="validate-phoneStrict" xsi:type="boolean">true</item>
</item>
---------------------
---------------------

<<<<<<<<<<<<<<< Here is the Demo >>>>>>>>>>>>>>>>>

enter image description here

9
  • Thank you for your response.But what is the use of Company_MyModule/js/form/element/telephone file? and what I need to implement in this section?
    – Arul
    Dec 12, 2019 at 12:34
  • <item name="component" xsi:type="string">Company_MyModule/js/form/element/telephone</item> what to add in this section?
    – Arul
    Dec 12, 2019 at 15:30
  • Yes as you nee to customise checkout shipping address phone number section , you need to create a custom component. I create the custom component telephone.js under Company_MyModule/js/form/element/ ("Company_MyModule" is the module name). Dec 13, 2019 at 10:00
  • can you post your telephone.js for my reference?
    – Arul
    Dec 13, 2019 at 10:08
  • 1
    Please check my updated ans. Thank you. Dec 13, 2019 at 11:02

Your Answer

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

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