Prevent scroll to top functionality in Cart page

In small screen devices, when the cart has quite a lot of items in it, a customer scrolls down and edits to update or removes an item, then item will automatically goes all the way to the top of the list again. Stop it from going back to the top of the list. It should stay at the item that was clicked on. So that the customer can keep editing their cart without scrolling all the way back and find where they were up to.

Solution

Instead ofpreventing the standard scroll to top functionality in the cart page, we can do scroll back to same position using extension.

We have to do this in 2 scenarios

1. On updating the values after clicking the edit button
2. On modal close

Create extension in shopping pages, extend GlobalViews.Modal.View and Cart.AddToCart.Button.View

1.

	var url = window.location.href;
			//	console.log('url', url)
												if (url.indexOf("cart") > -1) {	
				_.extend(GlobalViewsModalView.prototype, {
					events: {
						'click .global-views-modal-content-header-close': "preventScroll"

					},
					preventScroll: function preventScroll(test2) {

						

						var globalid = this.options.childViewIstance.model.id;
						

						var elem1 = $('div[data-internalid = globalid]')
						
						if ($(window).width() < 769) {

						$("html, body").animate({
							scrollTop: $($("#" + globalid)).offset().top - 70
						}, 1000);
					}



					},

					getContext: _.wrap(GlobalViewsModalView.prototype.getContext, function (fn) {
						try {
							var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
						
							var test2 = this.options.childViewIstance.model.id;
						
						} catch (e) {
							console.log("err@barcode2View", e);
						}

						return original_Ret
					})
				});
			}

2.

var url = window.location.href;
			//	console.log('url', url)
												if (url.indexOf("cart") > -1) {	

				_.extend(CartAddToCartButtonView.prototype, {
					events: {
						'click .cart-add-to-cart-button': "preventScrollcart"

					},
					

					addToCart: function addToCart(e) {
						try {
							setTimeout(function () {

								for (var i = 0; i < document.getElementsByClassName("bx-pager-link").length; i++) {

									var activeImgOptionURL = (document.getElementsByClassName("bx-pager-link")[i].children[0]).currentSrc.split("?")[0];
									var mainImg = document.getElementsByClassName("product-details-image-gallery-container")[i + 1].innerHTML;
									var mainImgSplit = mainImg.split(" ");
									var mainImgSplitURL = mainImgSplit[1].split("?");

									if (mainImgSplitURL[0] != ("src=\"" + activeImgOptionURL)) {

										mainImgSplitURL[0] = "src=" + activeImgOptionURL;
										mainImgSplit[1] = mainImgSplitURL.join("?");
										var newImgSrc = mainImgSplit.join(" ");
										document.getElementsByClassName("product-details-image-gallery-container")[i + 1].innerHTML = newImgSrc;

									}
								}
							}, 3000);
						} catch (e) {
							console.warn('The Zoom bug fix is throwing an error (Cart.AddToCart.Button.View): ' + JSON.stringify(e));
						}
						e.preventDefault();
						const self = this;
						let cart_promise;

						if (
							!this.model.areAttributesValid(['options', 'quantity'], self.getAddToCartValidators())
						) {
							return;
						}

						if (!this.model.isNew() && this.model.get('source') === 'cart') {
							cart_promise = this.cart.updateProduct(this.model);
							
							cart_promise.done(function (result) {

						
								var updated_id = result.latest_addition;
								if ($(window).width() < 769) {
								$("html, body").animate({
									scrollTop: $($("#" + updated_id)).offset().top - 70
								}, 1000);
							}

							
							
								
								self.options.application.getLayout().closeModal();
							});
						}

						cart_promise.fail(function (jqXhr) {
							let error_details = null;
							try {
								if (jqXhr && jqXhr.responseText) {
									const response = JSON.parse(jqXhr.responseText);
									error_details = response.errorDetails;
								}
							} catch (error) {
								console.error(error);
							} finally {
								if (error_details && error_details.status === 'LINE_ROLLBACK') {
									self.model.set('internalid', error_details.newLineId);
								}
							}
						});

						this.disableElementsOnPromise(cart_promise, e.target);
						return false;
					},

				});
			}