Extension to Remove Edit Option From Shipping Address Field

Requirement:
On the SCA website, the shipping address can be edited from the my-account and checkout sections.
Hide the edit option for the shipping address from my account and checkout section.

Solution:

Created an extension for the functionality 

In the extension, extended the “AddressDetailsView“ file for disabling the buttons “Edit“ and “Remove“ in the Address cell. 

Modified the min-height and height of the address boxes for proper alignment, using the sass file in the extension itself. 

No changes made to the theme, so we can deactivate the extension for removing the feature.

My account Page:

Checkout Page:

Code( Entry point file):

define(
	'JJ.RemoveShipAddressEdit.RemoveEdit'
,   [
	'Address.Details.View',
	'Address.Edit.View'
	]
,   function (
	AddressDetailsView,
	AddressEditView
	)
{
	'use strict';

	return  {
		mountToApp: function mountToApp (container)
		{  
			_.extend(AddressDetailsView.prototype, {
				initialize: _.wrap(AddressDetailsView.prototype.initialize, function (fn) {
				  fn.apply(this, _.toArray(arguments).slice(1));
				  var hideEdit = true;
				  //code for removing the 'Edit' and 'Remove' options.
				  if (hideEdit) {
					setTimeout(function() {
						$('[data-action="edit-address"]').addClass('hidden').prop('disabled', true).val('');
						$('[data-action="remove"]').addClass('hidden').prop('disabled', true).val('');
						$('.overview-shipping-card-button-edit').addClass('hidden').prop('disabled', true).val('');
					}, 100);
				  }
				})
			  });

		}
	};
});
Sass file:
.overview-shipping-card, .overview-payment-card, .overview-profile-card{
  min-height: 300px;
  height: auto;
}
.address-details-container{
  min-height: 240px;
  height: auto;
}
.address-details-new-address{
  min-height: 240px;
  height: auto;
}

Leave a comment

Your email address will not be published. Required fields are marked *