---
title: Ürün Listesi
description: Ürünleri filtre ve sıralama seçenekleriyle listeleyen ProductList component'ini inceleyin.
---
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
Ürün listesi, ürünleri filtre ve sıralama seçenekleriyle birlikte listelediğimiz yerdir. Temalar genellikle **Kategori**, **Marka** ve **Arama** sayfalarında ürün listeler. Bununla birlikte satıcılar bu component'i ana sayfa gibi istedikleri herhangi bir sayfaya da ekleyebilir.
Component'in kategori sayfasındaki görünümü şöyle:
Ürün listelemenin mantığı bu sayfaların hepsinde büyük ölçüde aynı olduğu için component'ler arasında yeniden kullanmak üzere bir [ProductList](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-list/index.tsx) alt component'i oluşturuyoruz. Tema editöründe tanımladığımız component bu değildir; editörde [PageCategory](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/page-category/index.tsx), [PageBrand](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/page-brand/index.tsx) ve [PageSearch](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/page-search/index.tsx) üst component'lerini tanımlıyor, `ProductList` alt component'ini bunların içinde kullanıyoruz.
## Prop'lar [#props]
`PageCategory` component'i için bir [Category prop tipi](https://builders.ikas.com/docs/headless-theme/prop-types/category) ve bir [Product List prop tipi](https://builders.ikas.com/docs/headless-theme/prop-types/product-list) istiyoruz.
```tsx title="src/components/__generated__/types.ts"
export type PageCategoryProps = {
category: IkasCategory;
productList: IkasProductList;
};
```
`PageCategory` component'ini kategori sayfasına eklediğimizde ürün listesinin o sayfanın kategorisine göre filtrelenmesi gerekir. Bunun için [Product List prop tipi](https://builders.ikas.com/docs/headless-theme/prop-types/product-list) sayfasında anlatıldığı gibi **Use page data as filter** kutucuğunu işaretliyor ve **All** ürün listesi tipini kullanıyoruz.
Diğer iki component'in prop'ları farklıdır, ancak alttaki listeleme mantığı aynıdır. Bu nedenle bu sayfada [ProductList](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-list/index.tsx) component'ini anlatacağız. Sayfayı okunabilir tutmak için yalnızca ürünleri listelerken ve filtrelerken dikkat etmeniz gereken en önemli noktalara değiniyoruz.
## Filtreler [#filters]
- Filtreler, ikas satıcıları tarafından yönetim panelinden oluşturulur. Filtrelerin nasıl oluşturulduğunu öğrenmek için [Ürün Filtreleri](https://builders.ikas.com/docs/app-development/dashboard/product-filter) sayfasına göz atabilirsiniz.
- [Sol taraftaki filtreleri](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-list/components/filters/index/index.tsx) göstermek için **productList.filters** dizisini kullanıyoruz. Bu dizi [IkasProductFilter](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-filter) tipindedir.
- **productList.filters** dizisi üzerinde map ediyor ve **filter.displayType** değerine göre farklı alt component'ler arasında geçiş yapıyoruz.
- Filtrenin varsayılan olarak kapalı mı açık mı görüneceğini belirlemek için **filter.settings** ([IkasProductFilterSettings](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-filter-settings)) field'ını kullanıyoruz. Bu ayarlar, satıcı filtreleri oluştururken belirlenir. [FiltersWrapper](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/product-list/components/filters/components/filters-wrapper/index.tsx) alt component'ine göz atın.
- Filtreleri temizlemek için **productList.clearFilters** fonksiyonunu kullanıyoruz.
### Box ve List filtreleri [#box-and-list-filters]
Filtrelerin kullanılabilir her değerini render etmek için **filter.displayedValues** üzerinde map ediyoruz. Müşteri bir filtre değerine tıkladığında **filter.onFilterValueClick** fonksiyonunu çağırıp tıklanan değeri parametre olarak geçiyoruz. Değerin pasif gösterilip gösterilmeyeceğine karar vermek için **value.resultCount** değerini kullanıyoruz. Bu field, müşteri o değere tıklarsa listede kaç ürün kalacağını gösterir. `resultCount` 0 ise bunu küçük bir CSS değişikliğiyle belirtiyoruz. Değerin seçili olduğunu göstermek için de **value.isSelected** field'ını kullanıyoruz. [BoxFilters](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/product-list/components/filters/box/index.tsx) ve [ListFilters](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/product-list/components/filters/list/index.tsx) alt component'lerine göz atın.
### Number Range filtresi [#number-range-filter]
**filter.numberRangeLimit** field'ı sayı aralığının sınırlarını belirtir: **from** alt sınır, **to** ise üst sınırdır. Değeri değiştirmek için yine bir **from** ve **to** değeri geçerek **filter.onNumberRangeChange** fonksiyonunu kullanıyoruz. Örneğin müşteri, fiyatı 100$ ile 200$ arasındaki ürünleri filtreleyebilir. [NumberRangeFilters](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-list/components/filters/number-range) component'ine ve onun **useNumberRange** hook'una göz atın.
### Number Range List filtresi [#number-range-list-filter]
Olası her seçeneği render etmek için **filter.numberRangeListOptions** dizisi üzerinde map ediyoruz. Bu dizideki her seçeneğin bir **isSelected** field'ı ile seçeneğin aralığını belirten **from** ve **to** field'ları vardır. Müşteri bir seçeneğe tıkladığında **filter.onNumberRangeClick** fonksiyonunu çağırıp tıklanan seçeneği parametre olarak geçiyoruz. Örneğin satıcı, 100$-200$, 200$-300$ gibi farklı fiyat aralıkları için bir number range list filtresi oluşturabilir. Her seçenek bir aralığı temsil eder. [NumberRangeListFilter](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-list/components/filters/number-range-list) component'ine göz atın.
### Swatch filtresi [#swatch-filter]
Box ve List filtrelerinde olduğu gibi, kullanılabilir her değeri render etmek için **filter.displayedValues** üzerinde map ediyoruz. Ancak bu kez değeri render ederken **colorCode** ve **thumbnailImage** field'larını kullanıyoruz. Satıcılar ya bir renk kodu seçebilir ya da ürünlerin malzemesini veya rengini gösteren bir görsel yükleyebilir; component'imiz her iki durumu da karşılar. Bir değere tıklandığında yine **onFilterValueClick** fonksiyonunu, seçili değeri belirtmek için de **isSelected** field'ını kullanıyoruz. [SwatchFilters](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-list/components/filters/swatch/index.tsx) component'ine göz atın.
### Kategori filtresi [#category-filter]
Kategori filtreleri, yönetim panelinden oluşturulan filtrelerden farklıdır. Bu filtre tipi genellikle diğer tüm filtrelerin üstünde yer alır ve kategoriler arasında bir navigasyon işlevi görür. Bu filtreleri render etmek için **productList.filters** yerine **productList.filterCategories** dizisini kullanıyoruz. Normal filtrelerde olduğu gibi bu dizi üzerinde map ediyoruz; her öğede **isSelected** ve **resultCount** field'ları bulunur. Müşteri bir kategoriye tıkladığında **productList.onFilterCategoryClick** fonksiyonunu kullanıyoruz. [Categories](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/product-list/components/categories/index.tsx) component'ine göz atın.
## Ürünler [#products]
Ürünleri filtrelerin sağ tarafında render ediyoruz. Her ürünü render etmek için **productList.data** üzerinde map ediyor, field'ların çoğu için **product.selectedVariant** değerini kullanıyoruz.
Ürün detay sayfasına link vermek için **product.href** kullandık, ancak **product.productHref** de kullanabilirsiniz. Aradaki fark şudur: **product.href** seçili varyantın URL'ine, **product.productHref** ise stokta bulunan ilk varyanta yönlendirir. [Product component'ine](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/product-list/right/product/index.tsx) göz atın.
Sıralama seçeneklerini [IkasProductListSortType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-list-sort-type) enum'una göre render ediyoruz. Sıralama tipini değiştirmek için **productList.setSortType** fonksiyonunu kullanıyoruz. [Sort component'ine](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/product-list/right/sort/index.tsx) göz atın.
Müşterinin önceki ya da sonraki sayfaya geçip geçemeyeceğini kontrol etmek için **productList.hasPrev** ve **productList.hasNext** sayfalama field'larını kullanıyoruz. Yeni bir ürün sayfası getirmek için **getPage** fonksiyonunu kullanıyoruz. [IkasProductList](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-list) class'ının **getNext** ve **getPrev** fonksiyonlarını da kullanabilirsiniz. [Pagination component'ine](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/product-list/right/pagination/index.tsx) göz atın.
Sonsuz kaydırmalı (infinite scroll) bir ürün listesi oluşturmak istiyorsanız **getPrev** ve **getNext** fonksiyonlarını kullanın. Ayrıca ürün listesinde o anda hangi sayfanın göründüğünü belirtmek için **setVisibleInfiniteScrollPage** fonksiyonunu kullanın. Müşteri bir ürünün sayfasına gidip ürün listesine geri döndüğünde bu fonksiyon, listenin son kaydırma konumunu geri yüklemeye yardımcı olur.