feat: new improvements added

deco-sites · May 28, 2024 · bb6021a · bb6021a
1 parent caa076a
commit bb6021a
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 10 deletions.
diff --git a/components/product/BuyTogether/Card.tsx b/components/product/BuyTogether/Card.tsx
@@ -11,13 +11,13 @@ export interface Props {
   hasViewProductLink?: boolean;
 }
 
-const WIDTH = 183;
+const WIDTH = 192;
 const HEIGHT = 183;
 
 export default function BuyTogetherCard(
   { product, hasViewProductLink = false }: Props,
 ) {
-  const { url, name, image: images, offers } = product;
+  const { url, name, image: images, offers, isVariantOf } = product;
   const [front] = images ?? [];
   const { listPrice, price } = useOffer(offers);
 
@@ -42,7 +42,7 @@ export default function BuyTogetherCard(
             alt={front.alternateName}
             width={WIDTH}
             height={HEIGHT}
-            class="col-span-full row-span-full rounded w-full"
+            class="col-span-full row-span-full rounded w-full h-[183px] object-contain"
             sizes="(max-width: 640px) 50vw, 20vw"
             loading="lazy"
             decoding="async"
@@ -53,7 +53,7 @@ export default function BuyTogetherCard(
       <div class="flex flex-col gap-1 pt-3 border-l border-l-white-base xl:border-l-0 xl:border-t xl:border-t-white-base h-full justify-between">
         <h2
           class="line-clamp-3 text-sm text-black-neutral uppercase font-medium leading-4"
-          dangerouslySetInnerHTML={{ __html: name ?? "" }}
+          dangerouslySetInnerHTML={{ __html: isVariantOf?.name ?? name ?? "" }}
         />
 
         {hasViewProductLink && (

diff --git a/components/product/Gallery/ImageSlider.tsx b/components/product/Gallery/ImageSlider.tsx
@@ -46,7 +46,7 @@ export default function GallerySlider(props: Props) {
               class="carousel-item w-full"
             >
               <Image
-                class="w-full"
+                class="w-full object-contain"
                 sizes="(max-width: 640px) 100vw, 40vw"
                 style={{ aspectRatio }}
                 src={img.url!}

diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
@@ -119,7 +119,7 @@ function ProductCard({
             alt={front.alternateName}
             width={WIDTH}
             height={HEIGHT}
-            class="col-span-full row-span-full rounded w-full"
+            class="col-span-full row-span-full rounded w-full xl:h-[300px] object-contain"
             sizes="(max-width: 640px) 50vw, 20vw"
             preload={preload}
             loading={preload ? "eager" : "lazy"}

diff --git a/components/product/ProductDescription.tsx b/components/product/ProductDescription.tsx
@@ -39,7 +39,8 @@ export default function ProductDescription({ page }: Props) {
             </h3>
 
             {isVariantOf?.additionalProperty?.filter((item) =>
-              item.name !== "sellerId"
+              item.name !== "sellerId" &&
+              !item.name?.toLowerCase().includes("selecione a opção de")
             )?.map((property) => (
               <div class="even:bg-[#EEEEEE] odd:bg-white-normal grid grid-cols-2 w-full text-sm leading-6 px-4">
                 <span class="text-[#444] font-bold">{property.name}</span>

diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
@@ -82,10 +82,10 @@ function ProductShelf({
           class={clx(
             "grid",
             layout?.showArrows && "grid-cols-[48px_1fr_48px]",
-            "px-0 md:px-5 container",
+            "px-2 md:px-5 container",
           )}
         >
-          <Slider class="carousel carousel-center sm:gap-1 lg:gap-4 row-start-2 row-end-5">
+          <Slider class="carousel carousel-center gap-1 lg:gap-4 row-start-2 row-end-5">
             {products?.map((product, index) => (
               <Slider.Item
                 index={index}

diff --git a/components/product/ProductVariantSelector.tsx b/components/product/ProductVariantSelector.tsx
@@ -21,7 +21,7 @@ function VariantSelector({ product }: Props) {
           return (
             <li class="flex flex-col gap-2">
               <span class="text-sm font-medium text-black-neutral">{name}</span>
-              <ul class="flex flex-row gap-3">
+              <ul class="flex flex-wrap flex-row gap-3">
                 {Object.entries(possibilities[name]).map(([value, link]) => {
                   const relativeUrl = relative(url);
                   const relativeLink = relative(link);