Improve VariantSelector to return variant object in option values: (#…

…2099)
Shopify · May 10, 2024 · f3a7967 · f3a7967
1 parent 84d9e80
commit f3a7967
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 22 deletions.
diff --git a/packages/hydrogen/src/product/VariantSelector.example.jsx b/packages/hydrogen/src/product/VariantSelector.example.jsx
@@ -12,17 +12,21 @@ const ProductForm = ({product}) => {
         <>
           <div>{option.name}</div>
           <div>
-            {option.values.map(({value, isAvailable, to, isActive}) => (
-              <Link
-                to={to}
-                prefetch="intent"
-                className={
-                  isActive ? 'active' : isAvailable ? '' : 'opacity-80'
-                }
-              >
-                {value}
-              </Link>
-            ))}
+            {option.values.map(
+              ({value, isAvailable, to, isActive, variant}) => (
+                <Link
+                  to={to}
+                  prefetch="intent"
+                  className={
+                    isActive ? 'active' : isAvailable ? '' : 'opacity-80'
+                  }
+                >
+                  {value}
+                  <br />
+                  {variant && `SKU: ${variant.sku}`}
+                </Link>
+              ),
+            )}
           </div>
         </>
       )}

diff --git a/packages/hydrogen/src/product/VariantSelector.example.tsx b/packages/hydrogen/src/product/VariantSelector.example.tsx
@@ -13,17 +13,21 @@ const ProductForm = ({product}: {product: Product}) => {
         <>
           <div>{option.name}</div>
           <div>
-            {option.values.map(({value, isAvailable, to, isActive}) => (
-              <Link
-                to={to}
-                prefetch="intent"
-                className={
-                  isActive ? 'active' : isAvailable ? '' : 'opacity-80'
-                }
-              >
-                {value}
-              </Link>
-            ))}
+            {option.values.map(
+              ({value, isAvailable, to, isActive, variant}) => (
+                <Link
+                  to={to}
+                  prefetch="intent"
+                  className={
+                    isActive ? 'active' : isAvailable ? '' : 'opacity-80'
+                  }
+                >
+                  {value}
+                  <br />
+                  {variant && `SKU: ${variant.sku}`}
+                </Link>
+              ),
+            )}
           </div>
         </>
       )}

diff --git a/packages/hydrogen/src/product/VariantSelector.test.ts b/packages/hydrogen/src/product/VariantSelector.test.ts
@@ -488,4 +488,68 @@ describe('<VariantSelector>', () => {
       </DocumentFragment>
     `);
   });
+
+  it('returns variant in option values', () => {
+    const {asFragment} = render(
+      createElement(VariantSelector, {
+        handle: 'snowboard',
+        options: [{name: 'Size', values: ['S', 'M']}],
+        variants: {
+          nodes: [
+            {
+              availableForSale: true,
+              sku: 'ABC-01234',
+              selectedOptions: [{name: 'Size', value: 'S'}],
+            } as ProductVariant,
+            {
+              availableForSale: true,
+              sku: 'XYZ-56789',
+              selectedOptions: [{name: 'Size', value: 'M'}],
+            } as ProductVariant,
+          ],
+        },
+        children: ({option}) =>
+          createElement(
+            'div',
+            null,
+            option.values.map(({value, to, isAvailable, variant}) =>
+              createElement(
+                'a',
+                {
+                  key: option.name + value,
+                  href: to,
+                  className: isAvailable ? 'available' : 'unavailable',
+                },
+                value,
+                createElement('br', null),
+                variant && `SKU: ${variant?.sku}`,
+              ),
+            ),
+          ),
+      }),
+    );
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          <a
+            class="available"
+            href="/products/snowboard?Size=S"
+          >
+            S
+            <br />
+            SKU: ABC-01234
+          </a>
+          <a
+            class="available"
+            href="/products/snowboard?Size=M"
+          >
+            M
+            <br />
+            SKU: XYZ-56789
+          </a>
+        </div>
+      </DocumentFragment>
+    `);
+  });
 });
diff --git a/packages/hydrogen/src/product/VariantSelector.ts b/packages/hydrogen/src/product/VariantSelector.ts
@@ -21,6 +21,7 @@ export type VariantOptionValue = {
   to: string;
   search: string;
   isActive: boolean;
+  variant?: PartialDeep<ProductVariant>;
 };
 
 type VariantSelectorProps = {
@@ -115,6 +116,7 @@ export function VariantSelector({
                 to: path + searchString,
                 search: searchString,
                 isActive: calculatedActiveValue,
+                variant,
               });
             }