Merge pull request #198 from vtex-apps/feature/offset-scroll-top-mobile

Add scroll top to mobile viewport when editing address
vtex-apps · Jun 27, 2023 · 441d269 · 441d269
2 parents 0a8f8c1 + cb5ebd5
commit 441d269
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Added offset scroll on mobile when user changes their address
+
 ## [0.11.1] - 2023-05-19
 
 ### Added

diff --git a/checkout-ui-custom/checkout6-custom.js b/checkout-ui-custom/checkout6-custom.js
diff --git a/checkout-ui-custom/src/_js/_v.custom.checkout.ui.js b/checkout-ui-custom/src/_js/_v.custom.checkout.ui.js
@@ -371,6 +371,22 @@ class checkoutCustom {
     })
   }
 
+  handleBreakpointChange() {
+    if (window.innerWidth <= 767) {
+      $('body').on('click', '#edit-address-button', () => {
+        setTimeout(() => {
+          const shippingDataElement = document.getElementById('shipping-data')
+          const offset = shippingDataElement.offsetTop - 200
+
+          window.scrollTo({
+            top: offset,
+            behavior: 'smooth',
+          })
+        }, 500)
+      })
+    }
+  }
+
   removeMCLoader() {
     $(`.mini-cart .cart-items`).addClass('v-loaded')
   }
@@ -1076,6 +1092,10 @@ class checkoutCustom {
       window.location = $(this).closest('.checkout-steps_item').attr('data-url')
     })
 
+    window.addEventListener('resize', _this.handleBreakpointChange)
+
+    _this.handleBreakpointChange()
+
     $('body').on(
       'click',
       '.vtex-omnishipping-1-x-linkEdit.link-edit',

diff --git a/node/templates/checkout6-custom.js b/node/templates/checkout6-custom.js