Użyj JavaScript, aby sortować elementy według kilku kategorii w dynamicznych witrynach internetowych

Ulepszone filtrowanie produktów za pomocą JavaScript i wielu kategorii

Tworzenie dynamicznych, przyjaznych dla użytkownika stron internetowych wiąże się z zapewnieniem płynnej nawigacji i łatwego filtrowania treści. Jest to szczególnie przydatne podczas wyświetlania produktów lub elementów należących do wielu kategorii. Używając JavaScript, możemy wdrożyć intuicyjny sposób filtrowania elementów na podstawie wielu kategorii, ułatwiając użytkownikom znalezienie dokładnie tego, czego szukają.

W tym scenariuszu kliknięcie przycisku kategorii powinno filtrować elementy wyświetlane na stronie. Użytkownik powinien mieć możliwość jednoczesnego wyboru wielu kategorii, co pozwoli na bardziej dostosowany widok produktów. Na przykład wybranie opcji „Łosoś” i „Krewetka” powinno wyświetlić tylko produkty zawierające oba składniki.

Obecnie wiele implementacji dobrze sprawdza się w przypadku filtrowania pojedynczych kategorii, ale dodanie wielu kategorii może być trudne. Wyzwanie polega na tym, aby przy podejmowaniu decyzji, które elementy pokazać, a które ukryć, uwzględniono wszystkie wybrane kategorie. W tym artykule omówiono, jak w efektywny sposób rozszerzyć filtrowanie pojedynczej kategorii na filtrowanie wielu kategorii przy użyciu języka JavaScript.

W tym przewodniku omówimy rozwiązanie, które dynamicznie filtruje karty w oparciu o wiele aktywnych przycisków, zapewniając łatwą i przyjazną obsługę. Wdrażając to rozwiązanie JavaScript, dowiesz się, jak poprawić interaktywność swojej strony internetowej i zwiększyć zaangażowanie użytkowników.

Zrozumienie filtrowania wielu kategorii w JavaScript

Powyższe skrypty skupiają się na dynamicznym filtrowaniu elementów na podstawie wielu kategorii, co jest niezbędne do poprawy komfortu użytkowania witryn internetowych poświęconych produktom. Celem jest umożliwienie użytkownikom wybierania wielu kategorii i odpowiedniego filtrowania kart. Osiąga się to za pomocą JavaScript poprzez przechwytywanie kliknięć przycisków, przechowywanie wybranych kategorii w tablicy, a następnie wyświetlanie tylko kart pasujących do wszystkich wybranych kategorii. Proces rozpoczyna się w momencie kliknięcia przez użytkownika przycisku kategorii, co powoduje przełączenie stanu aktywnego tego przycisku. Wartość przycisku przechowywana jest w tablicy reprezentującej wszystkie aktywne filtry.

Kluczową częścią tego rozwiązania jest użycie metody tablicowej każdy(). To polecenie gwarantuje, że wszystkie wybrane kategorie zostaną porównane z kategoriami karty. Sprawdza, czy każda aktywna kategoria znajduje się w kategoriach karty, umożliwiając w ten sposób płynne działanie filtrowania wielu kategorii. Inną ważną metodą jest podział(), który służy do dzielenia ciągu kategorii z każdej karty na tablicę. Dzięki temu JavaScript może porównać poszczególne kategorie i określić, które karty powinny być widoczne, a które ukryte.

Ponadto skrypt wykorzystuje lista klas.toggle() aby dodać lub usunąć aktywną klasę na przyciskach po kliknięciu. Klasa ta ma kluczowe znaczenie dla wizualnej informacji zwrotnej, ponieważ wskazuje, które przyciski są aktualnie aktywne. Dezaktywacja przycisku powoduje usunięcie jego kategorii z tablicy aktywnych kategorii i ponowne uruchomienie funkcji filtrowania w celu aktualizacji wyświetlacza. Karty nie pasujące do aktywnych kategorii są ukrywane poprzez dodanie klasy oznaczającej je jako nieaktywne. Dzięki tej metodzie użytkownicy mogą łatwo zawęzić wyszukiwanie, zaznaczając lub odznaczając wiele filtrów.

Skrypt zaplecza jest skonstruowany tak, aby obsługiwał filtrowanie produktów po stronie serwera przy użyciu Node.js i Express. Wybrane kategorie są wysyłane do serwera poprzez żądanie POST, a serwer przetwarza to żądanie, filtrując produkty i zwracając tylko te pozycje, które pasują do aktywnych kategorii. Serwer wykorzystuje tę samą logikę co front-end, wykorzystując filtr() metoda porównywania wybranych kategorii z kategoriami każdego produktu. Takie podejście jest przydatne w przypadku dużych zbiorów danych, ponieważ odciąża przetwarzanie po stronie klienta, co skutkuje lepszą wydajnością dla użytkowników końcowych.

// Define product data
let products = {
  data: [
    { productName: "Fantasy", category: "Salmon, Shrimp" },
    { productName: "Spring", category: "Veggie" },
    { productName: "Rainbow", category: "Salmon, Tuna, Unagi" },
    { productName: "Unique", category: "Salmon, Tuna, Unagi, Shrimp" },
    { productName: "Perfection", category: "Salmon" },
  ]
};

// Handle button click event
let activeCategories = [];
document.querySelectorAll(".category-button").forEach(button => {
  button.addEventListener("click", () => {
    const category = button.innerText.trim();
    button.classList.toggle("active-button");
    if (button.classList.contains("active-button")) {
      activeCategories.push(category);
    } else {
      activeCategories = activeCategories.filter(cat => cat !== category);
    }
    filterCards();
  });
});

// Filter cards based on active categories
function filterCards() {
  document.querySelectorAll(".card").forEach(card => {
    const cardCategories = card.getAttribute("data-category").split(",");
    const match = activeCategories.every(cat => cardCategories.includes(cat));
    card.style.display = match ? "block" : "none";
  });
}

const express = require('express');
const app = express();
app.use(express.json());

// Sample product data
const products = [
  { name: 'Fantasy', categories: ['Salmon', 'Shrimp'] },
  { name: 'Spring', categories: ['Veggie'] },
];

// Filter products API
app.post('/filter', (req, res) => {
  const selectedCategories = req.body.categories;
  const filteredProducts = products.filter(product =>
    selectedCategories.every(cat => product.categories.includes(cat))
  );
  res.json(filteredProducts);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Zaawansowane techniki filtrowania wielu kategorii w tworzeniu stron internetowych

Wdrażając system filtrowania wielu kategorii w JavaScript, ważne jest, aby wziąć pod uwagę nie tylko interakcję interfejsu użytkownika, ale także strukturę danych, która ją obsługuje. W kontekście treści dynamicznych, utrzymanie zoptymalizowanego i czystego DOM strategia manipulacji jest kluczowa. Można na przykład zastosować techniki delegowania zdarzeń, aby efektywnie obsługiwać wiele przycisków kategorii, zapewniając manipulowanie tylko wymaganymi elementami DOM.

Jednym z aspektów, który może jeszcze bardziej ulepszyć filtrowanie, jest dodanie bardziej wyrafinowanych elementów interfejsu użytkownika, takich jak pola wyboru lub listy rozwijane z możliwością wielokrotnego wyboru, zamiast prostych przycisków. Umożliwia to użytkownikom bardziej szczegółową interakcję z filtrami. Na przykład menu rozwijane umożliwiające wielokrotny wybór zapewnia przejrzysty interfejs użytkownika i większą elastyczność dla użytkowników przy wyborze kategorii. Można to zaimplementować za pomocą dodatkowej logiki i stylu JavaScript, jednocześnie wykorzystując metody tablicowe, takie jak filter() I every() do porównania kategorii.

Kolejnym krytycznym czynnikiem jest wydajność systemu filtrowania, szczególnie w przypadku dużego zbioru danych. Kiedy masz setki lub tysiące elementów do przefiltrowania, niezwykle ważne jest maksymalne zminimalizowanie manipulacji DOM. Jednym ze sposobów optymalizacji jest wsadowe przesyłanie aktualizacji do modelu DOM przy użyciu requestAnimationFrame() Lub debounce() metody kontrolowania szybkości aktualizacji i zapewniania płynnej obsługi użytkownika. Techniki te nie tylko poprawiają wydajność, ale także poprawiają responsywność strony, dzięki czemu jest ona bardziej skalowalna w przypadku większych zbiorów danych.