Merge branch 'original-main'

app/product/[...handle]/page.tsx

@@ -83,7 +83,7 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
           <div className="h-full w-full basis-full lg:basis-4/6">
             <Gallery
               images={product.images.map((image: Image) => ({

components/grid/tile.tsx

@@ -20,7 +20,7 @@ export function GridTileImage({
   return (
     <div
       className={clsx(
-        'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
+        'group flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
         {
           relative: label,
           'border-2 border-blue-600': active,
@@ -32,7 +32,7 @@ export function GridTileImage({
         // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
         <Image
           className={clsx('relative h-full w-full object-contain', {
-            'transition duration-300 ease-in-out hover:scale-105': isInteractive,
+            'transition duration-300 ease-in-out group-hover:scale-105': isInteractive,
             'max-h-[4rem] min-h-[4rem]': props.width === 200 && props.height === 200 // this styling is for the thumbnails below gallery on product detail page
           })}
           {...props}

components/product/gallery.tsx

@@ -74,7 +74,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
             imageSearchParams.set('image', index.toString());
 
             return (
-              <li key={image.src} className="h-auto w-20">
+              <li key={image.src} className="h-20 w-20">
                 <Link
                   aria-label="Enlarge product image"
                   href={createUrl(pathname, imageSearchParams)}

components/product/variant-selector.tsx

@@ -3,8 +3,7 @@
 import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopware/types';
 import { createUrl } from 'lib/utils';
-import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { usePathname, useSearchParams } from 'next/navigation';
 
 type Combination = {
   id: string;
@@ -19,6 +18,7 @@ export function VariantSelector({
   options: ProductOption[];
   variants: ProductVariant[];
 }) {
+  const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const hasNoOptionsOrJustOneOption =
@@ -76,17 +76,14 @@ export function VariantSelector({
           // The option is active if it's in the url params.
           const isActive = searchParams.get(optionNameLowerCase) === value;
 
-          // You can't disable a link, so we need to render something that isn't clickable.
-          const DynamicTag = isAvailableForSale ? Link : 'p';
-          const dynamicProps = {
-            ...(isAvailableForSale && { scroll: false })
-          };
-
           return (
-            <DynamicTag
+            <button
               key={value}
               aria-disabled={!isAvailableForSale}
-              href={optionUrl}
+              disabled={!isAvailableForSale}
+              onClick={() => {
+                router.replace(optionUrl, { scroll: false });
+              }}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
                 'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
@@ -98,10 +95,9 @@ export function VariantSelector({
                     !isAvailableForSale
                 }
               )}
-              {...dynamicProps}
             >
               {value}
-            </DynamicTag>
+            </button>
           );
         })}
       </dd>

next.config.js

@@ -16,5 +16,14 @@ module.exports = {
         hostname: 'cdn.shopware.store'
       }
     ]
+  },
+  async redirects() {
+    return [
+      {
+        source: '/password',
+        destination: '/',
+        permanent: true
+      }
+    ];
   }
 };