I promise to give someone 50 bounty points if you are able to help me resolve this. (I wills start a bounty when the system allows me to and give the reward then)
Magento 2.4.2-p1 Amasty extensions Smartwave Porto theme
I have a gift shop. All of our customers always order gifts for someone else so it will always be the case that the Shipping address will be different from the Billing address.
I tried to follow (the same) steps in these 2 articles:
I followed all the steps of the 'Magento best practices way'. I did not have some of the subdirectories, so I created them. Afterwards, I ran the following:
rm -rf pub/static/frontend
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento indexer:reindex
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
I also deleted all browser Cache but the 'My billing and shipping address are the same' option continues to be ticked (checked) by default. What changes do I need to make in order for this to work?
UPDATED on November 18th, 2022:
I have now done it both ways (Magento best practices way and the 'Dirty way') and it still does not work for me (the 'My billing and shipping address are the same' option remains ticked.
Here are my steps:
- Magento best practices way.
2. /public_html/app/code/Vendor/Module/view/frontend
I've put the requirejs-config.js file with the following content:
var config = {
map: {
'*': {
'Magento_Checkout/js/model/checkout-data-resolver': 'Vendor_Module/js/checkout-data-resolver',
'Magento_Checkout/js/model/shipping-save-processor/default': 'Vendor_Module/js/shipping-save-processor/default'
}
}};
3. I copied the file.
4. /public_html/app/code/Vendor/Module/view/frontend/web/js
has
requirejs-config.js with the following content:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* Checkout adapter for customer data storage
*/
define([
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/action/create-shipping-address',
'Magento_Checkout/js/action/select-shipping-address',
'Magento_Checkout/js/action/select-shipping-method',
'Magento_Checkout/js/model/payment-service',
'Magento_Checkout/js/action/select-payment-method',
'Magento_Checkout/js/model/address-converter',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/action/create-billing-address',
'underscore'
], function (
addressList,
quote,
checkoutData,
createShippingAddress,
selectShippingAddress,
selectShippingMethodAction,
paymentService,
selectPaymentMethodAction,
addressConverter,
selectBillingAddress,
createBillingAddress,
_
) {
'use strict';
return {
/**
* Resolve estimation address. Used local storage
*/
resolveEstimationAddress: function () {
var address;
if (checkoutData.getShippingAddressFromData()) {
address = addressConverter.formAddressDataToQuoteAddress(checkoutData.getShippingAddressFromData());
selectShippingAddress(address);
} else {
this.resolveShippingAddress();
}
if (quote.isVirtual()) {
if (checkoutData.getBillingAddressFromData()) {
address = addressConverter.formAddressDataToQuoteAddress(
checkoutData.getBillingAddressFromData()
);
selectBillingAddress(address);
} else {
this.resolveBillingAddress();
}
}
},
/**
* Resolve shipping address. Used local storage
*/
resolveShippingAddress: function () {
var newCustomerShippingAddress;
if (!checkoutData.getShippingAddressFromData() &&
window.checkoutConfig.shippingAddressFromData
) {
checkoutData.setShippingAddressFromData(window.checkoutConfig.shippingAddressFromData);
}
newCustomerShippingAddress = checkoutData.getNewCustomerShippingAddress();
if (newCustomerShippingAddress) {
createShippingAddress(newCustomerShippingAddress);
}
this.applyShippingAddress();
},
/**
* Apply resolved estimated address to quote
*
* @param {Object} isEstimatedAddress
*/
applyShippingAddress: function (isEstimatedAddress) {
var address,
shippingAddress,
isConvertAddress,
addressData,
isShippingAddressInitialized;
if (addressList().length === 0) {
address = addressConverter.formAddressDataToQuoteAddress(
checkoutData.getShippingAddressFromData()
);
selectShippingAddress(address);
}
shippingAddress = quote.shippingAddress();
isConvertAddress = isEstimatedAddress || false;
if (!shippingAddress) {
isShippingAddressInitialized = addressList.some(function (addressFromList) {
if (checkoutData.getSelectedShippingAddress() == addressFromList.getKey()) { //eslint-disable-line
addressData = isConvertAddress ?
addressConverter.addressToEstimationAddress(addressFromList)
: addressFromList;
selectShippingAddress(addressData);
return true;
}
return false;
});
if (!isShippingAddressInitialized) {
isShippingAddressInitialized = addressList.some(function (addrs) {
if (addrs.isDefaultShipping()) {
addressData = isConvertAddress ?
addressConverter.addressToEstimationAddress(addrs)
: addrs;
selectShippingAddress(addressData);
return true;
}
return false;
});
}
if (!isShippingAddressInitialized && addressList().length === 1) {
addressData = isConvertAddress ?
addressConverter.addressToEstimationAddress(addressList()[0])
: addressList()[0];
selectShippingAddress(addressData);
}
}
},
/**
* @param {Object} ratesData
*/
resolveShippingRates: function (ratesData) {
var selectedShippingRate = checkoutData.getSelectedShippingRate(),
availableRate = false;
if (ratesData.length === 1 && !quote.shippingMethod()) {
//set shipping rate if we have only one available shipping rate
selectShippingMethodAction(ratesData[0]);
return;
}
if (quote.shippingMethod()) {
availableRate = _.find(ratesData, function (rate) {
return rate['carrier_code'] == quote.shippingMethod()['carrier_code'] && //eslint-disable-line
rate['method_code'] == quote.shippingMethod()['method_code']; //eslint-disable-line eqeqeq
});
}
if (!availableRate && selectedShippingRate) {
availableRate = _.find(ratesData, function (rate) {
return rate['carrier_code'] + '_' + rate['method_code'] === selectedShippingRate;
});
}
if (!availableRate && window.checkoutConfig.selectedShippingMethod) {
availableRate = _.find(ratesData, function (rate) {
var selectedShippingMethod = window.checkoutConfig.selectedShippingMethod;
return rate['carrier_code'] == selectedShippingMethod['carrier_code'] && //eslint-disable-line
rate['method_code'] == selectedShippingMethod['method_code']; //eslint-disable-line eqeqeq
});
}
//Unset selected shipping method if not available
if (!availableRate) {
selectShippingMethodAction(null);
} else {
selectShippingMethodAction(availableRate);
}
},
/**
* Resolve payment method. Used local storage
*/
resolvePaymentMethod: function () {
var availablePaymentMethods = paymentService.getAvailablePaymentMethods(),
selectedPaymentMethod = checkoutData.getSelectedPaymentMethod();
if (selectedPaymentMethod) {
availablePaymentMethods.some(function (payment) {
if (payment.method == selectedPaymentMethod) { //eslint-disable-line eqeqeq
selectPaymentMethodAction(payment);
}
});
}
},
/**
* Resolve billing address. Used local storage
*/
resolveBillingAddress: function () {
var selectedBillingAddress,
newCustomerBillingAddressData;
if (!checkoutData.getBillingAddressFromData() &&
window.checkoutConfig.billingAddressFromData
) {
checkoutData.setBillingAddressFromData(window.checkoutConfig.billingAddressFromData);
}
selectedBillingAddress = checkoutData.getSelectedBillingAddress();
newCustomerBillingAddressData = checkoutData.getNewCustomerBillingAddress();
if (selectedBillingAddress) {
if (selectedBillingAddress === 'new-customer-billing-address' && newCustomerBillingAddressData) {
selectBillingAddress(createBillingAddress(newCustomerBillingAddressData));
} else {
addressList.some(function (address) {
if (selectedBillingAddress === address.getKey()) {
selectBillingAddress(address);
}
});
}
} else {
this.applyBillingAddress();
}
},
/**
* Apply resolved billing address to quote
*/
applyBillingAddress: function () {
var shippingAddress,
isBillingAddressInitialized;
if (quote.billingAddress()) {
selectBillingAddress(quote.billingAddress());
return;
}
if (quote.isVirtual() || !quote.billingAddress()) {
isBillingAddressInitialized = addressList.some(function (addrs) {
if (addrs.isDefaultBilling()) {
selectBillingAddress(addrs);
return true;
}
return false;
});
}
shippingAddress = quote.shippingAddress();
/* if (!isBillingAddressInitialized &&
shippingAddress &&
shippingAddress.canUseForBilling() &&
(shippingAddress.isDefaultShipping() || !quote.isVirtual())
) {
//set billing address same as shipping by default if it is not empty
selectBillingAddress(quote.shippingAddress());
} */
}
};
});
**5.** Copied the file as instructed.
**6.** In:
/public_html/app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor
I have the default.js file with the following content:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/payment-service',
'Magento_Checkout/js/model/payment/method-converter',
'Magento_Checkout/js/model/error-processor',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
ko,
quote,
resourceUrlManager,
storage,
paymentService,
methodConverter,
errorProcessor,
fullScreenLoader,
selectBillingAddressAction,
payloadExtender
) {
'use strict';
return {
/**
* @return {jQuery.Deferred}
*/
saveShippingInformation: function () {
var payload;
/* if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
selectBillingAddressAction(quote.shippingAddress());
} */
payload = {
addressInformation: {
'shipping_address': quote.shippingAddress(),
'billing_address': quote.billingAddress(),
'shipping_method_code': quote.shippingMethod()['method_code'],
'shipping_carrier_code': quote.shippingMethod()['carrier_code']
}
};
payloadExtender(payload);
fullScreenLoader.startLoader();
return storage.post(
resourceUrlManager.getUrlForSetShippingInformation(quote),
JSON.stringify(payload)
).done(
function (response) {
quote.setTotals(response.totals);
paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
fullScreenLoader.stopLoader();
}
).fail(
function (response) {
errorProcessor.process(response);
fullScreenLoader.stopLoader();
}
);
}
};
});
Copied the file.
In:
/public_html/app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor
I have the default.js with the following content:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/payment-service',
'Magento_Checkout/js/model/payment/method-converter',
'Magento_Checkout/js/model/error-processor',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
ko,
quote,
resourceUrlManager,
storage,
paymentService,
methodConverter,
errorProcessor,
fullScreenLoader,
selectBillingAddressAction,
payloadExtender
) {
'use strict';
return {
/**
* @return {jQuery.Deferred}
*/
saveShippingInformation: function () {
var payload;
/* if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
selectBillingAddressAction(quote.shippingAddress());
} */
payload = {
addressInformation: {
'shipping_address': quote.shippingAddress(),
'billing_address': quote.billingAddress(),
'shipping_method_code': quote.shippingMethod()['method_code'],
'shipping_carrier_code': quote.shippingMethod()['carrier_code']
}
};
payloadExtender(payload);
fullScreenLoader.startLoader();
return storage.post(
resourceUrlManager.getUrlForSetShippingInformation(quote),
JSON.stringify(payload)
).done(
function (response) {
quote.setTotals(response.totals);
paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
fullScreenLoader.stopLoader();
}
).fail(
function (response) {
errorProcessor.process(response);
fullScreenLoader.stopLoader();
}
);
}
};
});
- I ran:
rm -rf pub/static/frontend
in my public_html (Magento root).
- I have also done the following:
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento indexer:reindex
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
I deleted browser Cache but the option remains ticked!
- The Dirty way:
In:
/public_html/vendor/magento/module-checkout/view/frontend/web/js/model
I have the 'checkout-data-resolver.js' file with the following content = it won't let me post the whole file due to limit of 30000 characters so here is just the part I edited at the very end:
if (quote.isVirtual() || !quote.billingAddress()) {
isBillingAddressInitialized = addressList.some(function (addrs) {
if (addrs.isDefaultBilling()) {
selectBillingAddress(addrs);
return true;
}
return false;
});
}
shippingAddress = quote.shippingAddress();
/* if (!isBillingAddressInitialized &&
shippingAddress &&
shippingAddress.canUseForBilling() &&
(shippingAddress.isDefaultShipping() || !quote.isVirtual())
) {
//set billing address same as shipping by default if it is not empty
selectBillingAddress(quote.shippingAddress());
} */
}
};
});
I edited default.js
in:
/public_html/vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/payment-service',
'Magento_Checkout/js/model/payment/method-converter',
'Magento_Checkout/js/model/error-processor',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
ko,
quote,
resourceUrlManager,
storage,
paymentService,
methodConverter,
errorProcessor,
fullScreenLoader,
selectBillingAddressAction,
payloadExtender
) {
'use strict';
return {
/**
* @return {jQuery.Deferred}
*/
saveShippingInformation: function () {
var payload;
/* if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
selectBillingAddressAction(quote.shippingAddress());
} */
payload = {
addressInformation: {
'shipping_address': quote.shippingAddress(),
'billing_address': quote.billingAddress(),
'shipping_method_code': quote.shippingMethod()['method_code'],
'shipping_carrier_code': quote.shippingMethod()['carrier_code']
}
};
payloadExtender(payload);
fullScreenLoader.startLoader();
return storage.post(
resourceUrlManager.getUrlForSetShippingInformation(quote),
JSON.stringify(payload)
).done(
function (response) {
quote.setTotals(response.totals);
paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
fullScreenLoader.stopLoader();
}
).fail(
function (response) {
errorProcessor.process(response);
fullScreenLoader.stopLoader();
}
);
}
};
});
I repeated steps 7, 8 and 9.
It still does not work.
I have reverted back both the 'Magento best practices way' and 'Dirty way' from:
As recommended by Tu Van.
I then followed all the steps outlined by Tu Van in his proposed solution with the exception of the bit in Step #3 which says:
Step 3: Create the requirejs-config.js file (remember to change Vendor_Module and Vendor/Module to matching your module).
I am not sure how to do that? (I just put the code from Step3 in the specified directory the way it was)
The solution did not work so I have gone through the additional debugging steps:
Step 2.1: Am I suppose to be looking in the Review & Payments step of the Check-out? (this is where the Card payment and the My billing and 'shipping address are the same' are). My Magento version is 2.4.2-p1 - I have the checkout-data-resolver.js file but not the checkout-data-resolver-ext.js.
When I double click the file, it shows the following URL:
Here is the content of the checkout-data-resolver.js file:
https://pastecode.io/s/1xtsex1s
STEP 2.2: Yes - the result contains only 1 JS file. When I double clicked on it - it shows the following URL:
It has the following content:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/payment-service',
'Magento_Checkout/js/model/payment/method-converter',
'Magento_Checkout/js/model/error-processor',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/select-billing-address',
'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
ko,
quote,
resourceUrlManager,
storage,
paymentService,
methodConverter,
errorProcessor,
fullScreenLoader,
selectBillingAddressAction,
payloadExtender
) {
'use strict';
return {
/**
* @return {jQuery.Deferred}
*/
saveShippingInformation: function () {
var payload;
if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
selectBillingAddressAction(quote.shippingAddress());
}
payload = {
addressInformation: {
'shipping_address': quote.shippingAddress(),
'billing_address': quote.billingAddress(),
'shipping_method_code': quote.shippingMethod()['method_code'],
'shipping_carrier_code': quote.shippingMethod()['carrier_code']
}
};
payloadExtender(payload);
fullScreenLoader.startLoader();
return storage.post(
resourceUrlManager.getUrlForSetShippingInformation(quote),
JSON.stringify(payload)
).done(
function (response) {
quote.setTotals(response.totals);
paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
fullScreenLoader.stopLoader();
}
).fail(
function (response) {
errorProcessor.process(response);
fullScreenLoader.stopLoader();
}
);
}
};
});
I cleared all Cache within Magento Admin panel. Deleted all Cache in the browser and ran the following:
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento indexer:reindex
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
The 'My billing and shipping address are the same' is still ticked and has the Shipping Address.
Here are the contents of app/code/Vendor/Module/
