---
title: Ürün listeleri ve filtreler
description: Eski headless tema altyapısındaki (@ikas/storefront) ürün listeleme, sayfalama ve ürün filtreleme modelleri.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısının (`@ikas/storefront`) referansıdır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Ürün listeleme, sayfalama ve ürün filtreleme modelleri. Her başlık, `@ikas/storefront` paketindeki bir modelin field'larını ve metotlarını listeler.

## IkasProductList [#ikas-product-list]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `data` | `IkasProduct[]` | Bkz. [IkasProduct](https://builders.ikas.com/docs/headless-theme/api/products#ikas-product). |
| `filters` | `IkasProductFilter[] \| null` | Bkz. [IkasProductFilter](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-filter). |
| `sort` | `IkasProductListSortType` | Bkz. [IkasProductListSortType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-list-sort-type). |
| `limit` | `number` | - |
| `pageType` | `IkasThemeJsonPageType` | Bkz. [IkasThemeJsonPageType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-theme-json-page-type). |
| `page` | `number` | - |
| `minPage` | `number` | - |
| `count` | `number` | - |
| `pageCount` | `number` | - |
| `searchKeyword` | `string` | - |
| `searchKeyword` | `setter` | - |
| `isInitialized` | `boolean` | - |
| `isFilterable` | `boolean` | - |
| `isFiltered` | `boolean \| undefined` | - |
| `isStatic` | `boolean` | - |
| `isDiscounted` | `boolean` | - |
| `isRecommended` | `boolean` | - |
| `isLastViewed` | `boolean` | - |
| `isRelatedProducts` | `boolean` | - |
| `isSearch` | `boolean` | - |
| `hasPrev` | `boolean` | - |
| `hasNext` | `boolean` | - |
| `isLoading` | `boolean` | - |
| `filterQueryParams` | `string` | - |
| `filterCategories` | `IkasFilterCategory[] \| undefined` | Bkz. [IkasFilterCategory](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-filter-category). |
| `hasAppliedfilter` | `boolean \| undefined` | - |
| `isFeaturedSortEnabled` | `boolean` | - |

**Metotlar**

**`clearFilters`**

```typescript
function clearFilters(): void
```

**`getPrev`**

```typescript
function getPrev(): Promise<void>
```

**`getNext`**

```typescript
function getNext(): Promise<void>
```

**`getPage`**

```typescript
function getPage(page: number): Promise<void>
```

| Parametre | Tip |
| --- | --- |
| `page` | `number` |

**`setSortType`**

```typescript
function setSortType(sortType: IkasProductListSortType): Promise<void>
```

| Parametre | Tip |
| --- | --- |
| `sortType` | `IkasProductListSortType` |

**`onFilterCategoryClick`**

```typescript
function onFilterCategoryClick(filterCategory: IkasFilterCategory, disableRoute = false): Promise<void>
```

| Parametre | Tip |
| --- | --- |
| `filterCategory` | `IkasFilterCategory` |
| `disableRoute` | `boolean` |

**`toJSON`**

```typescript
function toJSON(): { data: IkasProduct[]; type: IkasProductListType; pageType: IkasThemeJsonPageType; sort: IkasProductListSortType; limit: number; page: number; count: number; searchKeyword: string; initialized: boolean; minPage: number | null | undefined; filterBrandId: string | null | undefined; filterCategoryId: string | null | undefined; filterCategories: IkasFilterCategory[] | null | undefined; filters: IkasProductFilter[] | null | undefined; recommendFor: string | null | undefined; productListPropValue: IkasProductListPropValue; pageSpecificData: IkasBrand | IkasCategory | null | undefined;}
```

**`setVisibleInfiniteScrollPage`**

```typescript
function setVisibleInfiniteScrollPage(page: number): void
```

| Parametre | Tip |
| --- | --- |
| `page` | `number` |

## IkasProductFilter [#ikas-product-filter]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `key` | `string` | - |
| `name` | `string` | - |
| `order` | `string` | - |
| `type` | `IkasProductFilterType` | Bkz. [IkasProductFilterType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-filter-type). |
| `displayType` | `IkasProductFilterDisplayType` | Bkz. [IkasProductFilterDisplayType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-filter-display-type). |
| `isMultiSelect` | `boolean` | - |
| `isFacetFilter` | `boolean \| null` | - |
| `values` | `IkasApplicableProductFilterValue[] \| null` | Bkz. [IkasApplicableProductFilterValue](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-applicable-product-filter-value). |
| `customValues` | `string[] \| null` | - |
| `settings` | `IkasProductFilterSettings \| null` | Bkz. [IkasProductFilterSettings](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-filter-settings). |
| `numberRange` | `IkasFilterRangeValue \| null \| undefined` | Bkz. [IkasFilterRangeValue](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-filter-range-value). |
| `isCustomValueFilter` | `boolean` | - |
| `isStockFilter` | `boolean` | - |
| `valueList` | `string[]` | - |
| `keyList` | `string[]` | - |
| `displayedValues` | `IkasApplicableProductFilterValue[]` | Bkz. [IkasApplicableProductFilterValue](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-applicable-product-filter-value). |

**Metotlar**

**`onFilterValueClick`**

```typescript
function onFilterValueClick(filterValue: IkasApplicableProductFilterValue): void
```

| Parametre | Tip |
| --- | --- |
| `filterValue` | `IkasApplicableProductFilterValue` |

**`onNumberRangeClick`**

```typescript
function onNumberRangeClick(option: IkasProductFilterNumberRangeListOption): void
```

| Parametre | Tip |
| --- | --- |
| `option` | `IkasProductFilterNumberRangeListOption` |

**`onNumberRangeChange`**

```typescript
function onNumberRangeChange(numberRange: IkasFilterRangeValue | null): void
```

| Parametre | Tip |
| --- | --- |
| `numberRange` | `IkasFilterRangeValue \| null` |

**`clear`**

```typescript
function clear(): void
```

**`toInput`**

```typescript
function toInput(): IkasProductFilterFunctions.IkasSearchInputFilterListInput
```

**`toJSON`**

```typescript
function toJSON(): Object
```

**`applyQueryParam`**

```typescript
function applyQueryParam(value: string): void
```

| Parametre | Tip |
| --- | --- |
| `value` | `string` |

## IkasApplicableProductFilterValue [#ikas-applicable-product-filter-value]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `key` | `string` | Filtre değerini tanımlayan benzersiz string. |
| `name` | `string` | Filtre değerinin merchant için anlaşılır adı. |
| `colorCode` | `string \| null` | Filtre değerinin CSS renk kodu. Bu field yalnızca `displayType` değeri [IkasProductFilterDisplayType.SWATCH](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-filter-display-type) olan [filtrelerde](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-filter) bulunur. |
| `thumbnailImageId` | `string \| null` | Filtre değerinin görsel id'si. Bu field yalnızca `displayType` değeri [IkasProductFilterDisplayType.SWATCH](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-filter-display-type) olan [filtrelerde](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-filter) bulunur. |
| `thumbnailImage` | `IkasImage \| null` | Filtre değerinin görseli. Bu field yalnızca `displayType` değeri [IkasProductFilterDisplayType.SWATCH](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-filter-display-type) olan [filtrelerde](https://builders.ikas.com/docs/headless-theme/api/product-lists-and-filters#ikas-product-filter) bulunur. Bkz. [IkasImage](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-image). |
| `resultCount` | `number \| null` | Bu filtre değeri uygulandığında listelenecek toplam ürün sayısı. Ziyaretçilerin filtre seçmeden önce kaç ürün bulunduğunu görebilmesi için bu sayıyı adın yanında gösterebilirsiniz; örneğin Small (400), Red (30). |
| `isSelected` | `boolean` | Bu filtre değerinin şu anda seçili (uygulanmış) olup olmadığını belirtir. |

## IkasFilterCategory [#ikas-filter-category]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `name` | `string` | - |
| `metaData` | `IkasHTMLMetaData \| null` | Bkz. [IkasHTMLMetaData](https://builders.ikas.com/docs/headless-theme/api/storefront-and-settings#ikas-html-meta-data). |
| `resultCount` | `number \| null` | - |
| `isSelected` | `boolean` | - |
| `slug` | `string \| undefined` | - |
| `href` | `string` | - |

## IkasFilterRangeValue [#ikas-filter-range-value]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `from` | `number` | - |
| `to` | `number \| undefined \| null` | - |

## IkasProductFilterSettings [#ikas-product-filter-settings]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `useAndFilter` | `boolean \| null` | - |
| `showCollapsedOnDesktop` | `boolean` | - |
| `showCollapsedOnMobile` | `boolean` | - |
| `sortType` | `IkasProductFilterSortType` | Bkz. [IkasProductFilterSortType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-filter-sort-type). |
| `customSortedValues` | `string[] \| null` | - |