From f0b3fb70d5743c935ad30c4ba54b028812bf59c2 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Dec 2024 15:01:28 -0800
Subject: [PATCH] update changeset

---
 .changeset/lemon-beans-drum.md | 22 +++-------------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/.changeset/lemon-beans-drum.md b/.changeset/lemon-beans-drum.md
index b086005aa..34c54b8df 100644
--- a/.changeset/lemon-beans-drum.md
+++ b/.changeset/lemon-beans-drum.md
@@ -116,7 +116,7 @@ import {
   Analytics,
   useOptimisticVariant,
   getAdjacentAndFirstAvailableVariants,
-+  mapSelectedProductOptionToObject,
++  useSelectedOptionInUrlParam,
 } from '@shopify/hydrogen';
 
 export default function Product() {
@@ -130,23 +130,7 @@ export default function Product() {
 
 +  // Sets the search param to the selected variant without navigation
 +  // only when no search params are set in the url
-+  useEffect(() => {
-+    const searchParams = new URLSearchParams(
-+      mapSelectedProductOptionToObject(
-+        selectedVariant.selectedOptions || [],
-+      ),
-+    );
-
-+    if (window.location.search === '' && searchParams.toString() !== '') {
-+      window.history.replaceState(
-+        {},
-+        '',
-+        `${location.pathname}?${searchParams.toString()}`,
-+      );
-+    }
-+  }, [
-+    JSON.stringify(selectedVariant.selectedOptions),
-+  ]);
++  useSelectedOptionInUrlParam(selectedVariant.selectedOptions);
 ```
 
 5. Get the product options array using `getProductOptions`
@@ -158,7 +142,7 @@ import {
   useOptimisticVariant,
 +  getProductOptions,
   getAdjacentAndFirstAvailableVariants,
-  mapSelectedProductOptionToObject,
+  useSelectedOptionInUrlParam,
 } from '@shopify/hydrogen';
 
 export default function Product() {