Izmantojiet JavaScript, lai kārtotu vienumus pēc vairākām kategorijām dinamiskām vietnēm

Produktu filtrēšanas uzlabošana, izmantojot JavaScript un vairākas kategorijas

Lai izveidotu dinamiskas, lietotājam draudzīgas tīmekļa lapas, tiek piedāvāta nevainojama navigācija un vienkārša satura filtrēšana. Tas ir īpaši noderīgi, ja tiek rādīti produkti vai preces, kas ietilpst vairākās kategorijās. Izmantojot JavaScript, mēs varam ieviest intuitīvu veidu, kā filtrēt vienumus, pamatojoties uz vairākām kategorijām, lai lietotājiem būtu vieglāk atrast tieši to, ko viņi meklē.

Šādā gadījumā, noklikšķinot uz kategorijas pogas, ir jāfiltrē lapā redzamie vienumi. Lietotājam vajadzētu būt iespējai vienlaikus atlasīt vairākas kategorijas, tādējādi nodrošinot pielāgotāku produktu skatījumu. Piemēram, atlasot “Laši” un “Garneles”, ir jāparāda tikai vienumi, kas satur abas sastāvdaļas.

Pašlaik daudzas ieviešanas labi darbojas vienas kategorijas filtrēšanai, taču vairāku kategoriju pievienošana var būt sarežģīta. Izaicinājums ir nodrošināt, lai visas atlasītās kategorijas tiktu ņemtas vērā, lemjot, kurus vienumus rādīt vai paslēpt. Šajā rakstā ir apskatīts, kā efektīvi paplašināt vienas kategorijas filtrēšanu līdz vairāku kategoriju filtrēšanai, izmantojot JavaScript.

Šajā rokasgrāmatā mēs apskatīsim risinājumu, kas dinamiski filtrē kartes, pamatojoties uz vairākām aktīvām pogām, nodrošinot vienkāršu un lietotājam draudzīgu pieredzi. Ieviešot šo JavaScript risinājumu, jūs uzzināsit, kā uzlabot savas tīmekļa lapas interaktivitāti un palielināt lietotāju iesaisti.

Izpratne par vairāku kategoriju filtrēšanu JavaScript

Iepriekš sniegtie skripti ir vērsti uz vienumu dinamisku filtrēšanu, pamatojoties uz vairākām kategorijām, kas ir būtiski, lai uzlabotu lietotāju pieredzi uz produktiem balstītās vietnēs. Mērķis ir ļaut lietotājiem atlasīt vairākas kategorijas un attiecīgi filtrēt kartītes. Tas tiek panākts, izmantojot JavaScript, tverot pogu klikšķus, saglabājot atlasītās kategorijas masīvā un pēc tam parādot tikai tās kartītes, kas atbilst visām atlasītajām kategorijām. Process tiek uzsākts, kad lietotājs noklikšķina uz kategorijas pogas, kas pārslēdz šīs pogas aktīvo stāvokli. Pogas vērtība tiek saglabāta masīvā, kas atspoguļo visus aktīvos filtrus.

Svarīga šī risinājuma daļa ir masīva metodes izmantošana katrs (). Šī komanda nodrošina, ka visas atlasītās kategorijas tiek salīdzinātas ar kartes kategorijām. Tā pārbauda, ​​vai katra aktīvā kategorija ir atrodama kartes kategorijās, tādējādi ļaujot nevainojami darboties vairāku kategoriju filtrēšanai. Vēl viena svarīga metode ir sadalīt (), ko izmanto, lai sadalītu kategoriju virkni no katras kartītes masīvā. Tas ļauj JavaScript salīdzināt atsevišķas kategorijas un noteikt, kuras kartītes ir jāparāda vai jāpaslēpj.

Turklāt skripts izmanto classList.toggle() lai pievienotu vai noņemtu aktīvo klasi, kad noklikšķināt uz pogām. Šī klase ir ļoti svarīga vizuālai atgriezeniskajai saitei, jo tā norāda, kuras pogas pašlaik ir aktīvas. Kad poga ir deaktivizēta, tās kategorija tiek noņemta no aktīvo kategoriju masīva, un filtrēšanas funkcija atkal tiek aktivizēta, lai atjauninātu displeju. Kartes, kas neatbilst aktīvajām kategorijām, tiek paslēptas, pievienojot klasi, lai tās atzīmētu kā neaktīvas. Šī metode nodrošina, ka lietotāji var viegli precizēt meklēšanu, atlasot vairākus filtrus vai noņemot atlasi.

Aizmugurējā skripts ir strukturēts tā, lai apstrādātu produktu filtrēšanu servera pusē, izmantojot Node.js un Express. Atlasītās kategorijas tiek nosūtītas serverim, izmantojot POST pieprasījumu, un serveris apstrādā šo pieprasījumu, filtrējot produktus un atgriežot tikai tos vienumus, kas atbilst aktīvajām kategorijām. Serveris izmanto to pašu loģiku kā priekšgals, izmantojot filtrs () metode atlasīto kategoriju salīdzināšanai ar katra produkta kategorijām. Šī pieeja ir noderīga, strādājot ar lielām datu kopām, jo ​​tā atceļ apstrādi no klienta puses, tādējādi nodrošinot labāku veiktspēju galalietotājiem.

// 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'));

Uzlabotas metodes vairāku kategoriju filtrēšanai tīmekļa izstrādē

Ieviešot vairāku kategoriju filtrēšanas sistēmu JavaScript, ir svarīgi ņemt vērā ne tikai lietotāja interfeisa mijiedarbību, bet arī datu struktūru, kas to atbalsta. Dinamiskā satura kontekstā saglabājot optimizētu un tīru DOM Manipulācijas stratēģija ir galvenā. Piemēram, varat izmantot notikumu deleģēšanas metodes, lai efektīvi apstrādātu vairākas kategoriju pogas, nodrošinot, ka tiek apstrādāti tikai nepieciešamie DOM elementi.

Viens no aspektiem, kas var vēl vairāk uzlabot filtrēšanas pieredzi, ir sarežģītāku lietotāja interfeisa elementu, piemēram, izvēles rūtiņu vai vairāku atlases nolaižamo izvēlņu pievienošana vienkāršu pogu vietā. Tādējādi lietotāji var detalizētāk mijiedarboties ar filtriem. Piemēram, nolaižamā izvēlne, kas ļauj veikt vairākas atlases, nodrošina tīrāku lietotāja interfeisu un lielāku elastību, izvēloties kategorijas. To var ieviest, izmantojot papildu JavaScript loģiku un stilu, vienlaikus izmantojot tādas masīva metodes kā filter() un every() kategoriju salīdzināšanai.

Vēl viens svarīgs apsvērums ir filtrēšanas sistēmas veiktspēja, jo īpaši, ja tiek izmantota liela datu kopa. Ja jums ir simtiem vai tūkstošiem vienumu, ko filtrēt, ir ļoti svarīgi pēc iespējas samazināt manipulācijas ar DOM. Viens no veidiem, kā to optimizēt, ir DOM atjauninājumu komplektēšana, izmantojot requestAnimationFrame() vai debounce() metodes, lai kontrolētu atjauninājumu ātrumu un nodrošinātu vienmērīgu lietotāja pieredzi. Šīs metodes ne tikai uzlabo veiktspēju, bet arī uzlabo lapas atsaucību, padarot to mērogojamu lielākām datu kopām.