diff --git a/essenza/templates/base.html b/essenza/templates/base.html
index bed837f..32e9948 100644
--- a/essenza/templates/base.html
+++ b/essenza/templates/base.html
@@ -169,6 +169,54 @@
display: block;
}
+ /* ====== FILTERS (shared styles for pages) ====== */
+ .filters-bar {
+ max-width: 1100px;
+ margin: 16px auto 0;
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ padding: 0 24px;
+ justify-content: center;
+ }
+
+ .filter-select {
+ padding: 10px 16px;
+ border-radius: 24px;
+ background: linear-gradient(145deg, #ffffff 0%, #fef9f5 100%);
+ border: 2.5px solid #c06b3e;
+ color: #8b5a3c;
+ font-weight: 700;
+ font-size: 14px;
+ cursor: pointer;
+ box-shadow: 0 4px 12px rgba(192, 107, 62, 0.12), inset 0 1px 2px rgba(255,255,255,0.8);
+ appearance: none;
+ }
+
+ .filter-select:focus {
+ outline: none;
+ box-shadow: 0 6px 20px rgba(192,107,62,0.18);
+ }
+
+ .filter-select.small {
+ padding: 8px 12px;
+ border-radius: 12px;
+ font-size: 13px;
+ min-width: 160px;
+ }
+
+ .sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+ }
+
/* ====== ESCAPARATE ====== */
main {
max-width: 1100px;
@@ -261,6 +309,186 @@
}
/* FIN ESTILOS AÑADIDOS */
+ .filters {
+ max-width: 1100px;
+ margin: 25px auto 0 auto;
+ display: flex;
+ justify-content: center;
+ gap: 80px;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ }
+
+ /* Custom Dropdown Container */
+ .custom-dropdown {
+ position: relative;
+ min-width: 220px;
+ max-width: 280px;
+ user-select: none;
+ flex-shrink: 0;
+
+ }
+
+ /* Dropdown Button */
+ .dropdown-button {
+ padding: 12px 40px 12px 20px;
+ border-radius: 25px;
+ background: linear-gradient(145deg, #ffffff 0%, #fef9f5 100%);
+ border: 2.5px solid #c06b3e;
+ color: #8b5a3c;
+ font-weight: 700;
+ font-size: 14px;
+ letter-spacing: 0.5px;
+ cursor: pointer;
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 4px 12px rgba(192, 107, 62, 0.2),
+ inset 0 1px 2px rgba(255, 255, 255, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ position: relative;
+ }
+
+ .dropdown-button:hover {
+ border-color: #d77b46;
+ box-shadow: 0 6px 20px rgba(192, 107, 62, 0.35),
+ inset 0 1px 3px rgba(255, 255, 255, 0.9);
+ transform: translateY(-3px) scale(1.02);
+ background: linear-gradient(145deg, #ffffff 0%, #fff5ed 100%);
+ }
+
+ .dropdown-button.active {
+ border-color: #c06b3e;
+ box-shadow: 0 8px 24px rgba(192, 107, 62, 0.4),
+ 0 0 0 4px rgba(192, 107, 62, 0.15);
+ background: #fff;
+ transform: translateY(-3px) scale(1.02);
+ }
+
+ /* Dropdown Arrow */
+ .dropdown-arrow {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ right: 16px;
+ transition: transform 0.3s ease;
+ stroke: #c06b3e;
+ stroke-width: 3.5;
+ }
+
+ .dropdown-button.active .dropdown-arrow {
+ transform: rotate(180deg);
+ }
+
+ /* Dropdown Menu */
+ .dropdown-menu {
+ position: absolute;
+ top: calc(100% + 8px);
+ left: 0;
+ right: 0;
+ transform: translateY(-10px);
+ background: white;
+ border-radius: 20px;
+ border: 3px solid #c06b3e;
+ box-shadow: 0 12px 32px rgba(192, 107, 62, 0.25);
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 1000;
+ overflow: hidden;
+ max-height: 300px;
+ overflow-y: auto;
+ white-space: nowrap;
+ }
+
+ .dropdown-menu.show {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+ }
+
+ /* Dropdown Items */
+ .dropdown-item {
+ padding: 12px 28px;
+ color: #8b5a3c;
+ font-weight: 600;
+ font-size: 15px;
+ letter-spacing: 0.3px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ border-bottom: 1px solid #f5e6dc;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .dropdown-item:last-child {
+ border-bottom: none;
+ }
+
+ .dropdown-item:hover {
+ background: linear-gradient(135deg, #fff5ed 0%, #ffeee0 100%);
+ color: #c06b3e;
+ padding-left: 32px;
+ }
+
+ .dropdown-item.selected {
+ background: linear-gradient(135deg, #c06b3e 0%, #d77b46 100%);
+ color: #fff;
+ font-weight: 800;
+ }
+
+ .dropdown-item.selected:hover {
+ background: linear-gradient(135deg, #d77b46 0%, #e88a55 100%);
+ padding-left: 28px;
+ }
+
+ /* Check Icon for Selected Item */
+ .dropdown-item .check-icon {
+ width: 18px;
+ height: 18px;
+ stroke: white;
+ stroke-width: 3;
+ opacity: 0;
+ transition: opacity 0.2s;
+ }
+
+ .dropdown-item.selected .check-icon {
+ opacity: 1;
+ }
+
+ /* Scrollbar styling */
+ .dropdown-menu::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ .dropdown-menu::-webkit-scrollbar-track {
+ background: #fef9f5;
+ border-radius: 10px;
+ }
+
+ .dropdown-menu::-webkit-scrollbar-thumb {
+ background: #c06b3e;
+ border-radius: 10px;
+ }
+
+ .dropdown-menu::-webkit-scrollbar-thumb:hover {
+ background: #d77b46;
+ }
+
+ .sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+ }
+
/* Responsive */
@media (max-width: 768px) {
header {
diff --git a/essenza/templates/product/catalog.html b/essenza/templates/product/catalog.html
index 30747e2..4a4d727 100644
--- a/essenza/templates/product/catalog.html
+++ b/essenza/templates/product/catalog.html
@@ -36,24 +36,179 @@
margin: 25px auto 0 auto;
display: flex;
justify-content: center;
- gap: 12px;
+ gap: 80px;
flex-wrap: wrap;
+ align-items: flex-start;
}
- .filter-btn {
- padding: 10px 18px;
- border-radius: 20px;
+ /* Custom Dropdown Container */
+ .custom-dropdown {
+ position: relative;
+ min-width: 220px;
+ max-width: 280px;
+ user-select: none;
+ flex-shrink: 0;
+
+ }
+
+ /* Dropdown Button */
+ .dropdown-button {
+ padding: 12px 40px 12px 20px;
+ border-radius: 25px;
+ background: linear-gradient(145deg, #ffffff 0%, #fef9f5 100%);
+ border: 2.5px solid #c06b3e;
+ color: #8b5a3c;
+ font-weight: 700;
+ font-size: 14px;
+ letter-spacing: 0.5px;
+ cursor: pointer;
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 4px 12px rgba(192, 107, 62, 0.2),
+ inset 0 1px 2px rgba(255, 255, 255, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ position: relative;
+ }
+
+ .dropdown-button:hover {
+ border-color: #d77b46;
+ box-shadow: 0 6px 20px rgba(192, 107, 62, 0.35),
+ inset 0 1px 3px rgba(255, 255, 255, 0.9);
+ transform: translateY(-3px) scale(1.02);
+ background: linear-gradient(145deg, #ffffff 0%, #fff5ed 100%);
+ }
+
+ .dropdown-button.active {
+ border-color: #c06b3e;
+ box-shadow: 0 8px 24px rgba(192, 107, 62, 0.4),
+ 0 0 0 4px rgba(192, 107, 62, 0.15);
background: #fff;
- border: 2px solid #c06b3e;
- color: #c06b3e;
- font-weight: bold;
+ transform: translateY(-3px) scale(1.02);
+ }
+
+ /* Dropdown Arrow */
+ .dropdown-arrow {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ right: 16px;
+ transition: transform 0.3s ease;
+ stroke: #c06b3e;
+ stroke-width: 3.5;
+ }
+
+ .dropdown-button.active .dropdown-arrow {
+ transform: rotate(180deg);
+ }
+
+ /* Dropdown Menu */
+ .dropdown-menu {
+ position: absolute;
+ top: calc(100% + 8px);
+ left: 0;
+ right: 0;
+ transform: translateY(-10px);
+ background: white;
+ border-radius: 20px;
+ border: 3px solid #c06b3e;
+ box-shadow: 0 12px 32px rgba(192, 107, 62, 0.25);
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 1000;
+ overflow: hidden;
+ max-height: 300px;
+ overflow-y: auto;
+ white-space: nowrap;
+ }
+
+ .dropdown-menu.show {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+ }
+
+ /* Dropdown Items */
+ .dropdown-item {
+ padding: 12px 28px;
+ color: #8b5a3c;
+ font-weight: 600;
+ font-size: 15px;
+ letter-spacing: 0.3px;
cursor: pointer;
- transition: 0.25s;
+ transition: all 0.2s ease;
+ border-bottom: 1px solid #f5e6dc;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
- .filter-btn.active,
- .filter-btn:hover {
+
+ .dropdown-item:last-child {
+ border-bottom: none;
+ }
+
+ .dropdown-item:hover {
+ background: linear-gradient(135deg, #fff5ed 0%, #ffeee0 100%);
+ color: #c06b3e;
+ padding-left: 32px;
+ }
+
+ .dropdown-item.selected {
+ background: linear-gradient(135deg, #c06b3e 0%, #d77b46 100%);
+ color: #fff;
+ font-weight: 800;
+ }
+
+ .dropdown-item.selected:hover {
+ background: linear-gradient(135deg, #d77b46 0%, #e88a55 100%);
+ padding-left: 28px;
+ }
+
+ /* Check Icon for Selected Item */
+ .dropdown-item .check-icon {
+ width: 18px;
+ height: 18px;
+ stroke: white;
+ stroke-width: 3;
+ opacity: 0;
+ transition: opacity 0.2s;
+ }
+
+ .dropdown-item.selected .check-icon {
+ opacity: 1;
+ }
+
+ /* Scrollbar styling */
+ .dropdown-menu::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ .dropdown-menu::-webkit-scrollbar-track {
+ background: #fef9f5;
+ border-radius: 10px;
+ }
+
+ .dropdown-menu::-webkit-scrollbar-thumb {
background: #c06b3e;
- color: white;
+ border-radius: 10px;
+ }
+
+ .dropdown-menu::-webkit-scrollbar-thumb:hover {
+ background: #d77b46;
+ }
+
+ .sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
}
/* ===== GRID ===== */
@@ -113,15 +268,67 @@ Catálogo Essenza
Explora nuestra selección de productos mejor valorados
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Todas las marcas
+
+
+
+
Catálogo Essenza
class="card"
data-name="{{ product.name|lower }}"
data-category="{{ product.category }}"
- onclick="location.href='{% url 'catalog_detail' product.pk %}'"
+ data-brand="{{ product.brand|default:''|lower }}"
+ data-url="{% url 'catalog_detail' product.pk %}"
>
{% if product.photo %}
@@ -168,36 +376,148 @@ {{ product.name }}
}
};
- /* ========== FILTROS ========== */
- const filterButtons = document.querySelectorAll(".filter-btn");
+ /* ========== FILTROS (Custom Dropdowns + Brands dinámicas) ========== */
+ const dropdownButton = document.getElementById("dropdownButton");
+ const dropdownMenu = document.getElementById("dropdownMenu");
+ const categoryItems = document.querySelectorAll("#dropdownMenu .dropdown-item");
+ const selectedValue = document.getElementById("selectedValue");
+
+ const brandButton = document.getElementById("brandDropdownButton");
+ const brandMenu = document.getElementById("brandDropdownMenu");
+ const brandSelected = document.getElementById("brandSelected");
+
const cards = document.querySelectorAll(".card");
- filterButtons.forEach((btn) => {
- btn.addEventListener("click", () => {
- filterButtons.forEach((b) => b.classList.remove("active"));
- btn.classList.add("active");
+ // State
+ let selectedCategory = 'all';
+ let selectedBrand = 'all';
+
+ // Utility: apply all filters (category + brand + search)
+ function applyFilters() {
+ const searchInput = document.getElementById("searchInput");
+ const searchText = (searchInput?.value || '').toLowerCase();
+
+ // Read selected category & brand from DOM to avoid stale state
+ const selectedCategoryItem = document.querySelector('#dropdownMenu .dropdown-item.selected');
+ const selectedBrandItem = document.querySelector('#brandDropdownMenu .dropdown-item.selected');
+ const currentCategory = (selectedCategoryItem?.dataset.value || 'all').toLowerCase();
+ const currentBrand = (selectedBrandItem?.dataset.value || 'all').toLowerCase();
+
+ cards.forEach((card) => {
+ const name = (card.dataset.name || '').toLowerCase();
+ const category = (card.dataset.category || '').toLowerCase();
+ const brand = (card.dataset.brand || '').toLowerCase();
+
+ const matchCategory = currentCategory === 'all' || category === currentCategory;
+ const matchBrand = currentBrand === 'all' || brand === currentBrand || currentBrand === '';
+ const matchSearch = !searchText || name.includes(searchText);
+
+ card.style.display = (matchCategory && matchBrand && matchSearch) ? 'block' : 'none';
+ });
+ }
+
+ // Category dropdown toggle
+ dropdownButton.addEventListener("click", (e) => {
+ e.stopPropagation();
+ dropdownButton.classList.toggle("active");
+ dropdownMenu.classList.toggle("show");
+ });
+
+ // Category selection
+ categoryItems.forEach((item) => {
+ item.addEventListener('click', (e) => {
+ e.stopPropagation();
+ categoryItems.forEach(i => i.classList.remove('selected'));
+ item.classList.add('selected');
+ selectedCategory = item.dataset.value;
+ selectedValue.textContent = item.querySelector('span').textContent;
+ dropdownButton.classList.remove('active');
+ dropdownMenu.classList.remove('show');
+ applyFilters();
+ });
+ });
+
+ // Brand dropdown: build unique brands from cards
+ function populateBrandMenu() {
+ const brandSet = new Set();
+ cards.forEach(c => {
+ const b = (c.dataset.brand || '').trim();
+ if (b) brandSet.add(b.toLowerCase());
+ });
+
+ // Remove existing brand items except the first (Todas las marcas)
+ const existing = Array.from(brandMenu.querySelectorAll('.dropdown-item'));
+ existing.slice(1).forEach(n => n.remove());
- const category = btn.dataset.category;
- cards.forEach((card) => {
- const match =
- category === "all" || card.dataset.category === category;
- card.style.display = match ? "block" : "none";
+ // Sort and add
+ Array.from(brandSet).sort().forEach((b) => {
+ const el = document.createElement('div');
+ el.className = 'dropdown-item';
+ el.dataset.value = b;
+ const span = document.createElement('span');
+ // capitalize first letter for display
+ span.textContent = b.charAt(0).toUpperCase() + b.slice(1);
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ svg.setAttribute('class', 'check-icon');
+ svg.setAttribute('viewBox', '0 0 24 24');
+ svg.setAttribute('fill', 'none');
+ svg.innerHTML = '';
+ el.appendChild(span);
+ el.appendChild(svg);
+ brandMenu.appendChild(el);
+ });
+
+ // Attach listeners to the new items
+ const brandItems = brandMenu.querySelectorAll('.dropdown-item');
+ brandItems.forEach((item) => {
+ item.addEventListener('click', (e) => {
+ e.stopPropagation();
+ brandItems.forEach(i => i.classList.remove('selected'));
+ item.classList.add('selected');
+ selectedBrand = item.dataset.value;
+ brandSelected.textContent = item.querySelector('span').textContent;
+ brandButton.classList.remove('active');
+ brandMenu.classList.remove('show');
+ applyFilters();
});
});
+ }
+
+ // Brand dropdown toggle
+ brandButton.addEventListener('click', (e) => {
+ e.stopPropagation();
+ brandButton.classList.toggle('active');
+ brandMenu.classList.toggle('show');
});
- /* ========== BUSCADOR ========== */
- const searchInput = document.getElementById("searchInput");
+ // Close dropdowns when clicking outside
+ document.addEventListener('click', (e) => {
+ if (!e.target.closest('.custom-dropdown')) {
+ dropdownButton.classList.remove('active');
+ dropdownMenu.classList.remove('show');
+ brandButton.classList.remove('active');
+ brandMenu.classList.remove('show');
+ }
+ });
- searchInput.addEventListener("input", function () {
- const searchText = this.value.toLowerCase();
+ // Populate brands now
+ populateBrandMenu();
- cards.forEach((card) => {
- const name = card.dataset.name;
- const visible = name.includes(searchText);
- card.style.display = visible ? "block" : "none";
+ // Navigation: use data-url on cards
+ cards.forEach(card => {
+ card.addEventListener('click', (e) => {
+ const url = card.dataset.url;
+ if (url) window.location.href = url;
});
});
+
+ /* ========== BUSCADOR ========== */
+ const searchInput = document.getElementById("searchInput");
+ if (searchInput) {
+ searchInput.addEventListener("input", function () {
+ applyFilters();
+ });
+ }