Web Sayfamda Filtreleme'yi Nasıl Kullanabilirim?

1

ürünler
ürünler1920×2710 219 KB

Resimde görmüş olduğunuz sayfada filtreleme özelliği yapmak istiyorum.Örneğin çantalar için radio button tanımlayacağım ve sadece kartta bulunan çantalar gelicek.Bu konu hakkında hiç bir bilgim yok.Yardımcı olursanız veya bu konu hakkında yararlanabileceğim kaynağa yönlendirirsenin çok mutlu olurum Teşekkür ediyorum.

2

Sayfadaki urun verisi dinamik olarak bir veritabanindan mi geliyor yoksa html’de statik mi? Dinamik olarak geliyorsa sunucu tarafinda mi renderlaniyor client tarafinda mi?

3

Html’de statik bir yapı.

4

O halde once o yapiyi dinamik hale getirmek gerekiyor. Javascript’te JSON halinde o veriyi depolamaliyiz:

var products = [
    {
        "id": 1,
        "name": "Urun 1",
        "specifications": [
            "water-resistant",
            "guaranteed",
        ],
        "price": 3000,
    },
    {
        "id": 2,
        "name": "Urun 2",
        "specifications": [
            "guaranteed",
        ],
        "price": 2000,
    },
]

Daha sonra bunlari html’e renderlamaliyiz. Bu bir javascript kutuphanesiyle veya elle yapilabilir:

for (const product in products) {
    document.write(...):
}

Buradan sonra filtre secmeye yarayan bir form ve o formda degisiklik oldugunda products’taki bazi elemanlari eksilten ve urun kismini tekrar renderlatan bir javascript kodu lazim.

5

Yapıyı nasıl dinamik hale getireceğim.Benim hiç bilgim yok tam olarak hangi adımdan başlamayım adım adım neler yapmalıyım daha doğrusu.

6

Ustte kisaca ozetledigim seyin guzelce anlatilmis hali var:

Burada tam olarak gosterilmeyen, sizin ilk olarak yapmaniz gereken sey ise sitedeki butun urunleri JSON’a cevirmek:

var cantalar = [ // Canta objelerini depolayacak olan liste.
    {
        id: 1,  // Zorunlu Degil
        name: "Duz Model Astronot Canta", // Urun Adi
        specifications: [ // Urun ozellikleri
            "1600 Denye ithal kumastan uretilmistir.",
            "10 Micron kalinliginda kirilmaz on panel.",
            // ...
        ],
        color: "kirmizi", // Urun rengi. Filtrelemede kullanmak isteyebiliriz. Renge gore filtrelemek icin.
        price: 2000, // Urun fiyati, yine filtrelemede kullanacagiz. Buralar farkli olabilir.
    },
    { // Bir baska urun
        id: 2,
        name: "Fileli Model Astronot Canta",
        specifications: [
            "1600 Denye ithal kumastan uretilmistir.",
            "10 Micron kalinliginda kirilmaz on panel.",
            "12 KG Tasima kapasiteli."
            // ...
        ],
        color: "sari",
        price: 1300,
    }
    // ...
    // Bu listenin devaminda butun urunler icin girdi olusturulmasi gerekiyor.
];