From c6eb7a30f9a50a9ab1a81b4006b208752551af10 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 8 Aug 2023 10:00:08 -0500
Subject: [PATCH 1/4] Changes variants to use router replace (#1157)

---
 components/product/variant-selector.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 89f2a322c..9d47eb5c8 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -3,8 +3,7 @@
 import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
-import Link from 'next/link';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, 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>

From 3f1a4f65aed78f0181f7e7ce1922038ce0c539a0 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 8 Aug 2023 10:05:38 -0500
Subject: [PATCH 2/4] Fixes product detail spacing (#1158)

---
 app/product/[handle]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index d59423364..cf31f0021 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -82,7 +82,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) => ({

From 857a1df0f65fc3ec2bf21262ed212bae9d64ec9f Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 8 Aug 2023 10:19:23 -0500
Subject: [PATCH 3/4] Changes product detail gallery thumbnails to always be
 square (#1160)

---
 components/product/gallery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index eabc500e3..0b03557a5 100644
--- a/components/product/gallery.tsx
+++ b/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)}

From 74b5a25120a8c23b8f301c221e9d547ec1fc1394 Mon Sep 17 00:00:00 2001
From: Hugo Cardoso <hugorafaelmc@gmail.com>
Date: Tue, 8 Aug 2023 17:00:43 -0300
Subject: [PATCH 4/4] Fixes footer deploy button on mobile (#1161)

---
 components/layout/footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 918345bda..ca568e77f 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -39,7 +39,7 @@ export default async function Footer() {
         </Suspense>
         <div className="md:ml-auto">
           <a
-            className="flex h-8 flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
+            className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
             aria-label="Deploy on Vercel"
             href="https://vercel.com/templates/next.js/nextjs-commerce"
           >