Merge pull request 'restore scroll position after adding to cart' (#7) from slave/storefront-products-index-add-to-cart-ux-improvement into master

Reviewed-on: #7

backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts

@@ -100,7 +100,7 @@ export class StorefrontCartController {
             text: 'Added to cart.'
         });
 
-        res.redirect(HttpStatus.FOUND, safeInternalShopRedirectPath(req));
+        res.redirect(HttpStatus.FOUND, this.buildAddToCartRedirectPath(req, variantId));
     }
 
     @Post('shop/cart/product/update')
@@ -189,4 +189,18 @@ export class StorefrontCartController {
             this.cartCookieService.setCart(req, res, cartMutation);
         }
     }
+
+    private buildAddToCartRedirectPath(req: Request, variantId: string): string {
+        const redirectPath = safeInternalShopRedirectPath(req);
+        const pathname = redirectPath.split('?')[0] ?? redirectPath;
+        const isProductsIndexPath = pathname === '/' || pathname.startsWith('/shop/categories/');
+
+        if (!isProductsIndexPath) {
+            return redirectPath;
+        }
+
+        const anchor = `product-card-${variantId}`;
+
+        return `${redirectPath}#${anchor}`;
+    }
 }

backend/src/modules/storefrontCore/public/css/storefront.css

@@ -49,6 +49,7 @@
     --sf-split-sidebar: minmax(220px, 320px);
     --sf-product-card-min: 11rem;
     --sf-product-card-max: 22rem;
+    --sf-sticky-header-scroll-padding: 9rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -158,6 +159,10 @@
     box-sizing: border-box;
 }
 
+html {
+    scroll-padding-top: var(--sf-sticky-header-scroll-padding);
+}
+
 body.sf-body {
     margin: 0;
     min-height: 100vh;
@@ -288,9 +293,13 @@ a:hover {
 }
 
 .sf-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
     margin-bottom: var(--sf-space-4);
     padding: var(--sf-space-3) 0;
     border-bottom: 1px solid var(--sf-border);
+    background: var(--sf-bg);
 }
 
 .sf-header__inner {

backend/src/modules/storefrontCore/views/partials/product-card.hbs

@@ -1,4 +1,4 @@
-<li class='sf-card sf-product-card'>
+<li class='sf-card sf-product-card' id='product-card-{{selectedVariant.id}}'>
     {{#with selectedVariant}}
         {{#if thumbnailUrl}}
             <a class='sf-product-card__media-link' href='{{detailHref}}'>