---
title: "Script Installer"
description: "Storefront script'ini kur, güncelle, kaldır. Her storefront için durum ve satır içi aksiyonlar."
---

<Callout type="info" title="Ne zaman kullanılır">
Mağaza vitrinine widget, pixel veya rozet ekleyen her uygulamanın ayar ekranında.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/script-installer
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Storefront'lar

Kurulu, güncel değil ve kurulu değil durumları. Kaldırma iki adımlı onay ister.

**Örnek: Storefront'lar** (`script-installer/storefronts`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/script-installer/storefronts)

```tsx
import * as React from "react"
import { toast } from "sonner"

import { ScriptInstaller, type Storefront } from "@/components/ikas/script-installer"
import { storefronts as storeStorefronts, widgetScriptUrl } from "@/demos/_data"

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

export default function ScriptInstallerStorefronts() {
  const [storefronts, setStorefronts] = React.useState<Storefront[]>(() => {
    const status: Storefront["status"][] = ["installed", "outdated", "not-installed"]
    return storeStorefronts.map((s, i) => ({ ...s, status: status[i] }))
  })
  const setStatus = (id: string, status: Storefront["status"]) => setStorefronts((list) => list.map((s) => (s.id === id ? { ...s, status } : s)))

  return (
    <ScriptInstaller
      className="w-full max-w-xl"
      scriptUrl={widgetScriptUrl}
      storefronts={storefronts}
      onInstall={async (id) => {
        await wait(1200)
        setStatus(id, "installed")
        toast.success("Script kuruldu")
      }}
      onRemove={async (id) => {
        await wait(800)
        setStatus(id, "not-installed")
        toast.success("Script kaldırıldı")
      }}
    />
  )
}
```

### Localhost uyarısı

Script adresi localhost ise storefront onu yükleyemez; bileşen bunu kendisi uyarır.

**Örnek: Localhost uyarısı** (`script-installer/localhost`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/script-installer/localhost)

```tsx
import { ScriptInstaller } from "@/components/ikas/script-installer"
import { storefronts } from "@/demos/_data"

/** A localhost script URL triggers the "not reachable from the storefront" warning. */
export default function ScriptInstallerLocalhost() {
  return (
    <ScriptInstaller
      className="w-full max-w-xl"
      scriptUrl="http://localhost/widget.js"
      storefronts={[{ ...storefronts[0], status: "not-installed" }]}
      onInstall={() => {}}
      onRemove={() => {}}
    />
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Durumu her zaman ikas API'sinden okuyun, varsaymayın.
- Kurulumdan sonra toast ile sonucu bildirin.

**Yapmayın:**

- Kaldırmayı onaysız yapmayın.
- Script adresini gizlemeyin; destek için kopyalanabilir olmalı.

## API

### `ScriptInstaller`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `scriptUrl` (zorunlu) | `string` | - | Storefront'a eklenecek script'in genel adresi. |
| `storefronts` (zorunlu) | `Storefront[]` | - | ikas'tan gelen storefront listesi ve script durumu. |
| `onInstall` (zorunlu) | `(storefrontId: string) => Promise<void> \| void` | - | Kur/güncelle ve kaldır. Promise dönerse satır o süre boyunca yükleniyor gösterir. |
| `onRemove` (zorunlu) | `(storefrontId: string) => Promise<void> \| void` | - | Kur/güncelle ve kaldır. Promise dönerse satır o süre boyunca yükleniyor gösterir. |
| `className` | `string` | - |  |