---
title: Tema ve ortak modeller
description: Eski headless tema altyapısındaki (@ikas/storefront) tema yapılandırması (theme.json), component render, navigasyon linki ve görsel gibi ortak modeller.
---

<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>

Tema yapılandırması (theme.json), component render, navigasyon linki ve görsel gibi ortak modeller. Her başlık, `@ikas/storefront` paketindeki bir modelin field'larını ve metotlarını listeler.

## IkasThemeJson [#ikas-theme-json]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `name` | `string` | - |
| `components` | `IkasThemeJsonComponent[]` | Bkz. [IkasThemeJsonComponent](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-component). |
| `pages` | `IkasThemeJsonPage[]` | Bkz. [IkasThemeJsonPage](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-page). |
| `settings` | `IkasThemeJsonSettings` | Bkz. [IkasThemeJsonSettings](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-settings). |
| `customData` | `IkasThemeJsonCustomData[]` | Bkz. [IkasThemeJsonCustomData](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-custom-data). |
| `headerComponent` | `IkasThemeJsonComponent \| undefined` | Bkz. [IkasThemeJsonComponent](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-component). |
| `footerComponent` | `IkasThemeJsonComponent \| undefined` | Bkz. [IkasThemeJsonComponent](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-component). |

## IkasImage [#ikas-image]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `src` | `string` | Görselin 1080px boyutundaki URL'si. |
| `thumbnailSrc` | `string` | Görselin 180px boyutundaki URL'si. |

**Metotlar**

**`getSrc`**

Verilen boyuta en yakın görsel boyutunun URL'sini döndürür.

```typescript
function getSrc(size: number): string
```

| Parametre | Tip |
| --- | --- |
| `size` | `number` |

## IkasNavigationLink [#ikas-navigation-link]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `href` | `string` | - |
| `label` | `string` | - |
| `subLinks` | `IkasNavigationLink[]` | Geçerli linkin alt linkleri. İç içe navigasyon menüleri oluşturmak için bu prop'u kullanın. |
| `isExternal` | `boolean` | - |
| `itemId` | `boolean` | Linkin işaret ettiği veri modelinin id'si. Örneğin link belirli bir ürün sayfasına gidiyorsa `itemId`, ürünün id'sine eşit olur. |

## IkasBaseModel [#ikas-base-model]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `createdAt` | `number` | - |
| `updatedAt` | `number` | - |
| `deleted` | `boolean` | - |

## IkasComponentRenderer [#ikas-component-renderer]

**Metotlar**

**`render`**

Bir component'i render etmek için kullanılan fonksiyon.

```typescript
function render(): React.ReactNode
```

## IkasSlider [#ikas-slider]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `value` | `number` | - |
| `unit` | `string \| null` | - |

## IkasThemeJsonColorTranslation [#ikas-theme-json-color-translation]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `displayName` | `string \| null` | - |

## IkasThemeJsonColor [#ikas-theme-json-color]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `displayName` | `string` | - |
| `key` | `string` | - |
| `color` | `string` | - |
| `translations` | `{[locale: string]: IkasThemeJsonColorTranslation;}` | Bkz. [IkasThemeJsonColorTranslation](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-color-translation). |

## IkasThemeJsonComponentProp [#ikas-theme-json-component-prop]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `name` | `string` | - |
| `displayName` | `string` | - |
| `description` | `string` | - |
| `type` | `IkasThemeJsonComponentPropType` | Bkz. [IkasThemeJsonComponentPropType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-theme-json-component-prop-type). |
| `isRequired` | `boolean` | - |
| `customDataId` | `string \| null` | - |
| `requiredPropId` | `string` | - |
| `requiredEnumOptionId` | `string` | - |
| `requiredEnumOptionValue` | `string` | - |
| `attributeTypes` | `IkasProductAttributeType[] \| null` | Bkz. [IkasProductAttributeType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-attribute-type). |
| `sliderData` | `IkasThemeJsonSliderData` | Bkz. [IkasThemeJsonSliderData](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-slider-data). |
| `translations` | `{[locale: string]: PropTranslation;}` | Bkz. [PropTranslation](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#prop-translation). |

## IkasThemeJsonComponent [#ikas-theme-json-component]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `dir` | `string` | - |
| `displayName` | `string` | - |
| `description` | `string` | - |
| `props` | `IkasThemeJsonComponentProp[]` | Bkz. [IkasThemeJsonComponentProp](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-component-prop). |
| `isHeader` | `boolean` | - |
| `isFooter` | `boolean` | - |
| `translations` | `{[locale: string]: ComponentTranslation;}` | - |

## IkasThemeJsonCustomDataEnumOptionTranslation [#ikas-theme-json-custom-data-enum-option-translation]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `displayName` | `string` | - |

## IkasThemeJsonCustomDataTranslation [#ikas-theme-json-custom-data-translation]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `name` | `string \| null` | - |
| `description` | `string \| null` | - |

## IkasThemeJsonCustomData [#ikas-theme-json-custom-data]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `name` | `string \| null` | - |
| `description` | `string \| null` | - |
| `typescriptName` | `string \| null` | - |
| `type` | `IkasThemeJsonComponentPropType` | Bkz. [IkasThemeJsonComponentPropType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-theme-json-component-prop-type). |
| `isRequired` | `boolean` | - |
| `translations` | `{[locale: string]: IkasThemeJsonCustomDataTranslation;}` | Bkz. [IkasThemeJsonCustomDataTranslation](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-custom-data-translation). |
| `key` | `string \| null` | - |
| `nestedData` | `IkasThemeJsonCustomData[] \| null` | Bkz. [IkasThemeJsonCustomData](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-custom-data). |
| `itemCount` | `number \| null` | - |
| `attributeTypes` | `IkasProductAttributeType[] \| null` | Bkz. [IkasProductAttributeType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-product-attribute-type). |
| `enumOptions` | `IkasThemeJsonEnumOption[] \| null` | Bkz. [IkasThemeJsonEnumOption](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-enum-option). |
| `customDataId` | `string \| null` | - |
| `sliderData` | `IkasThemeJsonSliderData` | Bkz. [IkasThemeJsonSliderData](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-slider-data). |
| `isRoot` | `boolean` | - |
| `parent` | `IkasThemeJsonCustomData \| null` | Bkz. [IkasThemeJsonCustomData](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-custom-data). |
| `flat` | `IkasThemeJsonCustomData[]` | Bkz. [IkasThemeJsonCustomData](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-custom-data). |

**Metotlar**

**`toJSON`**

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

## IkasThemeJsonEnumOption [#ikas-theme-json-enum-option]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `displayName` | `string` | - |
| `value` | `string` | - |
| `translations` | `{[locale: string]: IkasThemeJsonCustomDataEnumOptionTranslation;}` | Bkz. [IkasThemeJsonCustomDataEnumOptionTranslation](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-custom-data-enum-option-translation). |

## IkasThemeJsonFavicon [#ikas-theme-json-favicon]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |

## IkasThemeJsonFontFamily [#ikas-theme-json-font-family]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `name` | `string \| null` | - |
| `variants` | `string[] \| null` | - |

## IkasThemeJsonPageComponent [#ikas-theme-json-page-component]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `componentId` | `string` | - |
| `propValues` | `Record<string, any>` | - |

## IkasThemeJsonPageSpecification [#ikas-theme-json-page-specification]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `components` | `IkasThemeJsonPageComponent[]` | Bkz. [IkasThemeJsonPageComponent](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-page-component). |

## IkasThemeJsonPage [#ikas-theme-json-page]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `id` | `string` | - |
| `name` | `string \| null` | - |
| `type` | `IkasThemeJsonPageType` | Bkz. [IkasThemeJsonPageType](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-theme-json-page-type). |
| `slug` | `string \| null` | - |
| `pageTitle` | `string \| null` | - |
| `description` | `string \| null` | - |
| `components` | `IkasThemeJsonPageComponent[]` | Bkz. [IkasThemeJsonPageComponent](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-page-component). |
| `specifications` | `IkasThemeJsonPageSpecification[] \| null` | Bkz. [IkasThemeJsonPageSpecification](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-page-specification). |
| `canonicals` | `string[] \| null` | - |
| `disableIndex` | `boolean \| null` | - |

## IkasThemeJsonSettings [#ikas-theme-json-settings]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `colors` | `IkasThemeJsonColor[]` | Bkz. [IkasThemeJsonColor](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-color). |
| `favicon` | `IkasThemeJsonFavicon` | Bkz. [IkasThemeJsonFavicon](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-favicon). |
| `stockPreference` | `IkasThemeJsonStockPreference` | Bkz. [IkasThemeJsonStockPreference](https://builders.ikas.com/docs/headless-theme/api/enums#ikas-theme-json-stock-preference). |
| `fontFamily` | `IkasThemeJsonFontFamily` | Bkz. [IkasThemeJsonFontFamily](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-theme-json-font-family). |

## IkasThemeJsonSliderData [#ikas-theme-json-slider-data]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `min` | `number` | - |
| `max` | `number` | - |
| `interval` | `number` | - |
| `unit` | `string` | - |

## PropTranslation [#prop-translation]

| Field | Tip | Açıklama |
| --- | --- | --- |
| `displayName` | `string \| null` | - |
| `description` | `string \| null` | - |