feat: new filter on top of search results

.deco/blocks/pages-Landing%2520Page%2520(Kids)-181633.json

@@ -42,13 +42,10 @@
           },
           "variant": "aside",
           "pagination": "show-more",
-          "filters": {
-            "color": {
+          "filter": {
+            "colors": {
               "__resolveType": "Saved Colors"
             }
-          },
-          "filter": {
-            "__resolveType": "Saved Colors"
           }
         },
         "startingPage": 1,

.deco/blocks/pages-PLP%253A%2520Bazar%253A%2520Meninas-817508.json

@@ -0,0 +1,147 @@
+{
+  "__resolveType": "website/pages/Page.tsx",
+  "seo": {
+    "__resolveType": "website/sections/Seo/SeoV2.tsx"
+  },
+  "sections": [
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "commerce/sections/Seo/SeoPLPV2.tsx",
+        "jsonLD": {
+          "__resolveType": "PLP Loader"
+        }
+      }
+    },
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "Header"
+      }
+    },
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "site/sections/Product/SearchResult.tsx",
+        "page": {
+          "__resolveType": "vtex/loaders/intelligentSearch/productListingPage.ts",
+          "count": 24,
+          "sort": "release:desc",
+          "fuzzy": "automatic",
+          "selectedFacets": [],
+          "hideUnavailableItems": true
+        },
+        "layout": {
+          "columns": {
+            "mobile": 2,
+            "desktop": 4
+          },
+          "variant": "aside",
+          "pagination": "show-more",
+          "filter": {
+            "colors": {
+              "__resolveType": "Saved Colors"
+            }
+          },
+          "enableSpecialFilter": true
+        },
+        "startingPage": 1,
+        "seoComponents": {
+          "banner": {
+            "title": "Bazar",
+            "subtitle": "Meninas",
+            "description": "<p><span>Lorem ipsum dolor sit amet consectetur. Urna massa diam feugiat eleifend integer mattis.</span></p>",
+            "image": {
+              "desktop": {
+                "src": "https://data.decoassets.com/alphabeto/8064e5bc-d61b-42fd-920d-10c59ee61526/Banner-principal-(1).png",
+                "width": 1360,
+                "height": 230
+              },
+              "alt": "A imagem mostra uma menina sorridente com cabelos castanhos lisos e franja, usando uma jaqueta jeans azul. O fundo é rosa vibrante, decorado com estrelas amarelas e linhas curvas como arco-íris no canto direito. O visual transmite alegria e energia, com tons quentes e elementos lúdicos.",
+              "mobile": {
+                "src": "https://data.decoassets.com/alphabeto/ba2be877-4a89-4ece-b26d-b3d4cc410814/Banner-principal-(2).png",
+                "width": 335,
+                "height": 200
+              }
+            }
+          },
+          "breadcrumb": [
+            {
+              "url": "/bazar",
+              "name": "Bazar"
+            },
+            {
+              "name": "Meninas",
+              "url": "/meninas/bazar"
+            }
+          ]
+        }
+      }
+    },
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "site/sections/Category/CategoryBottomBanner.tsx",
+        "text": "<h2>Os melhores conjuntinhos</h2><p></p><p>Lorem ipsum dolor sit amet consectetur. Urna massa diam feugiat eleifend integer mattis. Mauris pharetra sed pellentesque in tristique. Dolor pellentesque nunc tempus risus libero elementum. Tellus nisi pharetra tortor sociis cursus odio. Tempor placerat in consequat in amet. Adipiscing et a condimentum libero senectus nisi. Elementum pretium metus a cursus. Senectus auctor pellentesque feugiat neque augue faucibus sed. Aliquam suspendisse platea eget amet.</p><p></p><h2><span>Tecidos direto da fábrica</span></h2><p></p><p><span>Lorem ipsum dolor sit amet consectetur. Urna massa diam feugiat eleifend integer mattis. Mauris pharetra sed pellentesque in tristique. Dolor pellentesque nunc tempus risus libero elementum. Tellus nisi pharetra tortor sociis cursus odio. Tempor placerat in consequat in amet. Adipiscing et a condimentum libero senectus nisi. Elementum pretium metus a cursus. Senectus auctor pellentesque feugiat neque augue faucibus sed. Aliquam suspendisse platea eget amet.</span></p>",
+        "image": {
+          "desktop": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/alphabeto/96259462-e7ec-4338-bfc5-331a32b622aa/image_categoria.png",
+          "mobile": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/alphabeto/ac67ce29-d4e2-4950-8ea4-d0b8b2433519/image_categoria_mob.png",
+          "alt": "A imagem mostra duas meninas sorridentes posando em frente a um fundo laranja vibrante com um grande círculo texturizado rosa ao centro. A menina à esquerda usa uma roupa colorida com estampas divertidas, jaqueta clara e tiara. A menina à direita veste blusa preta e saia rosa. O ambiente é alegre e lúdico."
+        }
+      }
+    },
+    {
+      "__resolveType": "site/sections/Miscellaneous/Spacer.tsx"
+    },
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "site/sections/Content/FAQ.tsx",
+        "title": "Dúvidas frequentes",
+        "description": "<p><span>Ainda está com dúvida? Nos mande um e-mail e logo entraremos em contato com você o mais rápido possível. </span><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"/central-atendimento\"><span>Fale conosco!</span></a></p>",
+        "enableJSONLD": true,
+        "questions": [
+          {
+            "title": "Pedido veio com embalagem aberta, posso trocar?",
+            "description": "<p>Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor. Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor.</p>"
+          },
+          {
+            "title": "Quais os métodos de pagamento?",
+            "description": "<p>Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor. Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor.</p>"
+          },
+          {
+            "title": "Comprei o produto errado, posso realizar a troca?",
+            "description": "<p>Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor. Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor.</p>"
+          },
+          {
+            "title": "Comprar com o combo saí mais barato?",
+            "description": "<p>Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor. Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor.</p>"
+          },
+          {
+            "title": "Ganho descontos se comprar mais de um?",
+            "description": "<p>Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor. Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor.</p>"
+          },
+          {
+            "title": "Como utilizo meu código promocional?",
+            "description": "<p>Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor. Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor.</p>"
+          },
+          {
+            "title": "Posso tomar todos os dias?",
+            "description": "<p>Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor. Lorem ipsum dolor sit amet consectetur. Nulla ultrices tortor id quis sit varius risus. Ut commodo urna rhoncus nisl. Enim eget lobortis elit at sed viverra. Et integer augue mauris duis massa dignissim tortor.</p>"
+          }
+        ]
+      }
+    },
+    {
+      "__resolveType": "site/sections/Miscellaneous/Spacer.tsx"
+    },
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "Footer"
+      }
+    }
+  ],
+  "name": "PLP: Bazar: Meninas",
+  "path": "/meninas/bazar"
+}

components/search/CategoryBanner.tsx

@@ -64,7 +64,7 @@ export default function CategoryBanner(props: Props) {
   if (!image?.src) return null;
 
   return (
-    <article class="relative">
+    <article class="relative mb-5">
       <Image
         class="w-full h-auto rounded-lg min-h-[200px] desk:min-h-[230px] object-cover"
         src={image.src}

components/search/Filters/AgeFilter.tsx

@@ -0,0 +1,22 @@
+import { FilterToggle } from "apps/commerce/types.ts";
+import { clx } from "site/sdk/clx.ts";
+
+export default function AgeFilter({ values }: FilterToggle) {
+  return (
+    <div class="carousel flex gap-12 w-fit max-w-[calc(100vw_-_40px)] mx-auto">
+      {values.map((value) => (
+        <a
+          href={value.url}
+          class={clx(
+            "rounded-full text-base leading-6 font-bold w-20 h-20 flex items-center justify-center text-primary break-all p-1 text-center carousel-item",
+            value.selected
+              ? "border border-primary bg-[#F7E0BF]"
+              : "bg-secondary-content",
+          )}
+        >
+          {value.label}
+        </a>
+      ))}
+    </div>
+  );
+}

components/search/SearchResult.tsx

@@ -1,6 +1,6 @@
 import { type SectionProps } from "@deco/deco";
 import { useDevice, useScript, useSection } from "@deco/deco/hooks";
-import type { ProductListingPage } from "apps/commerce/types.ts";
+import type { FilterToggle, ProductListingPage } from "apps/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
 import ProductCard from "site/components/product/ProductCard.tsx";
 import CategoryBanner, {
@@ -25,6 +25,9 @@ import { clx } from "site/sdk/clx.ts";
 import { useId } from "site/sdk/useId.ts";
 import { useOffer } from "site/sdk/useOffer.ts";
 import { useSendEvent } from "site/sdk/useSendEvent.ts";
+import AgeFilter from "site/components/search/Filters/AgeFilter.tsx";
+
+const AGE_FILTER_KEY = "category-2";
 
 export interface Layout {
   /**
@@ -37,6 +40,11 @@ export interface Layout {
    * @description Settings About The Filters
    */
   filter?: FilterSettings;
+  /**
+   * @title Enable Special	Filter
+   * @description Enables special filter on top of search results
+   */
+  enableSpecialFilter?: boolean;
 }
 export interface Props {
   /**
@@ -263,6 +271,10 @@ function Result(props: SectionProps<typeof loader>) {
     colors: [],
   };
 
+  const ageFilter = filters.find((filter) => filter.key === AGE_FILTER_KEY) as
+    | FilterToggle
+    | undefined;
+
   return (
     <>
       <div id={container} {...viewItemListEvent} class="w-full">
@@ -313,7 +325,7 @@ function Result(props: SectionProps<typeof loader>) {
                 </Drawer>
               )}
 
-              <div class="grid grid-cols-1 desk:grid-cols-[265px_1fr] desk:gap-20 mt-5">
+              <div class="grid grid-cols-1 desk:grid-cols-[265px_1fr] desk:gap-20">
                 {device === "desktop" && (
                   <aside class="place-self-start flex flex-col gap-9">
                     <div>
@@ -327,7 +339,10 @@ function Result(props: SectionProps<typeof loader>) {
                   </aside>
                 )}
 
-                <div class="flex flex-col gap-9">
+                <div class="flex flex-col gap-10">
+                  {(ageFilter && props.layout?.enableSpecialFilter)
+                    ? <AgeFilter {...ageFilter} />
+                    : null}
                   <PageResult {...props} />
                 </div>
               </div>

fresh.gen.ts

@@ -2,7 +2,8 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import type { Manifest } from "$fresh/server.ts";
+import * as $_app from "./routes/_app.tsx";
+import * as $Map from "./islands/Map.tsx";
 import * as $MenuInstitutionalMobile from "./islands/MenuInstitutionalMobile.tsx";
 import * as $MinicartFooter from "./islands/MinicartFooter.tsx";
 import * as $MultiRangeSlider from "./islands/MultiRangeSlider.tsx";
@@ -13,13 +14,15 @@ import * as $ScrollButton from "./islands/ScrollButton.tsx";
 import * as $Selector from "./islands/Selector.tsx";
 import * as $ShowPriceItem from "./islands/ShowPriceItem.tsx";
 import * as $StarSelector from "./islands/StarSelector.tsx";
-import * as $_app from "./routes/_app.tsx";
+import * as $formsNossasLojas from "./islands/formsNossasLojas.tsx";
+import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
     "./routes/_app.tsx": $_app,
   },
   islands: {
+    "./islands/Map.tsx": $Map,
     "./islands/MenuInstitutionalMobile.tsx": $MenuInstitutionalMobile,
     "./islands/MinicartFooter.tsx": $MinicartFooter,
     "./islands/MultiRangeSlider.tsx": $MultiRangeSlider,
@@ -30,6 +33,7 @@ const manifest = {
     "./islands/Selector.tsx": $Selector,
     "./islands/ShowPriceItem.tsx": $ShowPriceItem,
     "./islands/StarSelector.tsx": $StarSelector,
+    "./islands/formsNossasLojas.tsx": $formsNossasLojas,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;