---
title: Product List
description: Component'lerinizde birden fazla ürün göstermenizi sağlayan Product List prop tipi ve liste türleri.
---

<Callout type="warn" title="Eski altyapı">
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.
</Callout>

Product List prop tipi, component'lerinizde birden fazla ürün göstermenizi sağlar. Bu ürünler mağaza sahibi tarafından manuel olarak seçilebilir ya da API'den otomatik olarak getirilebilir. Aşağıda her biri ayrı ayrı anlatılan birkaç ürün listesi türü vardır.

Component'inize gelen prop değeri bir [IkasProductList](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-list) instance'ıdır. Sayfalama, filtreleme ve arama fonksiyonları dahil olmak üzere bir ürün listesini göstermek için ihtiyaç duyduğunuz her şey bu class'ta bulunur. Bu class'taki `data` field'ı bir [IkasProduct](https://builders.ikas.com/docs/headless-theme/api/products#ikas-product) dizisi içerir. Ürün listesinin tüm field'larını tek bir sayfada anlatmak zor olacağından, önce [IkasProductList](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-list) referansına göz atmanızı öneririz. Ardından bu class'ın kullanımını [Örnek Tema](https://builders.ikas.com/docs/headless-theme/example-theme/product-list) sayfasında inceleyebilirsiniz.

```tsx
export type ProductListExampleProps = {
    ...
    productList: IkasProductList;
};
```

## All [#all]

`All` türündeki ürün listesi, mağaza sahibinin tüm ürünlerini [IkasProductList](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-list) class'ının sağladığı sayfalama fonksiyonlarıyla (`getNext`, `getPrev`, `getPage`) göstermenizi sağlar. Ürünlerin ilk sayfası sunucu tarafında sizin için otomatik olarak getirilir.

Mağaza sahipleri sıralama türü ve sayfa boyutu için `Initial Sort` ve `Initial Limit` değerlerini de seçebilir.

`Use page data as filter` onay kutusu yalnızca component'iniz `Category Page` ya da `Brand Page`'e eklendiğinde görünür. Mağaza sahibi bu sayfalarda kutuyu işaretlerse ürün listesi, mevcut sayfanın kategorisine ya da markasına göre otomatik olarak filtrelenir.

![Tema editöründe All türündeki ürün listesi seçici](https://builders.ikas.com/media/ikas-dev/product-list-selector-all-e19a542f18fad40a03e7ae4e39655905.png)

## Static [#static]

`Static` türündeki ürün listesi, mağaza sahiplerinin belirli ürünleri seçmesini sağlar. Liste statik olduğu için sayfalama fonksiyonlarına ihtiyacınız olmaz; yalnızca verilen ürünleri gösterirsiniz. Şu anda eklenebilecek ürün sayısında bir sınır yoktur, ancak component'inizde gösterilen ürün sayısını siz sınırlayabilirsiniz.

![Tema editöründe Static türündeki ürün listesi seçici](https://builders.ikas.com/media/ikas-dev/product-list-selector-static-823bc49f3ae1e86151b6682d26dfcbd2.png)

## Category Products [#category-products]

`Category Products` türündeki ürün listesi, mağaza sahibinin belirli bir kategoriye ait tüm ürünleri seçmesini sağlar.

![Tema editöründe Category Products türündeki ürün listesi seçici](https://builders.ikas.com/media/ikas-dev/product-list-selector-category-d9f8b063d0e4785a489945e45cde3237.png)

## Search [#search]

`Search` türündeki ürün listesi, [All](#all) türüyle neredeyse aynı işleve sahiptir. Tek farkı, ürünlerin ilk sayfasını otomatik olarak getirmemesidir. Ürünler yalnızca [IkasProductList](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-list) nesnenizin `searchKeyword` field'ını ayarladığınızda getirilir. Bu tür, header component'lerindeki arama alanları için kullanılmalıdır.

![Tema editöründe Search türündeki ürün listesi seçici](https://builders.ikas.com/media/ikas-dev/product-list-selector-search-7e667ea268ea2b893f5de2abe71edf9a.png)

## Last Viewed Products [#last-viewed-products]

`Last Viewed Products` türü adından da anlaşılacağı gibi çalışır. Müşterinin ziyaret ettiği ürünler otomatik olarak kaydedilir ve bu tür, söz konusu ürünlere erişmenizi sağlar. Liste tek sayfalık ürünlerden oluştuğu için sonraki sayfayı sayfalama fonksiyonlarıyla getirmeniz gerekmez.

![Last Viewed Products türünün seçimi](https://builders.ikas.com/media/ikas-dev/prop-type-last-viewed-products.png)

## Related Products [#related-products]

`Related Products` türü yalnızca component'iniz `Product Page`'e eklendiğinde görünür. `Product Page`'de gösterilen ürünün ilgili ürünlerine erişmenizi sağlar. Mağaza sahipleri ilgili ürünlerin nasıl bulunacağını da seçebilir: aynı markaya ya da aynı kategoriye sahip ürünler.

![Tema editöründe Related Products türündeki ürün listesi seçici](https://builders.ikas.com/media/ikas-dev/product-list-selector-related-258e05a002a8a34e22dae5badace5eaa.png)