Magento 2 : How to get DefaultBillingAddress using knockout?Installing magento from command line errorsThe requested Payment Method is not available When creating an orderHow to return a JSON object with a custom REST API in Magento 2?magento 2 get value of selected select box using knockout in custom moduleAddress format checkout page issue in Magento 2.2.3Questions about using knockoutFirstname error while creating new account in Magento 2
Looking for a plural noun related to ‘fulcrum’ or ‘pivot’ that denotes multiple things as crucial to success
What is this "opened" cube called?
Necessity of tenure for lifetime academic research
Notice period 60 days but I need to join in 45 days
Is it recommended to point out mistake by professor while lecture
Where does the last newline character come from in this sed's result?
Is there a word or phrase that means "use other people's wifi or Internet service without consent"?
Line Feed in monospace font - Macro
I feel cheated on by my new employer, does this sound right?
What is the sound/audio equivalent of "unsightly"?
Principal payments
STM32 cannot reach individual registers and pins as PIC
What is the following VRP?
Why doesn't Starship have four landing legs?
What happens after an Aboleth's body is remade in the Elemental Plane of Water following its death?
Why do IR remotes influence AM radios?
What is the difference between ?int $number and int $number = null?
What's the difference between a variable and a memory location?
Why does Sauron not permit his followers to use his name?
Normalized Malbolge to Malbolge translator
Don't look at what I did there
Why did Lucius make a deal out of Buckbeak hurting Draco but not about Draco being turned into a ferret?
Should I use the words "pyromancy" and "necromancy" even if they don't mean what people think they do?
What ways are there to "PEEK" memory sections in (different) BASIC(s)
Magento 2 : How to get DefaultBillingAddress using knockout?
Installing magento from command line errorsThe requested Payment Method is not available When creating an orderHow to return a JSON object with a custom REST API in Magento 2?magento 2 get value of selected select box using knockout in custom moduleAddress format checkout page issue in Magento 2.2.3Questions about using knockoutFirstname error while creating new account in Magento 2
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
In core using KO address is get like this in details.html file
<!-- ko text: currentBillingAddress().prefix --><!-- /ko --> <!-- ko text: currentBillingAddress().firstname --><!-- /ko --> <!-- ko text: currentBillingAddress().middlename --><!-- /ko -->
<!-- ko text: currentBillingAddress().lastname --><!-- /ko --> <!-- ko text: currentBillingAddress().suffix --><!-- /ko --><br/>
<!-- ko text: _.values(currentBillingAddress().street).join(", ") --><!-- /ko --><br/>
<!-- ko text: currentBillingAddress().city --><!-- /ko -->, <span data-bind="html: currentBillingAddress().region"></span> <!-- ko text: currentBillingAddress().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(currentBillingAddress().countryId) --><!-- /ko --><br/>
<!-- ko if: (currentBillingAddress().telephone) -->
This is currentbillingaddress but i want to get defaultbillingaddress in the same way this is, someone any idea
magento2 knockoutjs billing-address
add a comment |
In core using KO address is get like this in details.html file
<!-- ko text: currentBillingAddress().prefix --><!-- /ko --> <!-- ko text: currentBillingAddress().firstname --><!-- /ko --> <!-- ko text: currentBillingAddress().middlename --><!-- /ko -->
<!-- ko text: currentBillingAddress().lastname --><!-- /ko --> <!-- ko text: currentBillingAddress().suffix --><!-- /ko --><br/>
<!-- ko text: _.values(currentBillingAddress().street).join(", ") --><!-- /ko --><br/>
<!-- ko text: currentBillingAddress().city --><!-- /ko -->, <span data-bind="html: currentBillingAddress().region"></span> <!-- ko text: currentBillingAddress().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(currentBillingAddress().countryId) --><!-- /ko --><br/>
<!-- ko if: (currentBillingAddress().telephone) -->
This is currentbillingaddress but i want to get defaultbillingaddress in the same way this is, someone any idea
magento2 knockoutjs billing-address
add a comment |
In core using KO address is get like this in details.html file
<!-- ko text: currentBillingAddress().prefix --><!-- /ko --> <!-- ko text: currentBillingAddress().firstname --><!-- /ko --> <!-- ko text: currentBillingAddress().middlename --><!-- /ko -->
<!-- ko text: currentBillingAddress().lastname --><!-- /ko --> <!-- ko text: currentBillingAddress().suffix --><!-- /ko --><br/>
<!-- ko text: _.values(currentBillingAddress().street).join(", ") --><!-- /ko --><br/>
<!-- ko text: currentBillingAddress().city --><!-- /ko -->, <span data-bind="html: currentBillingAddress().region"></span> <!-- ko text: currentBillingAddress().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(currentBillingAddress().countryId) --><!-- /ko --><br/>
<!-- ko if: (currentBillingAddress().telephone) -->
This is currentbillingaddress but i want to get defaultbillingaddress in the same way this is, someone any idea
magento2 knockoutjs billing-address
In core using KO address is get like this in details.html file
<!-- ko text: currentBillingAddress().prefix --><!-- /ko --> <!-- ko text: currentBillingAddress().firstname --><!-- /ko --> <!-- ko text: currentBillingAddress().middlename --><!-- /ko -->
<!-- ko text: currentBillingAddress().lastname --><!-- /ko --> <!-- ko text: currentBillingAddress().suffix --><!-- /ko --><br/>
<!-- ko text: _.values(currentBillingAddress().street).join(", ") --><!-- /ko --><br/>
<!-- ko text: currentBillingAddress().city --><!-- /ko -->, <span data-bind="html: currentBillingAddress().region"></span> <!-- ko text: currentBillingAddress().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(currentBillingAddress().countryId) --><!-- /ko --><br/>
<!-- ko if: (currentBillingAddress().telephone) -->
This is currentbillingaddress but i want to get defaultbillingaddress in the same way this is, someone any idea
magento2 knockoutjs billing-address
magento2 knockoutjs billing-address
edited Aug 17 at 8:51
Sumit
8851 silver badge14 bronze badges
8851 silver badge14 bronze badges
asked Aug 17 at 6:36
Asad UllahAsad Ullah
44014 bronze badges
44014 bronze badges
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
UI component Magento_Checkout/js/view/billing-address
doesn't expose the defaultBillingAddress property to the html template, we need to create a new one for that.
Please see the screenshot and try the full code of the billing-address.js below:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'underscore',
'Magento_Ui/js/form/form',
'Magento_Customer/js/model/customer',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/create-billing-address',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/action/set-billing-address',
'Magento_Ui/js/model/messageList',
'mage/translate',
'Magento_Checkout/js/model/shipping-rates-validator'
],
function (
ko,
_,
Component,
customer,
addressList,
quote,
createBillingAddress,
selectBillingAddress,
checkoutData,
checkoutDataResolver,
customerData,
setBillingAddressAction,
globalMessageList,
$t,
shippingRatesValidator
)
'use strict';
var lastSelectedBillingAddress = null,
newAddressOption =
/**
* Get new address label
* @returns String
*/
getAddressInline: function ()
return $t('New Address');
,
customerAddressId: null
,
countryData = customerData.get('directory-data'),
addressOptions = addressList().filter(function (address)
return address.getType() == 'customer-address'; //eslint-disable-line eqeqeq
);
var defaultBillingAddresses = addressList().filter(function (address)
return address.getType() == 'customer-address' && address.isDefaultBilling();
);
addressOptions.push(newAddressOption);
return Component.extend(
defaults:
template: 'Magento_Checkout/billing-address'
,
currentBillingAddress: quote.billingAddress,
addressOptions: addressOptions,
customerHasAddresses: addressOptions.length > 1,
defaultBillingAddress: ko.observable(defaultBillingAddresses[0]),
/**
* Init component
*/
initialize: function ()
this._super();
quote.paymentMethod.subscribe(function ()
checkoutDataResolver.resolveBillingAddress();
, this);
shippingRatesValidator.initFields(this.get('name') + '.form-fields');
,
/**
* @return exports.initObservable
*/
initObservable: function ()
this._super()
.observe( addressOptions.length === 1,
isAddressSameAsShipping: false,
saveInAddressBook: 1
);
quote.billingAddress.subscribe(function (newAddress)
if (quote.isVirtual())
this.isAddressSameAsShipping(false);
else
this.isAddressSameAsShipping(
newAddress != null &&
newAddress.getCacheKey() == quote.shippingAddress().getCacheKey() //eslint-disable-line eqeqeq
);
if (newAddress != null && newAddress.saveInAddressBook !== undefined)
this.saveInAddressBook(newAddress.saveInAddressBook);
else
this.saveInAddressBook(1);
this.isAddressDetailsVisible(true);
, this);
return this;
,
canUseShippingAddress: ko.computed(function ()
return !quote.isVirtual() && quote.shippingAddress() && quote.shippingAddress().canUseForBilling();
),
/**
* @param Object address
* @return *
*/
addressOptionsText: function (address)
return address.getAddressInline();
,
/**
* @return Boolean
*/
useShippingAddress: function ()
if (this.isAddressSameAsShipping())
selectBillingAddress(quote.shippingAddress());
this.updateAddresses();
this.isAddressDetailsVisible(true);
else
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
checkoutData.setSelectedBillingAddress(null);
return true;
,
/**
* Update address action
*/
updateAddress: function ()
var addressData, newBillingAddress;
if (this.selectedAddress() && this.selectedAddress() != newAddressOption) //eslint-disable-line eqeqeq
selectBillingAddress(this.selectedAddress());
checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());
else
this.source.set('params.invalid', false);
this.source.trigger(this.dataScopePrefix + '.data.validate');
if (this.source.get(this.dataScopePrefix + '.custom_attributes'))
this.source.trigger(this.dataScopePrefix + '.custom_attributes.data.validate');
if (!this.source.get('params.invalid'))
addressData = this.source.get(this.dataScopePrefix);
if (customer.isLoggedIn() && !this.customerHasAddresses) //eslint-disable-line max-depth
this.saveInAddressBook(1);
addressData['save_in_address_book'] = this.saveInAddressBook() ? 1 : 0;
newBillingAddress = createBillingAddress(addressData);
// New address must be selected as a billing address
selectBillingAddress(newBillingAddress);
checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
checkoutData.setNewCustomerBillingAddress(addressData);
this.updateAddresses();
,
/**
* Edit address action
*/
editAddress: function ()
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
,
/**
* Cancel address edit action
*/
cancelAddressEdit: function ()
this.restoreBillingAddress();
if (quote.billingAddress())
// restore 'Same As Shipping' checkbox state
this.isAddressSameAsShipping(
quote.billingAddress() != null &&
quote.billingAddress().getCacheKey() == quote.shippingAddress().getCacheKey() && //eslint-disable-line
!quote.isVirtual()
);
this.isAddressDetailsVisible(true);
,
/**
* Restore billing address
*/
restoreBillingAddress: function ()
if (lastSelectedBillingAddress != null)
selectBillingAddress(lastSelectedBillingAddress);
,
/**
* @param Object address
*/
onAddressChange: function (address)
this.isAddressFormVisible(address == newAddressOption); //eslint-disable-line eqeqeq
,
/**
* @param Number countryId
* @return *
*/
getCountryName: function (countryId)
return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
,
/**
* Trigger action to update shipping and billing addresses
*/
updateAddresses: function ()
if (window.checkoutConfig.reloadOnBillingAddress ,
/**
* Get code
* @param Object parent
* @returns String
*/
getCode: function (parent)
return _.isFunction(parent.getCode) ? parent.getCode() : 'shared';
);
);*
After that, on the billing-address/details.html you can use defaultBillingAddress().firstname, defaultBillingAddress().lastname, etc
thanks man that helped alot
– Asad Ullah
Aug 17 at 8:46
add a comment |
I was messing around with plugins to pass additional customer info through to knockout. I think you could do this
Xml
https://github.com/DominicWatts/CustomerLogin/blob/master/etc/di.xml
Plugin
https://github.com/DominicWatts/CustomerLogin/blob/master/Plugin/Magento/Customer/CustomerData/Customer.php
Template phtml
https://github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/templates/index/index.phtml#L19-L24
i just need to over write this file that i already did it but don't know how to call DefaultBillingAddress method using KO
– Asad Ullah
Aug 17 at 7:10
See how I added to array github.com/DominicWatts/CustomerLogin/blob/master/Plugin/… and then checked for value in phtml github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/…
– Dominic Xigen
Aug 17 at 7:33
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f285673%2fmagento-2-how-to-get-defaultbillingaddress-using-knockout%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
UI component Magento_Checkout/js/view/billing-address
doesn't expose the defaultBillingAddress property to the html template, we need to create a new one for that.
Please see the screenshot and try the full code of the billing-address.js below:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'underscore',
'Magento_Ui/js/form/form',
'Magento_Customer/js/model/customer',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/create-billing-address',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/action/set-billing-address',
'Magento_Ui/js/model/messageList',
'mage/translate',
'Magento_Checkout/js/model/shipping-rates-validator'
],
function (
ko,
_,
Component,
customer,
addressList,
quote,
createBillingAddress,
selectBillingAddress,
checkoutData,
checkoutDataResolver,
customerData,
setBillingAddressAction,
globalMessageList,
$t,
shippingRatesValidator
)
'use strict';
var lastSelectedBillingAddress = null,
newAddressOption =
/**
* Get new address label
* @returns String
*/
getAddressInline: function ()
return $t('New Address');
,
customerAddressId: null
,
countryData = customerData.get('directory-data'),
addressOptions = addressList().filter(function (address)
return address.getType() == 'customer-address'; //eslint-disable-line eqeqeq
);
var defaultBillingAddresses = addressList().filter(function (address)
return address.getType() == 'customer-address' && address.isDefaultBilling();
);
addressOptions.push(newAddressOption);
return Component.extend(
defaults:
template: 'Magento_Checkout/billing-address'
,
currentBillingAddress: quote.billingAddress,
addressOptions: addressOptions,
customerHasAddresses: addressOptions.length > 1,
defaultBillingAddress: ko.observable(defaultBillingAddresses[0]),
/**
* Init component
*/
initialize: function ()
this._super();
quote.paymentMethod.subscribe(function ()
checkoutDataResolver.resolveBillingAddress();
, this);
shippingRatesValidator.initFields(this.get('name') + '.form-fields');
,
/**
* @return exports.initObservable
*/
initObservable: function ()
this._super()
.observe( addressOptions.length === 1,
isAddressSameAsShipping: false,
saveInAddressBook: 1
);
quote.billingAddress.subscribe(function (newAddress)
if (quote.isVirtual())
this.isAddressSameAsShipping(false);
else
this.isAddressSameAsShipping(
newAddress != null &&
newAddress.getCacheKey() == quote.shippingAddress().getCacheKey() //eslint-disable-line eqeqeq
);
if (newAddress != null && newAddress.saveInAddressBook !== undefined)
this.saveInAddressBook(newAddress.saveInAddressBook);
else
this.saveInAddressBook(1);
this.isAddressDetailsVisible(true);
, this);
return this;
,
canUseShippingAddress: ko.computed(function ()
return !quote.isVirtual() && quote.shippingAddress() && quote.shippingAddress().canUseForBilling();
),
/**
* @param Object address
* @return *
*/
addressOptionsText: function (address)
return address.getAddressInline();
,
/**
* @return Boolean
*/
useShippingAddress: function ()
if (this.isAddressSameAsShipping())
selectBillingAddress(quote.shippingAddress());
this.updateAddresses();
this.isAddressDetailsVisible(true);
else
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
checkoutData.setSelectedBillingAddress(null);
return true;
,
/**
* Update address action
*/
updateAddress: function ()
var addressData, newBillingAddress;
if (this.selectedAddress() && this.selectedAddress() != newAddressOption) //eslint-disable-line eqeqeq
selectBillingAddress(this.selectedAddress());
checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());
else
this.source.set('params.invalid', false);
this.source.trigger(this.dataScopePrefix + '.data.validate');
if (this.source.get(this.dataScopePrefix + '.custom_attributes'))
this.source.trigger(this.dataScopePrefix + '.custom_attributes.data.validate');
if (!this.source.get('params.invalid'))
addressData = this.source.get(this.dataScopePrefix);
if (customer.isLoggedIn() && !this.customerHasAddresses) //eslint-disable-line max-depth
this.saveInAddressBook(1);
addressData['save_in_address_book'] = this.saveInAddressBook() ? 1 : 0;
newBillingAddress = createBillingAddress(addressData);
// New address must be selected as a billing address
selectBillingAddress(newBillingAddress);
checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
checkoutData.setNewCustomerBillingAddress(addressData);
this.updateAddresses();
,
/**
* Edit address action
*/
editAddress: function ()
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
,
/**
* Cancel address edit action
*/
cancelAddressEdit: function ()
this.restoreBillingAddress();
if (quote.billingAddress())
// restore 'Same As Shipping' checkbox state
this.isAddressSameAsShipping(
quote.billingAddress() != null &&
quote.billingAddress().getCacheKey() == quote.shippingAddress().getCacheKey() && //eslint-disable-line
!quote.isVirtual()
);
this.isAddressDetailsVisible(true);
,
/**
* Restore billing address
*/
restoreBillingAddress: function ()
if (lastSelectedBillingAddress != null)
selectBillingAddress(lastSelectedBillingAddress);
,
/**
* @param Object address
*/
onAddressChange: function (address)
this.isAddressFormVisible(address == newAddressOption); //eslint-disable-line eqeqeq
,
/**
* @param Number countryId
* @return *
*/
getCountryName: function (countryId)
return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
,
/**
* Trigger action to update shipping and billing addresses
*/
updateAddresses: function ()
if (window.checkoutConfig.reloadOnBillingAddress ,
/**
* Get code
* @param Object parent
* @returns String
*/
getCode: function (parent)
return _.isFunction(parent.getCode) ? parent.getCode() : 'shared';
);
);*
After that, on the billing-address/details.html you can use defaultBillingAddress().firstname, defaultBillingAddress().lastname, etc
thanks man that helped alot
– Asad Ullah
Aug 17 at 8:46
add a comment |
UI component Magento_Checkout/js/view/billing-address
doesn't expose the defaultBillingAddress property to the html template, we need to create a new one for that.
Please see the screenshot and try the full code of the billing-address.js below:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'underscore',
'Magento_Ui/js/form/form',
'Magento_Customer/js/model/customer',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/create-billing-address',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/action/set-billing-address',
'Magento_Ui/js/model/messageList',
'mage/translate',
'Magento_Checkout/js/model/shipping-rates-validator'
],
function (
ko,
_,
Component,
customer,
addressList,
quote,
createBillingAddress,
selectBillingAddress,
checkoutData,
checkoutDataResolver,
customerData,
setBillingAddressAction,
globalMessageList,
$t,
shippingRatesValidator
)
'use strict';
var lastSelectedBillingAddress = null,
newAddressOption =
/**
* Get new address label
* @returns String
*/
getAddressInline: function ()
return $t('New Address');
,
customerAddressId: null
,
countryData = customerData.get('directory-data'),
addressOptions = addressList().filter(function (address)
return address.getType() == 'customer-address'; //eslint-disable-line eqeqeq
);
var defaultBillingAddresses = addressList().filter(function (address)
return address.getType() == 'customer-address' && address.isDefaultBilling();
);
addressOptions.push(newAddressOption);
return Component.extend(
defaults:
template: 'Magento_Checkout/billing-address'
,
currentBillingAddress: quote.billingAddress,
addressOptions: addressOptions,
customerHasAddresses: addressOptions.length > 1,
defaultBillingAddress: ko.observable(defaultBillingAddresses[0]),
/**
* Init component
*/
initialize: function ()
this._super();
quote.paymentMethod.subscribe(function ()
checkoutDataResolver.resolveBillingAddress();
, this);
shippingRatesValidator.initFields(this.get('name') + '.form-fields');
,
/**
* @return exports.initObservable
*/
initObservable: function ()
this._super()
.observe( addressOptions.length === 1,
isAddressSameAsShipping: false,
saveInAddressBook: 1
);
quote.billingAddress.subscribe(function (newAddress)
if (quote.isVirtual())
this.isAddressSameAsShipping(false);
else
this.isAddressSameAsShipping(
newAddress != null &&
newAddress.getCacheKey() == quote.shippingAddress().getCacheKey() //eslint-disable-line eqeqeq
);
if (newAddress != null && newAddress.saveInAddressBook !== undefined)
this.saveInAddressBook(newAddress.saveInAddressBook);
else
this.saveInAddressBook(1);
this.isAddressDetailsVisible(true);
, this);
return this;
,
canUseShippingAddress: ko.computed(function ()
return !quote.isVirtual() && quote.shippingAddress() && quote.shippingAddress().canUseForBilling();
),
/**
* @param Object address
* @return *
*/
addressOptionsText: function (address)
return address.getAddressInline();
,
/**
* @return Boolean
*/
useShippingAddress: function ()
if (this.isAddressSameAsShipping())
selectBillingAddress(quote.shippingAddress());
this.updateAddresses();
this.isAddressDetailsVisible(true);
else
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
checkoutData.setSelectedBillingAddress(null);
return true;
,
/**
* Update address action
*/
updateAddress: function ()
var addressData, newBillingAddress;
if (this.selectedAddress() && this.selectedAddress() != newAddressOption) //eslint-disable-line eqeqeq
selectBillingAddress(this.selectedAddress());
checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());
else
this.source.set('params.invalid', false);
this.source.trigger(this.dataScopePrefix + '.data.validate');
if (this.source.get(this.dataScopePrefix + '.custom_attributes'))
this.source.trigger(this.dataScopePrefix + '.custom_attributes.data.validate');
if (!this.source.get('params.invalid'))
addressData = this.source.get(this.dataScopePrefix);
if (customer.isLoggedIn() && !this.customerHasAddresses) //eslint-disable-line max-depth
this.saveInAddressBook(1);
addressData['save_in_address_book'] = this.saveInAddressBook() ? 1 : 0;
newBillingAddress = createBillingAddress(addressData);
// New address must be selected as a billing address
selectBillingAddress(newBillingAddress);
checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
checkoutData.setNewCustomerBillingAddress(addressData);
this.updateAddresses();
,
/**
* Edit address action
*/
editAddress: function ()
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
,
/**
* Cancel address edit action
*/
cancelAddressEdit: function ()
this.restoreBillingAddress();
if (quote.billingAddress())
// restore 'Same As Shipping' checkbox state
this.isAddressSameAsShipping(
quote.billingAddress() != null &&
quote.billingAddress().getCacheKey() == quote.shippingAddress().getCacheKey() && //eslint-disable-line
!quote.isVirtual()
);
this.isAddressDetailsVisible(true);
,
/**
* Restore billing address
*/
restoreBillingAddress: function ()
if (lastSelectedBillingAddress != null)
selectBillingAddress(lastSelectedBillingAddress);
,
/**
* @param Object address
*/
onAddressChange: function (address)
this.isAddressFormVisible(address == newAddressOption); //eslint-disable-line eqeqeq
,
/**
* @param Number countryId
* @return *
*/
getCountryName: function (countryId)
return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
,
/**
* Trigger action to update shipping and billing addresses
*/
updateAddresses: function ()
if (window.checkoutConfig.reloadOnBillingAddress ,
/**
* Get code
* @param Object parent
* @returns String
*/
getCode: function (parent)
return _.isFunction(parent.getCode) ? parent.getCode() : 'shared';
);
);*
After that, on the billing-address/details.html you can use defaultBillingAddress().firstname, defaultBillingAddress().lastname, etc
thanks man that helped alot
– Asad Ullah
Aug 17 at 8:46
add a comment |
UI component Magento_Checkout/js/view/billing-address
doesn't expose the defaultBillingAddress property to the html template, we need to create a new one for that.
Please see the screenshot and try the full code of the billing-address.js below:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'underscore',
'Magento_Ui/js/form/form',
'Magento_Customer/js/model/customer',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/create-billing-address',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/action/set-billing-address',
'Magento_Ui/js/model/messageList',
'mage/translate',
'Magento_Checkout/js/model/shipping-rates-validator'
],
function (
ko,
_,
Component,
customer,
addressList,
quote,
createBillingAddress,
selectBillingAddress,
checkoutData,
checkoutDataResolver,
customerData,
setBillingAddressAction,
globalMessageList,
$t,
shippingRatesValidator
)
'use strict';
var lastSelectedBillingAddress = null,
newAddressOption =
/**
* Get new address label
* @returns String
*/
getAddressInline: function ()
return $t('New Address');
,
customerAddressId: null
,
countryData = customerData.get('directory-data'),
addressOptions = addressList().filter(function (address)
return address.getType() == 'customer-address'; //eslint-disable-line eqeqeq
);
var defaultBillingAddresses = addressList().filter(function (address)
return address.getType() == 'customer-address' && address.isDefaultBilling();
);
addressOptions.push(newAddressOption);
return Component.extend(
defaults:
template: 'Magento_Checkout/billing-address'
,
currentBillingAddress: quote.billingAddress,
addressOptions: addressOptions,
customerHasAddresses: addressOptions.length > 1,
defaultBillingAddress: ko.observable(defaultBillingAddresses[0]),
/**
* Init component
*/
initialize: function ()
this._super();
quote.paymentMethod.subscribe(function ()
checkoutDataResolver.resolveBillingAddress();
, this);
shippingRatesValidator.initFields(this.get('name') + '.form-fields');
,
/**
* @return exports.initObservable
*/
initObservable: function ()
this._super()
.observe( addressOptions.length === 1,
isAddressSameAsShipping: false,
saveInAddressBook: 1
);
quote.billingAddress.subscribe(function (newAddress)
if (quote.isVirtual())
this.isAddressSameAsShipping(false);
else
this.isAddressSameAsShipping(
newAddress != null &&
newAddress.getCacheKey() == quote.shippingAddress().getCacheKey() //eslint-disable-line eqeqeq
);
if (newAddress != null && newAddress.saveInAddressBook !== undefined)
this.saveInAddressBook(newAddress.saveInAddressBook);
else
this.saveInAddressBook(1);
this.isAddressDetailsVisible(true);
, this);
return this;
,
canUseShippingAddress: ko.computed(function ()
return !quote.isVirtual() && quote.shippingAddress() && quote.shippingAddress().canUseForBilling();
),
/**
* @param Object address
* @return *
*/
addressOptionsText: function (address)
return address.getAddressInline();
,
/**
* @return Boolean
*/
useShippingAddress: function ()
if (this.isAddressSameAsShipping())
selectBillingAddress(quote.shippingAddress());
this.updateAddresses();
this.isAddressDetailsVisible(true);
else
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
checkoutData.setSelectedBillingAddress(null);
return true;
,
/**
* Update address action
*/
updateAddress: function ()
var addressData, newBillingAddress;
if (this.selectedAddress() && this.selectedAddress() != newAddressOption) //eslint-disable-line eqeqeq
selectBillingAddress(this.selectedAddress());
checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());
else
this.source.set('params.invalid', false);
this.source.trigger(this.dataScopePrefix + '.data.validate');
if (this.source.get(this.dataScopePrefix + '.custom_attributes'))
this.source.trigger(this.dataScopePrefix + '.custom_attributes.data.validate');
if (!this.source.get('params.invalid'))
addressData = this.source.get(this.dataScopePrefix);
if (customer.isLoggedIn() && !this.customerHasAddresses) //eslint-disable-line max-depth
this.saveInAddressBook(1);
addressData['save_in_address_book'] = this.saveInAddressBook() ? 1 : 0;
newBillingAddress = createBillingAddress(addressData);
// New address must be selected as a billing address
selectBillingAddress(newBillingAddress);
checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
checkoutData.setNewCustomerBillingAddress(addressData);
this.updateAddresses();
,
/**
* Edit address action
*/
editAddress: function ()
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
,
/**
* Cancel address edit action
*/
cancelAddressEdit: function ()
this.restoreBillingAddress();
if (quote.billingAddress())
// restore 'Same As Shipping' checkbox state
this.isAddressSameAsShipping(
quote.billingAddress() != null &&
quote.billingAddress().getCacheKey() == quote.shippingAddress().getCacheKey() && //eslint-disable-line
!quote.isVirtual()
);
this.isAddressDetailsVisible(true);
,
/**
* Restore billing address
*/
restoreBillingAddress: function ()
if (lastSelectedBillingAddress != null)
selectBillingAddress(lastSelectedBillingAddress);
,
/**
* @param Object address
*/
onAddressChange: function (address)
this.isAddressFormVisible(address == newAddressOption); //eslint-disable-line eqeqeq
,
/**
* @param Number countryId
* @return *
*/
getCountryName: function (countryId)
return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
,
/**
* Trigger action to update shipping and billing addresses
*/
updateAddresses: function ()
if (window.checkoutConfig.reloadOnBillingAddress ,
/**
* Get code
* @param Object parent
* @returns String
*/
getCode: function (parent)
return _.isFunction(parent.getCode) ? parent.getCode() : 'shared';
);
);*
After that, on the billing-address/details.html you can use defaultBillingAddress().firstname, defaultBillingAddress().lastname, etc
UI component Magento_Checkout/js/view/billing-address
doesn't expose the defaultBillingAddress property to the html template, we need to create a new one for that.
Please see the screenshot and try the full code of the billing-address.js below:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'underscore',
'Magento_Ui/js/form/form',
'Magento_Customer/js/model/customer',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/create-billing-address',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/action/set-billing-address',
'Magento_Ui/js/model/messageList',
'mage/translate',
'Magento_Checkout/js/model/shipping-rates-validator'
],
function (
ko,
_,
Component,
customer,
addressList,
quote,
createBillingAddress,
selectBillingAddress,
checkoutData,
checkoutDataResolver,
customerData,
setBillingAddressAction,
globalMessageList,
$t,
shippingRatesValidator
)
'use strict';
var lastSelectedBillingAddress = null,
newAddressOption =
/**
* Get new address label
* @returns String
*/
getAddressInline: function ()
return $t('New Address');
,
customerAddressId: null
,
countryData = customerData.get('directory-data'),
addressOptions = addressList().filter(function (address)
return address.getType() == 'customer-address'; //eslint-disable-line eqeqeq
);
var defaultBillingAddresses = addressList().filter(function (address)
return address.getType() == 'customer-address' && address.isDefaultBilling();
);
addressOptions.push(newAddressOption);
return Component.extend(
defaults:
template: 'Magento_Checkout/billing-address'
,
currentBillingAddress: quote.billingAddress,
addressOptions: addressOptions,
customerHasAddresses: addressOptions.length > 1,
defaultBillingAddress: ko.observable(defaultBillingAddresses[0]),
/**
* Init component
*/
initialize: function ()
this._super();
quote.paymentMethod.subscribe(function ()
checkoutDataResolver.resolveBillingAddress();
, this);
shippingRatesValidator.initFields(this.get('name') + '.form-fields');
,
/**
* @return exports.initObservable
*/
initObservable: function ()
this._super()
.observe( addressOptions.length === 1,
isAddressSameAsShipping: false,
saveInAddressBook: 1
);
quote.billingAddress.subscribe(function (newAddress)
if (quote.isVirtual())
this.isAddressSameAsShipping(false);
else
this.isAddressSameAsShipping(
newAddress != null &&
newAddress.getCacheKey() == quote.shippingAddress().getCacheKey() //eslint-disable-line eqeqeq
);
if (newAddress != null && newAddress.saveInAddressBook !== undefined)
this.saveInAddressBook(newAddress.saveInAddressBook);
else
this.saveInAddressBook(1);
this.isAddressDetailsVisible(true);
, this);
return this;
,
canUseShippingAddress: ko.computed(function ()
return !quote.isVirtual() && quote.shippingAddress() && quote.shippingAddress().canUseForBilling();
),
/**
* @param Object address
* @return *
*/
addressOptionsText: function (address)
return address.getAddressInline();
,
/**
* @return Boolean
*/
useShippingAddress: function ()
if (this.isAddressSameAsShipping())
selectBillingAddress(quote.shippingAddress());
this.updateAddresses();
this.isAddressDetailsVisible(true);
else
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
checkoutData.setSelectedBillingAddress(null);
return true;
,
/**
* Update address action
*/
updateAddress: function ()
var addressData, newBillingAddress;
if (this.selectedAddress() && this.selectedAddress() != newAddressOption) //eslint-disable-line eqeqeq
selectBillingAddress(this.selectedAddress());
checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());
else
this.source.set('params.invalid', false);
this.source.trigger(this.dataScopePrefix + '.data.validate');
if (this.source.get(this.dataScopePrefix + '.custom_attributes'))
this.source.trigger(this.dataScopePrefix + '.custom_attributes.data.validate');
if (!this.source.get('params.invalid'))
addressData = this.source.get(this.dataScopePrefix);
if (customer.isLoggedIn() && !this.customerHasAddresses) //eslint-disable-line max-depth
this.saveInAddressBook(1);
addressData['save_in_address_book'] = this.saveInAddressBook() ? 1 : 0;
newBillingAddress = createBillingAddress(addressData);
// New address must be selected as a billing address
selectBillingAddress(newBillingAddress);
checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
checkoutData.setNewCustomerBillingAddress(addressData);
this.updateAddresses();
,
/**
* Edit address action
*/
editAddress: function ()
lastSelectedBillingAddress = quote.billingAddress();
quote.billingAddress(null);
this.isAddressDetailsVisible(false);
,
/**
* Cancel address edit action
*/
cancelAddressEdit: function ()
this.restoreBillingAddress();
if (quote.billingAddress())
// restore 'Same As Shipping' checkbox state
this.isAddressSameAsShipping(
quote.billingAddress() != null &&
quote.billingAddress().getCacheKey() == quote.shippingAddress().getCacheKey() && //eslint-disable-line
!quote.isVirtual()
);
this.isAddressDetailsVisible(true);
,
/**
* Restore billing address
*/
restoreBillingAddress: function ()
if (lastSelectedBillingAddress != null)
selectBillingAddress(lastSelectedBillingAddress);
,
/**
* @param Object address
*/
onAddressChange: function (address)
this.isAddressFormVisible(address == newAddressOption); //eslint-disable-line eqeqeq
,
/**
* @param Number countryId
* @return *
*/
getCountryName: function (countryId)
return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
,
/**
* Trigger action to update shipping and billing addresses
*/
updateAddresses: function ()
if (window.checkoutConfig.reloadOnBillingAddress ,
/**
* Get code
* @param Object parent
* @returns String
*/
getCode: function (parent)
return _.isFunction(parent.getCode) ? parent.getCode() : 'shared';
);
);*
After that, on the billing-address/details.html you can use defaultBillingAddress().firstname, defaultBillingAddress().lastname, etc
edited Aug 17 at 8:00
answered Aug 17 at 7:54
Toan TamToan Tam
6494 silver badges17 bronze badges
6494 silver badges17 bronze badges
thanks man that helped alot
– Asad Ullah
Aug 17 at 8:46
add a comment |
thanks man that helped alot
– Asad Ullah
Aug 17 at 8:46
thanks man that helped alot
– Asad Ullah
Aug 17 at 8:46
thanks man that helped alot
– Asad Ullah
Aug 17 at 8:46
add a comment |
I was messing around with plugins to pass additional customer info through to knockout. I think you could do this
Xml
https://github.com/DominicWatts/CustomerLogin/blob/master/etc/di.xml
Plugin
https://github.com/DominicWatts/CustomerLogin/blob/master/Plugin/Magento/Customer/CustomerData/Customer.php
Template phtml
https://github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/templates/index/index.phtml#L19-L24
i just need to over write this file that i already did it but don't know how to call DefaultBillingAddress method using KO
– Asad Ullah
Aug 17 at 7:10
See how I added to array github.com/DominicWatts/CustomerLogin/blob/master/Plugin/… and then checked for value in phtml github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/…
– Dominic Xigen
Aug 17 at 7:33
add a comment |
I was messing around with plugins to pass additional customer info through to knockout. I think you could do this
Xml
https://github.com/DominicWatts/CustomerLogin/blob/master/etc/di.xml
Plugin
https://github.com/DominicWatts/CustomerLogin/blob/master/Plugin/Magento/Customer/CustomerData/Customer.php
Template phtml
https://github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/templates/index/index.phtml#L19-L24
i just need to over write this file that i already did it but don't know how to call DefaultBillingAddress method using KO
– Asad Ullah
Aug 17 at 7:10
See how I added to array github.com/DominicWatts/CustomerLogin/blob/master/Plugin/… and then checked for value in phtml github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/…
– Dominic Xigen
Aug 17 at 7:33
add a comment |
I was messing around with plugins to pass additional customer info through to knockout. I think you could do this
Xml
https://github.com/DominicWatts/CustomerLogin/blob/master/etc/di.xml
Plugin
https://github.com/DominicWatts/CustomerLogin/blob/master/Plugin/Magento/Customer/CustomerData/Customer.php
Template phtml
https://github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/templates/index/index.phtml#L19-L24
I was messing around with plugins to pass additional customer info through to knockout. I think you could do this
Xml
https://github.com/DominicWatts/CustomerLogin/blob/master/etc/di.xml
Plugin
https://github.com/DominicWatts/CustomerLogin/blob/master/Plugin/Magento/Customer/CustomerData/Customer.php
Template phtml
https://github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/templates/index/index.phtml#L19-L24
answered Aug 17 at 7:03
Dominic XigenDominic Xigen
3,3482 gold badges5 silver badges18 bronze badges
3,3482 gold badges5 silver badges18 bronze badges
i just need to over write this file that i already did it but don't know how to call DefaultBillingAddress method using KO
– Asad Ullah
Aug 17 at 7:10
See how I added to array github.com/DominicWatts/CustomerLogin/blob/master/Plugin/… and then checked for value in phtml github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/…
– Dominic Xigen
Aug 17 at 7:33
add a comment |
i just need to over write this file that i already did it but don't know how to call DefaultBillingAddress method using KO
– Asad Ullah
Aug 17 at 7:10
See how I added to array github.com/DominicWatts/CustomerLogin/blob/master/Plugin/… and then checked for value in phtml github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/…
– Dominic Xigen
Aug 17 at 7:33
i just need to over write this file that i already did it but don't know how to call DefaultBillingAddress method using KO
– Asad Ullah
Aug 17 at 7:10
i just need to over write this file that i already did it but don't know how to call DefaultBillingAddress method using KO
– Asad Ullah
Aug 17 at 7:10
See how I added to array github.com/DominicWatts/CustomerLogin/blob/master/Plugin/… and then checked for value in phtml github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/…
– Dominic Xigen
Aug 17 at 7:33
See how I added to array github.com/DominicWatts/CustomerLogin/blob/master/Plugin/… and then checked for value in phtml github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/…
– Dominic Xigen
Aug 17 at 7:33
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f285673%2fmagento-2-how-to-get-defaultbillingaddress-using-knockout%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown