feat: clearFilters adicionado

deco-sites · Apr 25, 2024 · d45e39e · d45e39e
1 parent b0373ac
commit d45e39e
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 27 deletions.
diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx
@@ -37,7 +37,7 @@ function NavItem({ item }: { item: SiteNavigationElement }) {
       {children && children.length > 0 &&
         (
           <div
-            class="absolute hidden hover:flex group-hover:flex bg-base-100 z-50 items-start justify-center gap-6 border-t border-b-2 border-base-200 w-screen"
+            class="h-[55vh] overflow-hidden overflow-y-auto absolute hidden hover:flex group-hover:flex bg-base-100 z-50 items-start justify-center gap-6 border-t border-b-2 border-base-200 w-screen"
             style={{ top: "0px", left: "0px", marginTop: "60px" }}
           >
             {image?.url && (
@@ -50,18 +50,18 @@ function NavItem({ item }: { item: SiteNavigationElement }) {
                 loading="lazy"
               />
             )}
-            <ul class="flex items-start justify-center gap-6">
+            <ul class="flex items-start justify-center gap-6 first-submenu">
               {children.map((node) => (
                 <li class="p-6">
                   <a class="hover:underline" href={node.url}>
                     <span>{node.name}</span>
                   </a>
 
-                  <ul class="flex flex-col gap-1 mt-4 max-h-80 overflow-hidden overflow-y-auto">
+                  <ul class="flex flex-col gap-1 mt-4 max-h-80">
                     {node.children?.map((leaf) => (
                       <li>
                         <a class="hover:underline" href={leaf.url}>
-                          <span class="text-xs">{leaf.name}</span>
+                          <span class="text-xs font-bold">{leaf.name}</span>
                         </a>
                         {leaf.children && (
                           <ul>

diff --git a/components/product/ProductCardCustom.tsx b/components/product/ProductCardCustom.tsx
@@ -125,7 +125,7 @@ function ProductCardCustom(
   return (
     <div
       id={id}
-      class={`card card-compact group w-full ${
+      class={`card card-compact group w-full md:w-[23%] ${
         align === "center" ? "text-center" : "text-start"
       } ${l?.onMouseOver?.showCardShadow ? "lg:hover:card-bordered" : ""}
         ${
@@ -284,7 +284,7 @@ function ProductCardCustom(
               href={brand?.url}
             >
               <img
-                style={{ maxWidth: "100px" }}
+                style={{ maxWidth: "100px", maxHeight: "20px" }}
                 src={brand?.logo}
                 alt={brand?.name}
                 width={100}

diff --git a/components/search/Filters.tsx b/components/search/Filters.tsx
@@ -7,13 +7,13 @@ import type {
   ProductListingPage,
 } from "apps/commerce/types.ts";
 import { parseRange } from "apps/commerce/utils/filters.ts";
+import ClearFilters from "deco-sites/tools-dna/islands/ClearFilters.tsx";
 
 interface Props {
   filters: ProductListingPage["filters"];
 }
 
-const isToggle = (filter: Filter): filter is FilterToggle =>
-  filter["@type"] === "FilterToggle";
+const isToggle = (filter: Filter): filter is FilterToggle => filter["@type"] === "FilterToggle";
 
 function ValueItem(
   { url, selected, label, quantity }: FilterToggleValue,
@@ -74,24 +74,25 @@ function FilterValues({ key, values }: FilterToggle) {
 function Filters({ filters }: Props) {
   return (
     <ul class="flex flex-col gap-6 py-4">
-      {/* {filters
-        .filter(isToggle)
-        .map((filter) => {
-          const values = filter.values;
-          values.map((item) => {
-            if(item.selected) {
-                <div class="collapse collapse-plus">
-                  <input type="checkbox" />
-                  <div class="mb-2.5 rounded-none border-b-[#e9e9e9] border-b border-solid collapse-title font-semibold text-[18px] leading-9 after:!w-[30px] after:!h-[30px] after:!flex after:!items-center after:!justify-center after:rounded-md after:border after:border-solid after:border-[#164195]">
-                    SELECIONADOS
-                  </div>
-                  <div class="collapse-content">
-                    <ValueItem {...item} />
-                  </div>
-                </div>
-            }
-          })
-        })} */}
+
+      <div class="collapse collapse-plus">
+        <input type="checkbox" />
+        <div class="mb-2.5 rounded-none border-b-[#e9e9e9] border-b border-solid collapse-title font-semibold text-[18px] leading-9 after:!w-[30px] after:!h-[30px] after:!flex after:!items-center after:!justify-center after:rounded-md after:border after:border-solid after:border-[#164195]">
+          SELECIONADOS
+        </div>
+        <div class="collapse-content">
+          {filters.filter(isToggle)
+            .map((filter) => (
+              filter.values.map((item) => (
+                item.selected && (
+                  <FilterValues {...filter} />
+                )
+              ))
+            ))}
+            <ClearFilters />
+        </div>
+      </div>
+
       {filters
         .filter(isToggle)
         .map((filter) => (

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -9,6 +9,7 @@ import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx
 import * as $AddToCartButton_vnda from "./islands/AddToCartButton/vnda.tsx";
 import * as $AddToCartButton_vtex from "./islands/AddToCartButton/vtex.tsx";
 import * as $AddToCartButton_wake from "./islands/AddToCartButton/wake.tsx";
+import * as $ClearFilters from "./islands/ClearFilters.tsx";
 import * as $Counter from "./islands/Counter.tsx";
 import * as $CustomBreadCrumb from "./islands/CustomBreadCrumb.tsx";
 import * as $Header_Buttons from "./islands/Header/Buttons.tsx";
@@ -44,6 +45,7 @@ const manifest = {
     "./islands/AddToCartButton/vnda.tsx": $AddToCartButton_vnda,
     "./islands/AddToCartButton/vtex.tsx": $AddToCartButton_vtex,
     "./islands/AddToCartButton/wake.tsx": $AddToCartButton_wake,
+    "./islands/ClearFilters.tsx": $ClearFilters,
     "./islands/Counter.tsx": $Counter,
     "./islands/CustomBreadCrumb.tsx": $CustomBreadCrumb,
     "./islands/Header/Buttons.tsx": $Header_Buttons,

diff --git a/islands/ClearFilters.tsx b/islands/ClearFilters.tsx
@@ -0,0 +1,11 @@
+function ClearFilters() {
+  const resetParams = () => {
+      const urlParam = globalThis.location.href.split(/[?#]/)[0];
+      globalThis.location.href = urlParam;
+  }
+  return (
+      <button class="btn btn-block" onClick={resetParams}>LIMPAR TODOS OS FILTROS</button>
+  )
+}
+
+export default ClearFilters;
diff --git a/sections/Product/CustomOddGrid.tsx b/sections/Product/CustomOddGrid.tsx
@@ -1 +1,9 @@
 export { default } from "$store/components/product/CustomOddGrid.tsx";
+
+export function LoadingFallback() {
+    return (
+      <div style={{ height: "716px" }} class="flex justify-center items-center">
+        <span class="loading loading-spinner" />
+      </div>
+    );
+  }
diff --git a/sections/Product/CustomShelfGrid.tsx b/sections/Product/CustomShelfGrid.tsx
@@ -1 +1,9 @@
 export { default } from "$store/components/product/CustomShelfGrid.tsx";
+
+export function LoadingFallback() {
+    return (
+      <div style={{ height: "716px" }} class="flex justify-center items-center">
+        <span class="loading loading-spinner" />
+      </div>
+    );
+  }
diff --git a/sections/Product/CustomShelfSlider.tsx b/sections/Product/CustomShelfSlider.tsx
@@ -1 +1,9 @@
 export { default } from "$store/components/product/CustomShelfSlider.tsx";
+
+export function LoadingFallback() {
+    return (
+      <div style={{ height: "716px" }} class="flex justify-center items-center">
+        <span class="loading loading-spinner" />
+      </div>
+    );
+  }
diff --git a/static/style.css b/static/style.css
@@ -102,6 +102,50 @@
     padding: 1px 15px
 }
 
+/* .categories-items:first-child .first-submenu {
+    flex-direction: column;
+    width: 100%;
+    align-items: flex-start;
+}
+.categories-items:first-child .first-submenu > li {
+    padding: .5rem;
+    position: relative;
+}
+.categories-items:first-child .first-submenu > li > ul {
+    display: none;
+    border-radius: 7px 0 0 7px !important;
+    background-color: #fff;
+    z-index: 9;
+    top: 5px !important;
+    left: 95% !important;
+    margin-left: 40px;
+    position: absolute;
+    border: 1px solid #333333;
+    width: 100%;
+}
+.categories-items:first-child .first-submenu > li:hover > ul {
+    display: flex;
+}
+.categories-items:first-child .first-submenu > li > ul > li {
+    position: relative;
+}
+.categories-items:first-child .first-submenu > li > ul > li > ul {
+    display: none;
+    border-radius: 7px 0 0 7px !important;
+    background-color: #fff;
+    z-index: 9;
+    top: 5px !important;
+    left: 95% !important;
+    position: absolute;
+    border: 1px solid #333333;
+    width: 100%;
+    flex-direction: column;
+    margin-left: 40px;
+}
+.categories-items:first-child .first-submenu > li > ul > li:hover > ul {
+    display: flex;
+} */
+
 .categories-items:first-child svg,
 .newsletter-content .form-content .text-sm {
     display: none

diff --git a/static/tailwind.css b/static/tailwind.css