Merge pull request #52 from deco-sites/feat/sku-selector

improve sku selector to exclude attributes

components/product/ProductVariantSelector.tsx

@@ -19,12 +19,11 @@ function VariantSelector({ product }: Props) {
           <span class="text-sm">{name}</span>
           <ul class="flex flex-row gap-3">
             {Object.entries(possibilities[name]).map(([value, link]) => {
-              // TODO: bring it back on fresh 1.5.3
-              // const partial = usePartialSection({ href: link });
+              const partial = usePartialSection({ href: link });
 
               return (
                 <li>
-                  <a href={link}>
+                  <button {...partial}>
                     <Avatar
                       content={value}
                       variant={link === url
@@ -33,7 +32,7 @@ function VariantSelector({ product }: Props) {
                         ? "default"
                         : "disabled"}
                     />
-                  </a>
+                  </button>
                 </li>
               );
             })}

deno.json

@@ -3,7 +3,7 @@
     "$store/": "./",
     "deco/": "https://denopkg.com/deco-cx/[email protected]/",
     "apps/": "https://denopkg.com/deco-cx/[email protected]/",
-    "$fresh/": "https://deno.land/x/fresh@1.5.2/",
+    "$fresh/": "https://denopkg.com/denoland/fresh@7ad4610e3a42aba42638cbc1041b96ee58a9b29e/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "preact-render-to-string": "https://esm.sh/*[email protected]",

sdk/useVariantPossiblities.ts

@@ -1,39 +1,42 @@
-import type { ProductLeaf } from "apps/commerce/types.ts";
+import type { ProductLeaf, PropertyValue } from "apps/commerce/types.ts";
 
 export type Possibilities = Record<string, Record<string, string | undefined>>;
 
+const hash = ({ name, value }: PropertyValue) => `${name}::${value}`;
+
+const omit = new Set(["category", "cluster", "RefId"]);
+
 export const useVariantPossibilities = (
   variants: ProductLeaf[],
   selected: ProductLeaf,
 ): Possibilities => {
   const possibilities: Possibilities = {};
-  const selectedSpecs = new Map(
-    (selected.additionalProperty ?? [])
-      .map((s) => [s.name, s] as const),
-  );
+  const selectedSpecs = new Set(selected.additionalProperty?.map(hash));
 
   for (const variant of variants) {
-    const { url, additionalProperty: specs = [] } = variant;
+    const { url, additionalProperty = [], productID } = variant;
+    const isSelected = productID === selected.productID;
+    const specs = additionalProperty.filter(({ name }) => !omit.has(name!));
 
     for (let it = 0; it < specs.length; it++) {
       const name = specs[it].name!;
       const value = specs[it].value!;
 
+      if (omit.has(name)) continue;
+
       if (!possibilities[name]) {
         possibilities[name] = {};
       }
 
-      if (!possibilities[name][value]) {
-        possibilities[name][value] = it === 0 ? url : undefined;
-      }
-
-      const isSelectable = specs.every((s) =>
-        s.name === name || selectedSpecs.get(s.name)?.value === s.value
-      );
+      // First row is always selectable
+      const isSelectable = it === 0 ||
+        specs.every((s) => s.name === name || selectedSpecs.has(hash(s)));
 
-      if (isSelectable) {
-        possibilities[name][value] = url;
-      }
+      possibilities[name][value] = isSelected
+        ? url
+        : isSelectable
+        ? possibilities[name][value] || url
+        : possibilities[name][value];
     }
   }