- {filter.label}
+ {filters
+ .filter(isToggle)
+ .map((filter) => (
+
+
+
+ {filter.label}
+
+
+
+
-
-
-
-
+ ))}
);
}
diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx
index 3699a2c..9723680 100644
--- a/components/search/SearchResult.tsx
+++ b/components/search/SearchResult.tsx
@@ -29,8 +29,6 @@ export interface Props {
cardLayout?: CardLayout;
/** @description 0 for ?page=0 as your first page */
startingPage?: 0 | 1;
- min: number;
- max: number;
}
function NotFound() {
@@ -65,8 +63,6 @@ function NotFound() {
}
function Result({
- min,
- max,
page,
layout,
cardLayout,
@@ -100,7 +96,6 @@ function Result({
{layout?.variant === "aside" && filters.length > 0 && (
@@ -129,11 +124,9 @@ function Result({
@@ -150,7 +143,7 @@ function Result({
item_list_id: breadcrumb.itemListElement?.at(-1)?.item,
items: page.products?.map((product, index) =>
mapProductToAnalyticsItem({
- ...useOffer(product.offers),
+ ...(useOffer(product.offers)),
index: offset + index,
product,
breadcrumbList: page.breadcrumb,
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 6a8f3bf..6e5cda3 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -26,7 +26,6 @@ import * as $Newsletter from "./islands/Newsletter.tsx";
import * as $OutOfStock from "./islands/OutOfStock.tsx";
import * as $ProductImageZoom from "./islands/ProductImageZoom.tsx";
import * as $ProductReview from "./islands/ProductReview.tsx";
-import * as $RangeFilter from "./islands/RangeFilter.tsx";
import * as $SearchControls from "./islands/SearchControls.tsx";
import * as $Shipping from "./islands/Shipping.tsx";
import * as $ShippingSimulation from "./islands/ShippingSimulation.tsx";
@@ -65,7 +64,6 @@ const manifest = {
"./islands/OutOfStock.tsx": $OutOfStock,
"./islands/ProductImageZoom.tsx": $ProductImageZoom,
"./islands/ProductReview.tsx": $ProductReview,
- "./islands/RangeFilter.tsx": $RangeFilter,
"./islands/SearchControls.tsx": $SearchControls,
"./islands/Shipping.tsx": $Shipping,
"./islands/ShippingSimulation.tsx": $ShippingSimulation,
diff --git a/islands/RangeFilter.tsx b/islands/RangeFilter.tsx
deleted file mode 100644
index f041f6c..0000000
--- a/islands/RangeFilter.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { useState, useEffect, useRef } from "preact/hooks";
-
-export interface Props {
- /** @description O valor minimo esta definido em R$0,00 se quiser mudar o valor preencher o campo abaixo */
- min?: number;
- /** @description O valor maximo esta definido em R$10.000,00 se quiser mudar o valor preencher o campo abaixo */
- max?: number;
- /** @hide step */
- step?: number;
-}
-
-const RangeFilter = ({ min = 0, max = 10000, step = 1 }: Props) => {
- const [rangeSliderMin, setRangeSliderMin] = useState
(min);
- const [rangeSliderMax, setRangeSliderMax] = useState(max);
-
- const rangeSliderRef = useRef(null);
-
- useEffect(() => {
- if (rangeSliderRef.current) {
- const rangeSlider = rangeSliderRef.current;
- const updateSlider = () => {
- const percentageMin = rangeSliderMin / max;
- const percentageMax = rangeSliderMax / max;
-
- rangeSlider.querySelector(
- ".range-slider-val-left"
- )!.style.width = `${percentageMin * 100}%`;
- rangeSlider.querySelector(
- ".range-slider-val-right"
- )!.style.width = `${(1 - percentageMax) * 100}%`;
- rangeSlider.querySelector(
- ".range-slider-val-range"
- )!.style.left = `${percentageMin * 100}%`;
- rangeSlider.querySelector(
- ".range-slider-val-range"
- )!.style.right = `${(1 - percentageMax) * 100}%`;
- rangeSlider.querySelector(
- ".range-slider-handle-left"
- )!.style.left = `${percentageMin * 100}%`;
- rangeSlider.querySelector(
- ".range-slider-handle-right"
- )!.style.left = `${percentageMax * 100}%`;
- rangeSlider.querySelector(
- ".range-slider-tooltip-left .range-slider-tooltip-text"
- )!.innerText = rangeSliderMin.toString();
- rangeSlider.querySelector(
- ".range-slider-tooltip-right .range-slider-tooltip-text"
- )!.innerText = rangeSliderMax.toString();
- };
-
- updateSlider();
-
- const handleLeftInputChange = (e: Event) => {
- const target = e.target as HTMLInputElement;
- const newValue = Math.min(
- parseInt(target.value, 10),
- rangeSliderMax - step
- );
- setRangeSliderMin(newValue);
- };
-
- const handleRightInputChange = (e: Event) => {
- const target = e.target as HTMLInputElement;
- const newValue = Math.max(
- parseInt(target.value, 10),
- rangeSliderMin + step
- );
- setRangeSliderMax(newValue);
- };
-
- rangeSlider
- .querySelector(".range-slider-input-left")!
- .addEventListener("input", handleLeftInputChange);
- rangeSlider
- .querySelector(".range-slider-input-right")!
- .addEventListener("input", handleRightInputChange);
-
- return () => {
- rangeSlider
- .querySelector(".range-slider-input-left")!
- .removeEventListener("input", handleLeftInputChange);
- rangeSlider
- .querySelector(".range-slider-input-right")!
- .removeEventListener("input", handleRightInputChange);
- };
- }
- }, [rangeSliderMin, rangeSliderMax, max, step]);
-
- return (
-
- );
-};
-
-export default RangeFilter;
diff --git a/tailwind.css b/tailwind.css
index 73aa255..221f3e0 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -3,6 +3,7 @@
@tailwind utilities;
@layer base {
+
/* Allow changing font family via CMS */
html {
font-family: var(--font-family);
@@ -13,8 +14,8 @@
}
/** Remove default styles from input[type=number] */
- input[type="number"]::-webkit-inner-spin-button,
- input[type="number"]::-webkit-outer-spin-button {
+ input[type=number]::-webkit-inner-spin-button,
+ input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
@@ -28,212 +29,15 @@
}
.group:disabled .group-disabled\:animate-progress {
- animation: progress-frame ease normal;
+ animation: progress-frame ease normal
}
@keyframes progress-frame {
0% {
- --dot-progress: 0%;
+ --dot-progress: 0%
}
to {
- --dot-progress: 100%;
+ --dot-progress: 100%
}
-}
-
-:root {
- --ColorPrimaryDk: #164195;
- --ColorPrimaryLt: #164195;
-}
-
-.range-slider {
- --range-slider-common-height: 12px;
- --range-slider-handle-width: 20px;
- --range-slider-handle-height: 20px;
-
- position: relative;
- display: flex;
- align-items: center;
- width: 99%;
- height: 100%;
-}
-
-.range-slider > div {
- position: absolute;
- display: flex;
- align-items: center;
- left: 13px;
- right: 15px;
- height: var(--range-slider-common-height);
-}
-
-.range-slider > div > .range-slider-val-left,
-.range-slider > div > .range-slider-val-right,
-.range-slider > div > .range-slider-val-range {
- height: 10px;
-}
-
-.range-slider > div > .range-slider-val-left {
- position: absolute;
- left: 0;
- border-radius: 10px;
- background-color: #ccc;
- margin: 0 7px;
-}
-
-.range-slider > div > .range-slider-val-right {
- position: absolute;
- right: 0;
- margin: 0 7px;
- border-radius: 10px;
- background-color: #ccc;
-}
-
-.range-slider > div > .range-slider-val-range {
- position: absolute;
- left: 0;
- top: -2px;
- height: 14px;
- border-radius: 14px;
- background-color: var(--ColorPrimaryLt);
-}
-
-.range-slider > div > .range-slider-handle {
- z-index: 1;
- position: absolute;
- top: -5px;
- margin-left: -11px;
- width: var(--range-slider-handle-width);
- height: var(--range-slider-handle-height);
- border-radius: 25%;
- background-color: #fff;
- text-align: left;
-
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
- outline: none;
- cursor: pointer;
-}
-
-div.range-slider > input[type="range"]::-ms-thumb {
- width: var(--range-slider-handle-width);
- height: var(--range-slider-handle-height);
- border: 0 none;
- border-radius: 0px;
- background: red;
-
- pointer-events: all;
-}
-
-div.range-slider > input[type="range"]::-moz-range-thumb {
- width: var(--range-slider-handle-width);
- height: var(--range-slider-handle-height);
- border: 0 none;
- border-radius: 0px;
- background: red;
-
- pointer-events: all;
-}
-
-div.range-slider > input[type="range"]::-webkit-slider-thumb {
- width: var(--range-slider-handle-width);
- height: var(--range-slider-handle-height);
- border: 0 none;
- border-radius: 0px;
- background: red;
-
- pointer-events: all;
- -webkit-appearance: none;
-}
-
-div.range-slider > input[type="range"]::-ms-fill-lower {
- background: transparent;
- border: 0 none;
-}
-
-div.range-slider > input[type="range"]::-ms-fill-upper {
- background: transparent;
- border: 0 none;
-}
-
-.range-slider > input[type="range"] {
- z-index: 1;
- position: absolute;
- width: 100%;
- height: var(--range-slider-common-height);
-
- opacity: 0;
- filter: alpha(opacity=0);
- cursor: pointer;
- pointer-events: none;
- -webkit-appearance: none;
-}
-
-div.range-slider > input[type="range"]::-ms-track {
- background: transparent;
- color: transparent;
-
- -webkit-appearance: none;
-}
-
-div.range-slider > input[type="range"]::-moz-range-track {
- background: transparent;
- color: transparent;
-
- -moz-appearance: none;
-}
-
-div.range-slider > input[type="range"]:focus::-webkit-slider-runnable-track {
- background: transparent;
- border: transparent;
-}
-
-div.range-slider > input[type="range"]:focus {
- outline: none;
-}
-
-div.range-slider > input[type="range"]::-ms-tooltip {
- display: none;
-}
-
-.range-slider > div > .range-slider-tooltip {
- z-index: 2;
- position: absolute;
- top: -42px;
- margin-left: -12px;
- width: 28px;
- height: 28px;
- border-radius: 28px;
- background-color: var(--ColorPrimaryLt);
- color: #fff;
- text-align: center;
-
- opacity: 0;
-}
-
-.range-slider > div > .range-slider-tooltip:after {
- content: "";
-
- position: absolute;
- left: 0;
- top: 19px;
- border-left: 14px solid transparent;
- border-right: 14px solid transparent;
- border-top-width: 16px;
- border-top-style: solid;
- border-top-color: var(--ColorPrimaryLt);
- border-radius: 16px;
- opacity:0;
-}
-
-.range-slider > div > .range-slider-tooltip > span {
- font-size: 12px;
- font-weight: 700;
- line-height: 28px;
-}
-
-/* .range-slider:hover > div > .range-slider-tooltip {
- opacity: 1;
-} */
- .range-slider-tooltip-text{
- opacity:0;
- }
\ No newline at end of file
+}
\ No newline at end of file