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
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"> </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 >>>>>>>>>>>>>>>>>
answered Dec 11, 2019 at 14:25
-
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?– ArulDec 12, 2019 at 12:34
-
<item name="component" xsi:type="string">Company_MyModule/js/form/element/telephone</item> what to add in this section?– ArulDec 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
-
-
1