Merge pull request #35 from deco-sites/jonasjesus/deco-5272-prefetch-toggle

feat(plp): admin toggle for product-link prefetch (DECO-5272)

Author: JonasJesus42

src/components/product/card/ProductCard.tsx

@@ -19,6 +19,12 @@ export interface Props {
   product: Product;
   /** Preload card image */
   preload?: boolean;
+  /**
+   * Router preload strategy for the product link — "intent" prefetches the PDP
+   * on hover/focus; false disables it. (Distinct from `preload`, the image LCP
+   * flag.)
+   */
+  prefetch?: "intent" | false;
   /** @description used for analytics event */
   itemListName?: string;
   /** @description index of the product card in the list */
@@ -34,6 +40,7 @@ const SHOE_SIZE_VARIANT = "shoe size";
 export default function ProductCard({
   product,
   preload,
+  prefetch = "intent",
   itemListName,
   index,
   className,
@@ -105,6 +112,7 @@ export default function ProductCard({
             width={WIDTH}
             height={HEIGHT}
             preload={preload}
+            prefetch={prefetch}
             inStock={inStock}
           />
         )}
@@ -133,7 +141,7 @@ export default function ProductCard({
         </div>
       </figure>
 
-      <Link to={selectedHref} preload="intent" className="pt-5">
+      <Link to={selectedHref} preload={prefetch} className="pt-5">
         <ProductCardTitle title={title} />
         <ProductCardPrice
           price={price}

src/components/product/card/ProductCardImage.tsx

@@ -10,7 +10,10 @@ export interface Props {
   backAlt?: string;
   width: number;
   height: number;
+  /** Eager-load the image (LCP) — distinct from `prefetch` (route preload). */
   preload?: boolean;
+  /** Router preload strategy for the product link. */
+  prefetch?: "intent" | false;
   inStock: boolean;
 }
 
@@ -23,13 +26,14 @@ export default function ProductCardImage({
   width,
   height,
   preload,
+  prefetch = "intent",
   inStock,
 }: Props) {
   const aspectRatio = `${width} / ${height}`;
   return (
     <Link
       to={href}
-      preload="intent"
+      preload={prefetch}
       aria-label="view product"
       className={clx(
         "absolute top-0 left-0",

src/components/search/SearchResult.tsx

@@ -24,6 +24,14 @@ export interface Layout {
    * @default "show-more"
    */
   pagination?: "show-more" | "pagination";
+  /**
+   * @title Pré-carregar página do produto
+   * @description Quando ativado, a página do produto começa a carregar assim
+   * que o usuário passa o mouse sobre o card, deixando a navegação mais rápida.
+   * Pode aumentar o consumo de dados em listas muito grandes.
+   * @default true
+   */
+  enablePrefetch?: boolean;
 }
 
 export interface Props {
@@ -122,7 +130,13 @@ function Result({
 
             {isRouteLoading
               ? <SearchResultGridSkeleton count={Math.min(perPage, 12) || 8} />
-              : <SearchResultGrid products={products} offset={offset} />}
+              : (
+                <SearchResultGrid
+                  products={products}
+                  offset={offset}
+                  prefetch={layout?.enablePrefetch === false ? false : "intent"}
+                />
+              )}
 
             <div className="grid place-items-center pt-2 sm:pt-10">
               <SearchPagination

src/components/search/SearchResultGrid.tsx

@@ -6,9 +6,13 @@ export interface Props {
   products: Product[];
   /** Index offset of the first product in the slice (used for analytics) */
   offset?: number;
+  /** Router preload strategy passed to each card's product link. */
+  prefetch?: "intent" | false;
 }
 
-export default function SearchResultGrid({ products, offset = 0 }: Props) {
+export default function SearchResultGrid(
+  { products, offset = 0, prefetch = "intent" }: Props,
+) {
   return (
     <div
       data-product-list
@@ -24,6 +28,7 @@ export default function SearchResultGrid({ products, offset = 0 }: Props) {
           key={`product-card-${product.productID}`}
           product={product}
           preload={index === 0}
+          prefetch={prefetch}
           index={offset + index}
           className="h-full min-w-40 max-w-75"
         />