How to Disable province , zipcode and country from checkout. Magento 2.2
https://magento.stackexchange.com/questions/293270
-
17-03-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
In Magento2 - I want to remove ZipCode , Province and Country name from the Checkout page for which I tried
Vender/Module/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/shipping': {
'ALP_Checkout/js/view/shipping': true
}
}
}
};
Vendor/Module/view/frontend/web/js/view/shipping.js
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'underscore',
'Magento_Ui/js/form/form',
'ko',
'Magento_Customer/js/model/customer',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/address-converter',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/create-shipping-address',
'Magento_Checkout/js/action/select-shipping-address',
'Magento_Checkout/js/model/shipping-rates-validator',
'Magento_Checkout/js/model/shipping-address/form-popup-state',
'Magento_Checkout/js/model/shipping-service',
'Magento_Checkout/js/action/select-shipping-method',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/action/set-shipping-information',
'Magento_Checkout/js/model/step-navigator',
'Magento_Ui/js/modal/modal',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Checkout/js/checkout-data',
'uiRegistry',
'mage/translate',
'Magento_Checkout/js/model/shipping-rate-service'
], function(
$,
_,
Component,
ko,
customer,
addressList,
addressConverter,
quote,
createShippingAddress,
selectShippingAddress,
shippingRatesValidator,
formPopUpState,
shippingService,
selectShippingMethodAction,
rateRegistry,
setShippingInformationAction,
stepNavigator,
modal,
checkoutDataResolver,
checkoutData,
registry,
$t
) {
'use strict';
var popUp = null;
setInterval(() => {
if (!$('div[name="shippingAddress.postcode"]').hasClass('hidden')) {
$('div[name="shippingAddress.postcode"]').addClass('hidden');
$('div[name="shippingAddress.postcode"]').removeClass('_required');
$('div[name="shippingAddress.postcode"]').find('input').val("64000");
}
if (!$('div[name="shippingAddress.region"]').hasClass('hidden')) {
$('div[name="shippingAddress.region"]').addClass('hidden');
$('div[name="shippingAddress.region"]').removeClass('_required');
$('div[name="shippingAddress.region"]').find('input').val("removedFromFrontend");
}
if (!$('div[name="shippingAddress.country_id"]').hasClass('hidden')) {
$('div[name="shippingAddress.country_id"]').addClass('hidden');
$('div[name="shippingAddress.country_id"]').removeClass('_required');
$('div[name="shippingAddress.country_id"]').find('select').val("PK");
}
if (!$('div[name="shippingAddress.region_id"]').hasClass('hidden')) {
$('div[name="shippingAddress.region_id"]').addClass('hidden');
$('div[name="shippingAddress.region_id"]').find('select').val("102");
$('div[name="shippingAddress.region_id"]').removeClass('_required');
$('div[name="shippingAddress.region_id"]').find('input').val("removedFromFrontend");
}
}, 1000);
return Component.extend({
defaults: {
template: 'Magento_Checkout/shipping',
shippingFormTemplate: 'Magento_Checkout/shipping-address/form',
shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',
shippingMethodItemTemplate: 'Magento_Checkout/shipping-address/shipping-method-item'
},
visible: ko.observable(!quote.isVirtual()),
errorValidationMessage: ko.observable(false),
isCustomerLoggedIn: customer.isLoggedIn,
isFormPopUpVisible: formPopUpState.isVisible,
isFormInline: addressList().length === 0,
isNewAddressAdded: ko.observable(false),
saveInAddressBook: 1,
quoteIsVirtual: quote.isVirtual(),
/**
* @return {exports}
*/
initialize: function() {
var self = this,
hasNewAddress,
fieldsetName = 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset';
this._super();
if (!quote.isVirtual()) {
stepNavigator.registerStep(
'shipping',
'',
$t('Shipping'),
this.visible, _.bind(this.navigate, this),
10
);
}
checkoutDataResolver.resolveShippingAddress();
hasNewAddress = addressList.some(function(address) {
return address.getType() == 'new-customer-address'; //eslint-disable-line eqeqeq
});
this.isNewAddressAdded(hasNewAddress);
this.isFormPopUpVisible.subscribe(function(value) {
if (value) {
self.getPopUp().openModal();
}
});
quote.shippingMethod.subscribe(function() {
self.errorValidationMessage(false);
});
registry.async('checkoutProvider')(function(checkoutProvider) {
var shippingAddressData = checkoutData.getShippingAddressFromData();
if (shippingAddressData) {
checkoutProvider.set(
'shippingAddress',
$.extend(true, {}, checkoutProvider.get('shippingAddress'), shippingAddressData)
);
}
checkoutProvider.on('shippingAddress', function(shippingAddrsData) {
checkoutData.setShippingAddressFromData(shippingAddrsData);
});
shippingRatesValidator.initFields(fieldsetName);
});
return this;
},
/**
* Navigator change hash handler.
*
* @param {Object} step - navigation step
*/
navigate: function(step) {
step && step.isVisible(true);
},
/**
* @return {*}
*/
getPopUp: function() {
var self = this,
buttons;
if (!popUp) {
buttons = this.popUpForm.options.buttons;
this.popUpForm.options.buttons = [{
text: buttons.save.text ? buttons.save.text : $t('Save Address'),
class: buttons.save.class ? buttons.save.class : 'action primary action-save-address',
click: self.saveNewAddress.bind(self)
},
{
text: buttons.cancel.text ? buttons.cancel.text : $t('Cancel'),
class: buttons.cancel.class ? buttons.cancel.class : 'action secondary action-hide-popup',
/** @inheritdoc */
click: this.onClosePopUp.bind(this)
}
];
/** @inheritdoc */
this.popUpForm.options.closed = function() {
self.isFormPopUpVisible(false);
};
this.popUpForm.options.modalCloseBtnHandler = this.onClosePopUp.bind(this);
this.popUpForm.options.keyEventHandlers = {
escapeKey: this.onClosePopUp.bind(this)
};
/** @inheritdoc */
this.popUpForm.options.opened = function() {
// Store temporary address for revert action in case when user click cancel action
self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
};
popUp = modal(this.popUpForm.options, $(this.popUpForm.element));
}
return popUp;
},
/**
* Revert address and close modal.
*/
onClosePopUp: function() {
checkoutData.setShippingAddressFromData($.extend(true, {}, this.temporaryAddress));
this.getPopUp().closeModal();
},
/**
* Show address form popup
*/
showFormPopUp: function() {
this.isFormPopUpVisible(true);
},
/**
* Save new shipping address
*/
saveNewAddress: function() {
var addressData,
newShippingAddress;
this.source.set('params.invalid', false);
this.triggerShippingDataValidateEvent();
if (!this.source.get('params.invalid')) {
addressData = this.source.get('shippingAddress');
// if user clicked the checkbox, its value is true or false. Need to convert.
addressData['save_in_address_book'] = this.saveInAddressBook ? 1 : 0;
// New address must be selected as a shipping address
newShippingAddress = createShippingAddress(addressData);
selectShippingAddress(newShippingAddress);
checkoutData.setSelectedShippingAddress(newShippingAddress.getKey());
checkoutData.setNewCustomerShippingAddress($.extend(true, {}, addressData));
this.getPopUp().closeModal();
this.isNewAddressAdded(true);
}
},
/**
* Shipping Method View
*/
rates: shippingService.getShippingRates(),
isLoading: shippingService.isLoading,
isSelected: ko.computed(function() {
return quote.shippingMethod() ?
quote.shippingMethod()['carrier_code'] + '_' + quote.shippingMethod()['method_code'] :
null;
}),
/**
* @param {Object} shippingMethod
* @return {Boolean}
*/
selectShippingMethod: function(shippingMethod) {
selectShippingMethodAction(shippingMethod);
checkoutData.setSelectedShippingRate(shippingMethod['carrier_code'] + '_' + shippingMethod['method_code']);
return true;
},
/**
* Set shipping information handler
*/
setShippingInformation: function() {
if (this.validateShippingInformation()) {
setShippingInformationAction().done(
function() {
stepNavigator.next();
}
);
}
},
/**
* @return {Boolean}
*/
validateShippingInformation: function() {
var shippingAddress,
addressData,
loginFormSelector = 'form[data-role=email-with-possible-login]',
emailValidationResult = customer.isLoggedIn(),
field;
if (!quote.shippingMethod()) {
this.errorValidationMessage($t('Please specify a shipping method.'));
return false;
}
if (!customer.isLoggedIn()) {
$(loginFormSelector).validation();
emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
}
if (this.isFormInline) {
this.source.set('params.invalid', false);
this.triggerShippingDataValidateEvent();
if (emailValidationResult &&
this.source.get('params.invalid') ||
!quote.shippingMethod()['method_code'] ||
!quote.shippingMethod()['carrier_code']
) {
this.focusInvalid();
return false;
}
shippingAddress = quote.shippingAddress();
addressData = addressConverter.formAddressDataToQuoteAddress(
this.source.get('shippingAddress')
);
//Copy form data to quote shipping address object
for (field in addressData) {
if (addressData.hasOwnProperty(field) && //eslint-disable-line max-depth
shippingAddress.hasOwnProperty(field) &&
typeof addressData[field] != 'function' &&
_.isEqual(shippingAddress[field], addressData[field])
) {
shippingAddress[field] = addressData[field];
} else if (typeof addressData[field] != 'function' &&
!_.isEqual(shippingAddress[field], addressData[field])) {
shippingAddress = addressData;
break;
}
}
if (customer.isLoggedIn()) {
shippingAddress['save_in_address_book'] = 1;
}
selectShippingAddress(shippingAddress);
}
if (!emailValidationResult) {
$(loginFormSelector + ' input[name=username]').focus();
return false;
}
return true;
},
/**
* Trigger Shipping data Validate Event.
*/
triggerShippingDataValidateEvent: function() {
this.source.trigger('shippingAddress.data.validate');
if (this.source.get('shippingAddress.custom_attributes')) {
this.source.trigger('shippingAddress.custom_attributes.data.validate');
}
}
});
});
It returns me a Blank Page of Checkout. What is the problem and how can I sort this
Solution
app/code/Vendor/Checkout/view/frontend/requirejs-config.js
use map instead of mixins to override code js files
var config = {
map: {
'*': {
'Magento_Checkout/js/view/shipping':'Vendor_Checkout/js/view/shipping'
}
}
};
app/code/Vendor/Checkout/view/frontend/web/js/view/shipping.js
Add your custom logic like customFunction
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'underscore',
'Magento_Ui/js/form/form',
'ko',
'Magento_Customer/js/model/customer',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/model/address-converter',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/create-shipping-address',
'Magento_Checkout/js/action/select-shipping-address',
'Magento_Checkout/js/model/shipping-rates-validator',
'Magento_Checkout/js/model/shipping-address/form-popup-state',
'Magento_Checkout/js/model/shipping-service',
'Magento_Checkout/js/action/select-shipping-method',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/action/set-shipping-information',
'Magento_Checkout/js/model/step-navigator',
'Magento_Ui/js/modal/modal',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Checkout/js/checkout-data',
'uiRegistry',
'mage/translate',
'Magento_Checkout/js/model/shipping-rate-service'
], function(
$,
_,
Component,
ko,
customer,
addressList,
addressConverter,
quote,
createShippingAddress,
selectShippingAddress,
shippingRatesValidator,
formPopUpState,
shippingService,
selectShippingMethodAction,
rateRegistry,
setShippingInformationAction,
stepNavigator,
modal,
checkoutDataResolver,
checkoutData,
registry,
$t
) {
'use strict';
var popUp = null;
return Component.extend({
defaults: {
template: 'Magento_Checkout/shipping',
shippingFormTemplate: 'Magento_Checkout/shipping-address/form',
shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',
shippingMethodItemTemplate: 'Magento_Checkout/shipping-address/shipping-method-item'
},
visible: ko.observable(!quote.isVirtual()),
errorValidationMessage: ko.observable(false),
isCustomerLoggedIn: customer.isLoggedIn,
isFormPopUpVisible: formPopUpState.isVisible,
isFormInline: addressList().length === 0,
isNewAddressAdded: ko.observable(false),
saveInAddressBook: 1,
quoteIsVirtual: quote.isVirtual(),
/**
* @return {exports}
*/
initialize: function() {
var self = this,
hasNewAddress,
fieldsetName = 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset';
this.customFunction();//Call your function here to run when page loads
this._super();
if (!quote.isVirtual()) {
stepNavigator.registerStep(
'shipping',
'',
$t('Shipping'),
this.visible, _.bind(this.navigate, this),
10
);
}
checkoutDataResolver.resolveShippingAddress();
hasNewAddress = addressList.some(function(address) {
return address.getType() == 'new-customer-address'; //eslint-disable-line eqeqeq
});
this.isNewAddressAdded(hasNewAddress);
this.isFormPopUpVisible.subscribe(function(value) {
if (value) {
self.getPopUp().openModal();
}
});
quote.shippingMethod.subscribe(function() {
self.errorValidationMessage(false);
});
registry.async('checkoutProvider')(function(checkoutProvider) {
var shippingAddressData = checkoutData.getShippingAddressFromData();
if (shippingAddressData) {
checkoutProvider.set(
'shippingAddress',
$.extend(true, {}, checkoutProvider.get('shippingAddress'), shippingAddressData)
);
}
checkoutProvider.on('shippingAddress', function(shippingAddrsData) {
checkoutData.setShippingAddressFromData(shippingAddrsData);
});
shippingRatesValidator.initFields(fieldsetName);
});
return this;
},
customFunction: function(){
setInterval(function(){
if (!$('div[name="shippingAddress.postcode"]').hasClass('hidden')) {
$('div[name="shippingAddress.postcode"]').addClass('hidden');
$('div[name="shippingAddress.postcode"]').removeClass('_required');
$('div[name="shippingAddress.postcode"]').find('input').val("64000");
}
if (!$('div[name="shippingAddress.region"]').hasClass('hidden')) {
$('div[name="shippingAddress.region"]').addClass('hidden');
$('div[name="shippingAddress.region"]').removeClass('_required');
$('div[name="shippingAddress.region"]').find('input').val("removedFromFrontend");
}
if (!$('div[name="shippingAddress.country_id"]').hasClass('hidden')) {
$('div[name="shippingAddress.country_id"]').addClass('hidden');
$('div[name="shippingAddress.country_id"]').removeClass('_required');
$('div[name="shippingAddress.country_id"]').find('select').val("PK");
}
if (!$('div[name="shippingAddress.region_id"]').hasClass('hidden')) {
$('div[name="shippingAddress.region_id"]').addClass('hidden');
$('div[name="shippingAddress.region_id"]').find('select').val("102");
$('div[name="shippingAddress.region_id"]').removeClass('_required');
$('div[name="shippingAddress.region_id"]').find('input').val("removedFromFrontend");
}
}, 1000);
},
/**
* Navigator change hash handler.
*
* @param {Object} step - navigation step
*/
navigate: function(step) {
step && step.isVisible(true);
},
/**
* @return {*}
*/
getPopUp: function() {
var self = this,
buttons;
if (!popUp) {
buttons = this.popUpForm.options.buttons;
this.popUpForm.options.buttons = [{
text: buttons.save.text ? buttons.save.text : $t('Save Address'),
class: buttons.save.class ? buttons.save.class : 'action primary action-save-address',
click: self.saveNewAddress.bind(self)
},
{
text: buttons.cancel.text ? buttons.cancel.text : $t('Cancel'),
class: buttons.cancel.class ? buttons.cancel.class : 'action secondary action-hide-popup',
/** @inheritdoc */
click: this.onClosePopUp.bind(this)
}
];
/** @inheritdoc */
this.popUpForm.options.closed = function() {
self.isFormPopUpVisible(false);
};
this.popUpForm.options.modalCloseBtnHandler = this.onClosePopUp.bind(this);
this.popUpForm.options.keyEventHandlers = {
escapeKey: this.onClosePopUp.bind(this)
};
/** @inheritdoc */
this.popUpForm.options.opened = function() {
// Store temporary address for revert action in case when user click cancel action
self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
};
popUp = modal(this.popUpForm.options, $(this.popUpForm.element));
}
return popUp;
},
/**
* Revert address and close modal.
*/
onClosePopUp: function() {
checkoutData.setShippingAddressFromData($.extend(true, {}, this.temporaryAddress));
this.getPopUp().closeModal();
},
/**
* Show address form popup
*/
showFormPopUp: function() {
this.isFormPopUpVisible(true);
},
/**
* Save new shipping address
*/
saveNewAddress: function() {
var addressData,
newShippingAddress;
this.source.set('params.invalid', false);
this.triggerShippingDataValidateEvent();
if (!this.source.get('params.invalid')) {
addressData = this.source.get('shippingAddress');
// if user clicked the checkbox, its value is true or false. Need to convert.
addressData['save_in_address_book'] = this.saveInAddressBook ? 1 : 0;
// New address must be selected as a shipping address
newShippingAddress = createShippingAddress(addressData);
selectShippingAddress(newShippingAddress);
checkoutData.setSelectedShippingAddress(newShippingAddress.getKey());
checkoutData.setNewCustomerShippingAddress($.extend(true, {}, addressData));
this.getPopUp().closeModal();
this.isNewAddressAdded(true);
}
},
/**
* Shipping Method View
*/
rates: shippingService.getShippingRates(),
isLoading: shippingService.isLoading,
isSelected: ko.computed(function() {
return quote.shippingMethod() ?
quote.shippingMethod()['carrier_code'] + '_' + quote.shippingMethod()['method_code'] :
null;
}),
/**
* @param {Object} shippingMethod
* @return {Boolean}
*/
selectShippingMethod: function(shippingMethod) {
selectShippingMethodAction(shippingMethod);
checkoutData.setSelectedShippingRate(shippingMethod['carrier_code'] + '_' + shippingMethod['method_code']);
return true;
},
/**
* Set shipping information handler
*/
setShippingInformation: function() {
if (this.validateShippingInformation()) {
setShippingInformationAction().done(
function() {
stepNavigator.next();
}
);
}
},
/**
* @return {Boolean}
*/
validateShippingInformation: function() {
var shippingAddress,
addressData,
loginFormSelector = 'form[data-role=email-with-possible-login]',
emailValidationResult = customer.isLoggedIn(),
field;
if (!quote.shippingMethod()) {
this.errorValidationMessage($t('Please specify a shipping method.'));
return false;
}
if (!customer.isLoggedIn()) {
$(loginFormSelector).validation();
emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
}
if (this.isFormInline) {
this.source.set('params.invalid', false);
this.triggerShippingDataValidateEvent();
if (emailValidationResult &&
this.source.get('params.invalid') ||
!quote.shippingMethod()['method_code'] ||
!quote.shippingMethod()['carrier_code']
) {
this.focusInvalid();
return false;
}
shippingAddress = quote.shippingAddress();
addressData = addressConverter.formAddressDataToQuoteAddress(
this.source.get('shippingAddress')
);
//Copy form data to quote shipping address object
for (field in addressData) {
if (addressData.hasOwnProperty(field) && //eslint-disable-line max-depth
shippingAddress.hasOwnProperty(field) &&
typeof addressData[field] != 'function' &&
_.isEqual(shippingAddress[field], addressData[field])
) {
shippingAddress[field] = addressData[field];
} else if (typeof addressData[field] != 'function' &&
!_.isEqual(shippingAddress[field], addressData[field])) {
shippingAddress = addressData;
break;
}
}
if (customer.isLoggedIn()) {
shippingAddress['save_in_address_book'] = 1;
}
selectShippingAddress(shippingAddress);
}
if (!emailValidationResult) {
$(loginFormSelector + ' input[name=username]').focus();
return false;
}
return true;
},
/**
* Trigger Shipping data Validate Event.
*/
triggerShippingDataValidateEvent: function() {
this.source.trigger('shippingAddress.data.validate');
if (this.source.get('shippingAddress.custom_attributes')) {
this.source.trigger('shippingAddress.custom_attributes.data.validate');
}
}
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
