The Question:
How to override/customize/add billing address bindings?
The Context:
I've added some custom inputs to Shipping page in Checkout page. As shown below. These fields are there to replace the billing address inputs.
The Problem:
I want to show the data of those custom fields in billing detail part of payment review (i've removed the checkbox that displays the billing form if shipping and billing addresses aren't the same) but the information gets overrided by the shipping address or is partially blank as shown below.
What i've done:
The definition of the custom fields is done as follows. Vendor/Module/view/frontend/layout/checkout_index_index.xml
<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">
<item name="checkbox_same" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
<item name="config" xsi:type="array">
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
<item name="customScope" xsi:type="string">shippingAddress</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
<item name="id" xsi:type="string">checkbox-same</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">shippingAddress.checkbox_same</item>
<item name="label" xsi:type="string"></item>
<item name="description" xsi:type="string">¿La dirección de facturación es diferente a la de envío?</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="sortOrder" xsi:type="string">90</item>
<item name="id" xsi:type="string">checkbox-same</item>
</item>
<item name="billing_name" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
<item name="customScope" xsi:type="string">shippingAddress</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">${ $.parentName }.checkbox_same:checked</item>
</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">shippingAddress.billing_name</item>
<item name="label" xsi:type="string">Nombre</item>
<item name="sortOrder" xsi:type="string">91</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
<item name="letters-with-basic-punc" xsi:type="string">true</item>
</item>
</item>
<item name="billing_lastname" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
<item name="customScope" xsi:type="string">shippingAddress</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">${ $.parentName }.checkbox_same:checked</item>
</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">shippingAddress.billing_lastname</item>
<item name="label" xsi:type="string">Apellido</item>
<item name="sortOrder" xsi:type="string">92</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
<item name="letters-with-basic-punc" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
I tried to set the new billing address by overriding select-billing-address.js in Vendor/Module/view/frontend/web/js/action/select-billing-address-override.js
define(
[
'jquery',
'../model/quote'
],
function ($, quote) {
'use strict';
return function (billingAddress) {
var address = null;
if (quote.shippingAddress() && billingAddress.getCacheKey() == quote.shippingAddress().getCacheKey()) {
address = $.extend({}, billingAddress);
address.saveInAddressBook = null;
if(checkbox.prop( "checked" )) {
var billingName = jQuery('[name="billing_name"]').val();
var billingLastname = jQuery('[name="billing_lastname"]').val();
address.firstname = billingName;
address.lastname = billingLastname;
}
} else {
address = billingAddress;
if(checkbox.prop( "checked" )) {
var billingName = jQuery('[name="billing_name"]').val();
var billingLastname = jQuery('[name="billing_lastname"]').val();
address.firstname = billingName;
address.lastname = billingLastname;
}
}
quote.billingAddress(address);
};
}
);
I thought this might work but it behaves very strange sometimes, overriding shipping address or leaving empty blanks as said before.
To recapitulate, what would be the correct approach to persist this data into the billing address? (I'm guessing this is done through knockout bindings but i've failed to find them).
Thanks,
