Prefetch the cart link immediately after add-to-cart (#716)

bigcommerce · Mar 28, 2024 · b1a2939 · b1a2939
1 parent a1f7970
commit b1a2939
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/.changeset/fresh-lemons-lick.md b/.changeset/fresh-lemons-lick.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Prefetch high-intent cart link immediately after add to cart action
diff --git a/apps/core/app/[locale]/(default)/compare/_components/add-to-cart-form.tsx b/apps/core/app/[locale]/(default)/compare/_components/add-to-cart-form.tsx
@@ -40,7 +40,12 @@ export const AddToCartForm = ({
                 {t.rich('addedProductQuantity', {
                   cartItems: quantity,
                   cartLink: (chunks) => (
-                    <Link className="font-semibold text-primary" href="/cart">
+                    <Link
+                      className="font-semibold text-primary"
+                      href="/cart"
+                      prefetch="viewport"
+                      prefetchKind="full"
+                    >
                       {chunks}
                     </Link>
                   ),

diff --git a/apps/core/components/product-card/cart.tsx b/apps/core/components/product-card/cart.tsx
@@ -56,7 +56,12 @@ export const Cart = ({ product }: { product: Partial<Product> }) => {
                 {t.rich('addedProductQuantity', {
                   cartItems: quantity,
                   cartLink: (chunks) => (
-                    <Link className="font-semibold text-primary" href="/cart">
+                    <Link
+                      className="font-semibold text-primary"
+                      href="/cart"
+                      prefetch="viewport"
+                      prefetchKind="full"
+                    >
                       {chunks}
                     </Link>
                   ),

diff --git a/apps/core/components/product-form/index.tsx b/apps/core/components/product-form/index.tsx
@@ -48,7 +48,12 @@ export const ProductForm = ({ product }: { product: Product }) => {
             {t.rich('addedProductQuantity', {
               cartItems: quantity,
               cartLink: (chunks) => (
-                <Link className="font-semibold text-primary hover:text-secondary" href="/cart">
+                <Link
+                  className="font-semibold text-primary hover:text-secondary"
+                  href="/cart"
+                  prefetch="viewport"
+                  prefetchKind="full"
+                >
                   {chunks}
                 </Link>
               ),