Dinamik Web Siteleri için Öğeleri Çeşitli Kategorilere Göre Sıralamak İçin JavaScript Kullanın

Ürün Filtrelemeyi JavaScript ve Çoklu Kategorilerle Geliştirme

Dinamik, kullanıcı dostu web sayfaları oluşturmak, kesintisiz gezinme ve içeriğin kolay filtrelenmesini sağlamayı içerir. Bu, özellikle birden fazla kategoriye giren ürünleri veya öğeleri görüntülerken kullanışlıdır. JavaScript'i kullanarak öğeleri birden fazla kategoriye göre filtrelemek için sezgisel bir yöntem uygulayabilir, böylece kullanıcıların tam olarak aradıklarını bulmalarını kolaylaştırabiliriz.

Bu senaryoda, bir kategori düğmesine tıklamak sayfada görüntülenen öğeleri filtrelemelidir. Kullanıcı aynı anda birden fazla kategoriyi seçebilmeli ve bu da ürünlerin daha özel bir şekilde görülebilmesini sağlamalıdır. Örneğin, "Somon" ve "Karides" seçildiğinde yalnızca her iki malzemeyi de içeren öğeler gösterilmelidir.

Şu anda birçok uygulama tek kategorili filtreleme için iyi çalışıyor ancak birden fazla kategori eklemek zor olabilir. Buradaki zorluk, hangi öğelerin gösterileceği veya gizleneceğine karar verirken seçilen tüm kategorilerin dikkate alınmasını sağlamaktır. Bu makalede, JavaScript kullanılarak tek kategorili filtrelemenin çok kategorili filtrelemeye verimli bir şekilde nasıl genişletileceği açıklanmaktadır.

Bu kılavuzda, birden fazla etkin düğmeye dayalı olarak kartları dinamik olarak filtreleyen, kolay ve kullanıcı dostu bir deneyim sağlayan bir çözümü inceleyeceğiz. Bu JavaScript çözümünü uygulayarak web sayfanızın etkileşimini nasıl geliştireceğinizi ve kullanıcı katılımını nasıl artıracağınızı öğreneceksiniz.

JavaScript'te Çok Kategorili Filtrelemeyi Anlamak

Yukarıda verilen komut dosyaları, ürün tabanlı web sitelerinde kullanıcı deneyimini geliştirmek için gerekli olan öğeleri birden çok kategoriye göre dinamik olarak filtrelemeye odaklanır. Amaç, kullanıcıların birden fazla kategori seçmesine ve kartları buna göre filtrelemesine olanak sağlamaktır. Bu, JavaScript kullanılarak, düğme tıklamalarının yakalanması, seçilen kategorilerin bir dizide saklanması ve ardından yalnızca seçilen tüm kategorilerle eşleşen kartların görüntülenmesi yoluyla gerçekleştirilir. İşlem, kullanıcı o düğmenin aktif durumunu değiştiren bir kategori düğmesine tıkladığında başlatılır. Düğmenin değeri, tüm etkin filtreleri temsil eden bir dizide saklanır.

Bu çözümün kritik bir kısmı dizi yöntemini kullanmaktır Her(). Bu komut, seçilen tüm kategorilerin kartın kategorileriyle karşılaştırılmasını sağlar. Her aktif kategorinin kartın kategorileri içerisinde bulunup bulunmadığını kontrol ederek çoklu kategori filtrelemenin sorunsuz çalışmasına olanak sağlar. Bir diğer önemli yöntem ise bölmek(), her karttaki kategori dizisini bir diziye bölmek için kullanılır. Bu, JavaScript'in bireysel kategorileri karşılaştırmasına ve hangi kartların görüntülenmesi veya gizlenmesi gerektiğini belirlemesine olanak tanır.

Ayrıca, komut dosyası şunu kullanır: classList.toggle() Tıklandığında düğmelere aktif sınıfı eklemek veya kaldırmak için. Bu sınıf, o anda hangi düğmelerin etkin olduğunu gösterdiğinden görsel geri bildirim için çok önemlidir. Bir düğme devre dışı bırakıldığında, kategorisi etkin kategoriler dizisinden kaldırılır ve ekranı güncellemek için filtreleme işlevi yeniden tetiklenir. Etkin kategorilerle eşleşmeyen kartlar, etkin değil olarak işaretlenecek bir sınıf eklenerek gizlenir. Bu yöntem, kullanıcıların birden fazla filtreyi seçerek veya seçimini kaldırarak aramalarını kolayca hassaslaştırabilmesini sağlar.

Arka uç komut dosyası, Node.js ve Express kullanılarak sunucu tarafında ürün filtrelemeyi gerçekleştirecek şekilde yapılandırılmıştır. Seçilen kategoriler bir POST isteği aracılığıyla sunucuya gönderilir ve sunucu bu isteği, ürünleri filtreleyerek ve yalnızca etkin kategorilerle eşleşen öğeleri döndürerek işler. Sunucu, ön uçla aynı mantığı kullanır ve filtre() Seçilen kategorileri her bir ürünün kategorileriyle karşılaştırma yöntemi. Bu yaklaşım, istemci tarafındaki işlem yükünü hafiflettiği ve son kullanıcılar için daha iyi performans sağladığı için büyük veri kümeleriyle uğraşırken kullanışlıdır.

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

Web Geliştirmede Çok Kategorili Filtreleme için İleri Teknikler

Çok kategorili bir filtreleme sistemi uygularken JavaScriptyalnızca kullanıcı arayüzü etkileşimini değil, aynı zamanda onu destekleyen veri yapısını da dikkate almak önemlidir. Dinamik içerik bağlamında optimize edilmiş ve temiz bir içerik sağlamak DOM manipülasyon stratejisi çok önemlidir. Örneğin, birden fazla kategori düğmesini verimli bir şekilde yönetmek için olay delegasyonu tekniklerini kullanabilir ve yalnızca gerekli DOM öğelerinin işlenmesini sağlayabilirsiniz.

Filtreleme deneyimini daha da geliştirebilecek bir husus, basit düğmeler yerine onay kutuları veya çoklu seçimli açılır menüler gibi daha karmaşık kullanıcı arayüzü öğelerinin eklenmesidir. Bu, kullanıcıların filtrelerle daha ayrıntılı bir şekilde etkileşim kurmasına olanak tanır. Örneğin, birden fazla seçime izin veren bir açılır menü, kategorileri seçerken kullanıcılara daha temiz bir kullanıcı arayüzü ve daha fazla esneklik sağlar. Bu, ek JavaScript mantığı ve stiliyle uygulanabilirken, aynı zamanda aşağıdaki gibi dizi yöntemleri de kullanılabilir: filter() Ve every() Kategori karşılaştırması için.

Bir diğer kritik husus, özellikle büyük bir veri kümesiyle uğraşırken, filtreleme sisteminin performansıdır. Filtrelenecek yüzlerce veya binlerce öğeniz olduğunda, DOM manipülasyonunu mümkün olduğunca en aza indirmek çok önemlidir. Bunu optimize etmenin bir yolu, DOM'daki güncellemeleri toplu olarak kullanmaktır. requestAnimationFrame() veya debounce() Güncelleme hızını kontrol etme ve sorunsuz bir kullanıcı deneyimi sağlama yöntemleri. Bu teknikler yalnızca performansı artırmakla kalmaz, aynı zamanda sayfanın yanıt verme hızını da artırarak sayfayı daha büyük veri kümeleri için daha ölçeklenebilir hale getirir.