Magento 2.3.5 : Editing Billing Address and Shipping Address form.html

billing-addressknockoutjsmagento2magento2.3.5shipping-address

I am using magento 2.3.5 and require to change the shipping address and billing address field input during checkout, what I required to do is

change addresses input field label as per desired

change street address input type from text input to textarea input
reposition all input using sequence as below

Full Name
Contact Number
Postal Code
State ( Dropdownlist )
City ( Dropdownlist )
Full Address ( text area )

combine first name and last name to become one input which is full name

I already able to do the no 1 which is changing the label through adding the wording list here

app/design/frontend/MageBig/martfury/layout01/i18n/en_US.csv

I am also able to do some of the part in no 3 which is by modifying the code at here

app/code/SR/ModifiedCheckout/Plugin/Block/LayoutProcessor.php

even though some of the input are able to reposition using orderBy it does not reflect to all field such as street address

I also am having a hard time to accomplish the no 2, I tried creating this file

app/code/SR/ModifiedCheckout/view/frontend/web/template/billing-address/form.html

and fill in using content which I get from its vendor

vendor/magento/module-checkout/view/frontend/web/template/billing-address/form.html

and modify as necessary so that it becomes as below

<div class="billing-address-form" data-bind="fadeVisible: isAddressFormVisible">
    <div class="step-title" data-bind="i18n: 'Billing Address'" data-role="title"></div>
    <!-- ko foreach: getRegion('before-fields') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <fieldset id="billing-new-address-form" class="fieldset address">
        <!-- ko foreach: getRegion('additional-fieldsets') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <!-- ko if: (isCustomerLoggedIn) -->
            <div class="field save-address">
                <input type="checkbox" class="checkbox" id="billing-save-in-address-book"
                       data-bind="checked: saveInAddressBook" />
                <label class="label" for="billing-save-in-address-book">
                    <span data-bind="i18n: 'Save in address book'"></span>
                </label>
            </div>
        <!-- /ko -->
    </fieldset>
</div>

if I were to change the id or class I am able to see it is reflected into the billing address form

but I don't understand how this code behave and how do I add in codes to edit the street address input field

Kindly help

Best Answer

I would suggest, this is a long requirement, so you have to work try and run. Please review the below reference link which will help you to achieve your task.

https://inchoo.net/magento-2/frontend/reorder-input-fields-shipping-billing-step-magento-2/

Magento 2: change shipping address form fields order

https://stackoverflow.com/questions/43783831/checkout-page-shipping-address-form-edit-magento2/45455426

https://www.fmeextensions.com/blog/add-custom-field-magento-2-shipping-address/

I hope this will help.

Please let me know if you are facing any specific issues. Thanks

Related Solutions

Magento – billing and shipping address should have different address

You can set separate addresses by creating another address in the customer section and set that to default shipping address

Magento – How to clear billing form validation errors when using Magento UI components

You've asked a bit of a mouthful there -- probably too much for a single Stack Exchange question, so I'm going to concentrate on teaching you how to reset the initial state of the form so things no longer appear invalid if there's a blank value. If you're interested in the whys, you'll need to get up to speed on the fundamentals of UI Components and x-magento-init scripts. My Magento 2 UI Components and uiElement Internals series are a good place to start. The following assumes you have some familiarity with these systems -- if there's something confusing below then the above articles (as well as the other Magento 2 articles) will probably have the information you're looking for.

In the Checkout Application, each form field is represented by a view model, and one-or-many view model templates. You can see this in Commerce Bug's KO Scopes tab.

The firstname's view model is an object derived from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module. You can find that model's source code here

vendor/magento//module-ui/view/base/web/js/form/element/abstract.js

The reset method is the one we're interested in. This will reset a field's validation state. You'll need to figure out the full uiRegistry string identifier for the specific model (again, Commerce Bug is useful here), use that string to fetch the instantiated view model, and then call the reset function. For the checkmo form, the following program (easily adapted into a define module if you're going to use it in your application) will do that for the firstname field.

requirejs(['uiRegistry'], function(uiRegistry){
    uiRegistry.get('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields.firstname').reset();
});

Of course, you'll likely want to fetch each view model that's part of a particular form -- the following is a start on that.

uiRegistry.get(function(viewModel){
    var parentName = viewModel['parentName'] ? viewModel['parentName'] : '';
    if(parentName.indexOf('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields') === -1){
        return;
    };       
    console.log(viewModel);
});

This uses the uiRegistry's callback feature to search for all view models with a parent of checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields. Some of these may not be form elements, but we'll leave that problem as an exercise for the questioner.

Hope that helps!

Best Answer

Related Solutions

Magento – billing and shipping address should have different address

Magento – How to clear billing form validation errors when using Magento UI components

Related Topic