feat: adicionado componente de seleção por similar

deco-sites · Apr 17, 2024 · d8a4ab9 · d8a4ab9
1 parent 2d60eff
commit d8a4ab9
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 6 deletions.
diff --git a/components/product/ProductDetails.tsx b/components/product/ProductDetails.tsx
@@ -18,6 +18,7 @@ import Icon from "$store/components/ui/Icon.tsx";
 import { getShareLink } from "$store/sdk/shareLinks.tsx";
 
 import ProductSelector from "./ProductVariantSelector.tsx";
+import SimilarSelector from "deco-sites/lojastopmoveis/components/product/SimilarSelector.tsx";
 
 export type Variant = "front-back" | "slider" | "auto";
 
@@ -74,6 +75,7 @@ function ProductInfo(
     offers,
     name,
     isVariantOf,
+    isSimilarTo,
     url,
   } = product;
   const { price, listPrice, seller, availability, installment } = useOffer(
@@ -139,6 +141,7 @@ function ProductInfo(
       {availability === "https://schema.org/InStock"
         ? (
           <div class="mt-4 sm:mt-5">
+            <SimilarSelector product={product} />
             <ProductSelector product={product} />
           </div>
         )

diff --git a/components/product/ProductDetailsImages.tsx b/components/product/ProductDetailsImages.tsx
@@ -50,7 +50,7 @@ function ProductDetailsImages(
                   class="overflow-hidden cursor-zoom-in rounded-[10px] hover:rounded-none"
                 >
                   <Image
-                    class="w-full rounded-[10px] lg:hover:opacity-0"
+                    class="w-full rounded-[10px] lg:hover:opacity-0 h-[100%]"
                     sizes="(max-width: 640px) 100vw, 40vw"
                     style={{ aspectRatio: aspect }}
                     src={img.url!}

diff --git a/components/product/ProductVariantSelector.tsx b/components/product/ProductVariantSelector.tsx
@@ -8,11 +8,12 @@ interface Props {
 
 function VariantSelector({ product, product: { url } }: Props) {
   const possibilities = useVariantPossibilities(product);
-
+  // console.log(["product", product])
   return (
     <ul class="flex flex-col gap-5">
       {Object.keys(possibilities).map((name) => (
-        <li class="flex flex-col gap-[10px]">
+        <>{name !== "Cores" && (
+          <li class="flex flex-col gap-[10px]">
           <span class="text-xs text-base-300">{name}</span>
           <ul class="flex flex-row flex-wrap gap-[5px]">
             {Object.entries(possibilities[name]).map((
@@ -30,6 +31,8 @@ function VariantSelector({ product, product: { url } }: Props) {
             ))}
           </ul>
         </li>
+        )}
+        </> 
       ))}
     </ul>
   );

diff --git a/components/product/SimilarSelector.tsx b/components/product/SimilarSelector.tsx
@@ -0,0 +1,47 @@
+import type { Product } from "apps/commerce/types.ts";
+import { useVariantPossibilities } from "$store/sdk/useVariantPossiblities.ts";
+
+interface Props {
+  product: Product;
+}
+
+function SimilarSelector({ product, product: { isSimilarTo } }: Props) {
+const possibilities = useVariantPossibilities(product);
+  console.log(["product", product])
+  const productImage = product.image || []
+  return (
+    <ul class="flex flex-col gap-5">
+        {Object.keys(possibilities).map((name) => (
+        <li class="flex flex-col gap-[10px]">
+          <div class="flex gap-[5px]">
+            <span class="text-xs text-[#4A4B51] font-normal">Cor:</span>
+            {Object.entries(possibilities[name]).map((
+              [value],
+            ) => (
+              <span class="text-xs text-[#4A4B51] font-bold">{value}</span>
+            ))}
+          </div>
+          <ul class="flex flex-row flex-wrap gap-[10px]">
+            <li>
+                <div class="border-2 rounded-[5px] border-[#ED2A24]">
+                    <img class="w-[60px] h-[60px]" src={productImage[0].url}/>
+                </div>
+            </li>
+            {isSimilarTo?.map((similarProduct) => {
+                const image = similarProduct.image || []
+                return (
+                <li class="border-2 rounded-[5px] border-[#4A4B51]">
+                    <a href={similarProduct.url}>
+                        <img class="w-[60px] h-[60px]" src={image[0].url || ""}/>
+                    </a>
+                </li>
+                )
+            })}  
+          </ul>
+        </li>
+        ))}
+    </ul>
+  );
+}
+
+export default SimilarSelector;
diff --git a/deno.json b/deno.json
@@ -30,8 +30,8 @@
     "deco-sites/lojastopmoveis/": "./",
     "$store/": "./",
     "deco-sites/std/": "https://denopkg.com/deco-sites/[email protected]/",
-    "$live/": "https://denopkg.com/deco-cx/deco@1.57.28/",
-    "deco/": "https://denopkg.com/deco-cx/deco@1.57.28/",
+    "$live/": "https://denopkg.com/deco-cx/deco@1.60.25/",
+    "deco/": "https://denopkg.com/deco-cx/deco@1.60.25/",
     "$fresh/": "https://deno.land/x/[email protected]/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
@@ -41,7 +41,7 @@
     "std/": "https://deno.land/[email protected]/",
     "partytown/": "https://denopkg.com/deco-cx/[email protected]/",
     "daisyui": "npm:[email protected]",
-    "apps/": "https://denopkg.com/deco-cx/apps@0.35.16/"
+    "apps/": "https://denopkg.com/deco-cx/apps@0.36.0/"
   },
   "lint": {
     "rules": {