fix: update layout for PLP

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/product/[handle]/page.tsx

@@ -10,7 +10,6 @@ import { ProductDescription } from 'components/product/product-description';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
-import Link from 'next/link';
 
 export const runtime = 'edge';
 
@@ -131,19 +130,18 @@ async function RelatedProducts({ id }: { id: string }) {
             key={product.handle}
             className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
           >
-            <Link className="relative h-full w-full" href={`/product/${product.handle}`}>
-              <GridTileImage
-                alt={product.title}
-                label={{
-                  title: product.title,
-                  amount: product.priceRange.maxVariantPrice.amount,
-                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
-                }}
-                src={product.featuredImage?.url}
-                fill
-                sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
-              />
-            </Link>
+            <GridTileImage
+              alt={product.title}
+              label={{
+                title: product.title,
+                amount: product.priceRange.maxVariantPrice.amount,
+                currencyCode: product.priceRange.maxVariantPrice.currencyCode
+              }}
+              src={product.featuredImage?.url}
+              fill
+              sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
+              href={`/product/${product.handle}`}
+            />
           </li>
         ))}
       </ul>

app/search/[collection]/page.tsx

@@ -8,7 +8,9 @@ import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
 import Grid from 'components/grid';
 import ProductsList from 'components/layout/products-list';
 import { getProductsInCollection } from 'components/layout/products-list/actions';
-import FiltersList from 'components/layout/search/filters/filters-list';
+import FiltersContainer, {
+  FiltersListPlaceholder
+} from 'components/layout/search/filters/filters-container';
 import MobileFilters from 'components/layout/search/filters/mobile-filters';
 import SubMenu from 'components/layout/search/filters/sub-menu';
 import Header, { HeaderPlaceholder } from 'components/layout/search/header';
@@ -47,60 +49,68 @@ async function CategoryPage({
 
   return (
     <>
-      <div className="flex w-full items-center justify-between gap-2 lg:justify-end">
-        <MobileFilters filters={filters} menu={<SubMenu collection={params.collection} />} />
-        <SortingMenu />
-      </div>
-      <section>
-        <Grid className="pt-5 lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
-          <aside className="hidden lg:block">
-            <SubMenu collection={params.collection} />
-            <h3 className="sr-only">Filters</h3>
-            <FiltersList filters={filters} />
-          </aside>
-          <div className="lg:col-span-2 xl:col-span-3">
-            <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-              {products.length === 0 ? (
-                <p className="py-3 text-lg">{`No products found in this collection`}</p>
-              ) : (
-                <ProductsList
-                  initialProducts={products}
-                  pageInfo={pageInfo}
-                  page="collection"
-                  searchParams={searchParams}
-                  key={JSON.stringify(searchParams)}
-                />
-              )}
-            </Grid>
-          </div>
-        </Grid>
-      </section>
-    </>
-  );
-}
-
-export default function CategorySearchPage(props: {
-  params: { collection: string };
-  searchParams?: { [key: string]: string | string[] | undefined };
-}) {
-  return (
-    <>
-      <div className="mb-2">
-        <Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
-          <Breadcrumb type="collection" handle={props.params.collection} />
-        </Suspense>
-      </div>
-      <Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
-        <Header collection={props.params.collection} />
-      </Suspense>
-      <div className="my-3">
+      <div className="my-3 block lg:hidden">
         <Suspense fallback={<YMMFiltersPlaceholder />}>
           <YMMFilters />
         </Suspense>
       </div>
-      <Suspense fallback={<ProductsGridPlaceholder />} key={`products-${props.params.collection}`}>
-        <CategoryPage {...props} />
-      </Suspense>
+      <div className="mb-5 flex w-full items-center justify-between gap-2 lg:justify-end">
+        <MobileFilters filters={filters} menu={<SubMenu collection={params.collection} />} />
+        <SortingMenu />
+      </div>
+      <Grid className="grid-cols-1 sm:grid-cols-2 sm:gap-x-8 lg:grid-cols-3">
+        {products.length === 0 ? (
+          <p className="py-3 text-lg">{`No products found in this collection`}</p>
+        ) : (
+          <ProductsList
+            initialProducts={products}
+            pageInfo={pageInfo}
+            page="collection"
+            searchParams={searchParams}
+            key={JSON.stringify(searchParams)}
+          />
+        )}
+      </Grid>
     </>
   );
 }
+
+export default async function CategorySearchPage(props: {
+  params: { collection: string };
+  searchParams?: { [key: string]: string | string[] | undefined };
+}) {
+  return (
+    <div className="grid lg:grid-cols-3 lg:gap-x-10 xl:grid-cols-4">
+      <aside className="hidden lg:block">
+        <div className="mb-5">
+          <Suspense fallback={<YMMFiltersPlaceholder />}>
+            <YMMFilters />
+          </Suspense>
+        </div>
+
+        <SubMenu collection={props.params.collection} />
+        <h3 className="sr-only">Filters</h3>
+        <Suspense fallback={<FiltersListPlaceholder />} key={`filters-${props.params.collection}`}>
+          <FiltersContainer searchParams={props.searchParams} />
+        </Suspense>
+      </aside>
+      <div className="lg:col-span-2 xl:col-span-3">
+        <div className="mb-2">
+          <Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
+            <Breadcrumb type="collection" handle={props.params.collection} />
+          </Suspense>
+        </div>
+        <Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
+          <Header collection={props.params.collection} />
+        </Suspense>
+
+        <Suspense
+          fallback={<ProductsGridPlaceholder />}
+          key={`products-${props.params.collection}`}
+        >
+          <CategoryPage {...props} />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

app/search/layout.tsx

@@ -1,10 +1,11 @@
 import Footer from 'components/layout/footer';
+import { Suspense } from 'react';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="mx-auto mt-4 min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]">
-        {children}
+      <div className="mx-auto mt-6 min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]">
+        <Suspense>{children}</Suspense>
       </div>
       <Footer />
     </>