Use relative urls

components/product/ProductCard.tsx

@@ -8,6 +8,7 @@ import { useVariantPossibilities } from "$store/sdk/useVariantPossiblities.ts";
 import type { Product } from "apps/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
 import Image from "apps/website/components/Image.tsx";
+import { relative } from "$store/sdk/url.ts";
 
 export interface Layout {
   basics?: {
@@ -52,11 +53,6 @@ interface Props {
   platform?: Platform;
 }
 
-const relative = (url: string) => {
-  const link = new URL(url);
-  return `${link.pathname}${link.search}`;
-};
-
 const WIDTH = 200;
 const HEIGHT = 279;
 
@@ -85,16 +81,24 @@ function ProductCard(
     !l?.basics?.contentAlignment || l?.basics?.contentAlignment == "Left"
       ? "left"
       : "center";
-  const skuSelector = variants.map(([value, link]) => (
-    <li>
-      <a href={link}>
-        <Avatar
-          variant={link === url ? "active" : link ? "default" : "disabled"}
-          content={value}
-        />
-      </a>
-    </li>
-  ));
+  const relativeUrl = relative(url);
+  const skuSelector = variants.map(([value, link]) => {
+    const relativeLink = relative(link);
+    return (
+      <li>
+        <a href={relativeLink}>
+          <Avatar
+            variant={relativeLink === relativeUrl
+              ? "active"
+              : relativeLink
+              ? "default"
+              : "disabled"}
+            content={value}
+          />
+        </a>
+      </li>
+    );
+  });
   const cta = (
     <a
       href={url && relative(url)}

components/product/ProductVariantSelector.tsx

@@ -1,6 +1,7 @@
 import Avatar from "$store/components/ui/Avatar.tsx";
 import { useVariantPossibilities } from "$store/sdk/useVariantPossiblities.ts";
 import type { Product } from "apps/commerce/types.ts";
+import { relative } from "$store/sdk/url.ts"
 
 interface Props {
   product: Product;
@@ -17,20 +18,24 @@ function VariantSelector({ product }: Props) {
         <li class="flex flex-col gap-2">
           <span class="text-sm">{name}</span>
           <ul class="flex flex-row gap-3">
-            {Object.entries(possibilities[name]).map(([value, link]) => (
-              <li>
-                <button f-partial={link} f-client-nav>
-                  <Avatar
-                    content={value}
-                    variant={link === url
-                      ? "active"
-                      : link
-                      ? "default"
-                      : "disabled"}
-                  />
-                </button>
-              </li>
-            ))}
+            {Object.entries(possibilities[name]).map(([value, link]) => {
+              const relativeUrl = relative(url);
+              const relativeLink = relative(link);
+              return (
+                <li>
+                  <button f-partial={relativeLink} f-client-nav>
+                    <Avatar
+                      content={value}
+                      variant={relativeLink === relativeUrl
+                        ? "active"
+                        : relativeLink
+                        ? "default"
+                        : "disabled"}
+                    />
+                  </button>
+                </li>
+              );
+            })}
           </ul>
         </li>
       ))}

sdk/url.ts

@@ -0,0 +1,5 @@
+export const relative = (link?: string | undefined) => {
+  const linkUrl = link ? new URL(link) : undefined;
+  const linkPath = linkUrl ? `${linkUrl.pathname}${linkUrl.search}` : undefined;
+  return linkPath;
+};