diff --git a/backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts b/backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts index e1d79ad..592ab02 100644 --- a/backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts +++ b/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}`; + } } diff --git a/backend/src/modules/storefrontCore/public/css/storefront.css b/backend/src/modules/storefrontCore/public/css/storefront.css index 730e251..67982da 100644 --- a/backend/src/modules/storefrontCore/public/css/storefront.css +++ b/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 { diff --git a/backend/src/modules/storefrontCore/views/partials/product-card.hbs b/backend/src/modules/storefrontCore/views/partials/product-card.hbs index 0b45ae6..0d5cfd3 100644 --- a/backend/src/modules/storefrontCore/views/partials/product-card.hbs +++ b/backend/src/modules/storefrontCore/views/partials/product-card.hbs @@ -1,4 +1,4 @@ -