> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile SDK - iOS

**Github Repository:** [https://github.com/KlipFit/kleep-spm](https://github.com/KlipFit/kleep-spm)

## Installation

***

Dieser Prozess muss nur einmal durchgeführt werden, wenn Sie das SDK zum ersten Mal in Ihrem Projekt installieren müssen. Weitere Informationen zu nachfolgenden Updates finden Sie im Abschnitt **Update**.

1. Fügen Sie folgendes Paket hinzu: [https://github.com/KlipFit/kleep-spm](https://github.com/KlipFit/kleep-spm)
2. Ändern Sie die Abhängigkeitsregel auf: bis zur nächsten Hauptversion

## Berechtigungen

***

Fügen Sie folgende Berechtigung in info.plist Ihres Projekts hinzu: **NSCameraUsageDescription**

## Verwendung

***

### Methode 1: `requestSize`

Diese Methode ermöglicht die Implementierung der CTA-Logik.

| Parameter        | Priorität      | Beschreibung                                                       |
| ---------------- | -------------- | ------------------------------------------------------------------ |
| **productID**    | *erforderlich* | Ihre Produkt-ID                                                    |
| **retailerName** | erforderlich   | Name des Händlers                                                  |
| **customerID**   | *optional*     | CRM-Identifikator, für Analytics verwendet                         |
| **trackingID**   | *optional*     | Benutzer-ID, die von einer externen Tracking-Lösung verwendet wird |

**Logik-Schema**

Dieses Schema erklärt, wie der CTA zum Öffnen von Kleep aktualisiert wird.

[https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1\&t=ccXWciNziIdfhgew-1](https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1\&t=ccXWciNziIdfhgew-1)

**Implementierungsbeispiel**

```swift theme={null}
import Klipfit

struct ContentView: View {
    @State var isOpenView = false
        
    var body: some View {
        VStack {
            Spacer()
            Button("Open Kleep") {
                isOpenView = true
            }
            Spacer(minLength: 40)
            
            Button("obtenir la taille") {
                Klipfit.shared.requestSize(productID: String, retailerName: String, trackingID: String, customerID: String) { kleepResult in
                    switch kleepResult {
                    case .notSupported:
	                    // Hide CTA
                        print("NotSupported")
                    case .noRecommendationYet:
	                    // Display CTA with neutral label
                        print("NoRecommendationYet")
                    case .recommendationFound(let result):
	                    // Display CTA with size reco
                        print("RecommendationFound: ", result)
                    }
                }
            }
	            Spacer()
        }
        .sheet(isPresented: $isOpenView) {
            KlipFitFindSizeView { result, variantID in 
							// addToCart(variantID)
	          }
        }
    }
}
```

### Methode 2: `loadView`

Diese Methode wird aufgerufen, wenn der CTA angeklickt wird. Sie ermöglicht das Laden der verschiedenen Bildschirme. **Der Entwickler, der das SDK integriert, sollte sie in ein Bottom Sheet einbetten.**

| Parameter        | Priorität      | Beschreibung                                                |
| ---------------- | -------------- | ----------------------------------------------------------- |
| **productID**    | *erforderlich* | Ihre Produkt-ID                                             |
| **retailerName** | *erforderlich* | Name des Händlers                                           |
| **customerID**   | *optional*     | CRM-Identifikator, für Analytics verwendet                  |
| **trackingID**   | *optional*     | ID, die von einem externen Tracking-Anbieter verwendet wird |

**Implementierungsbeispiel**

```swift theme={null}
struct KlipFitFindSizeView: UIViewControllerRepresentable {
		
		public var onResult: KleepOnResultCompletion

    func makeUIViewController(context: Context) -> KlipftNavigationController {
        guard let viewController =
        KlipftNavigationController.loadView(
                productID: String,
                retailerName: String,
                language: KleepLanguageCode, // .fr .en .es .it .pt .nl 
                trackingID: "",
                customerID: "",
                stocks: [String : Bool]?,
                onResult: onResult
        )
        else {
            fatalError("ViewController not implemented in storyboard")
        }
        viewController.navigationBar.isHidden = true
        return viewController
    }
    func updateUIViewController(_ uiViewController: KlipftNavigationController, context: Context) {
    }
    typealias UIViewControllerType = KlipftNavigationController
}
```

### Methode 3: `track`

Diese Methode ermöglicht das Tracking benutzerdefinierter Ereignisse.

| Parameter | Priorität      | Beschreibung                              |
| --------- | -------------- | ----------------------------------------- |
| eventName | *erforderlich* | Name des zu trackenden Ereignisses        |
| params    | *optional*     | Mit dem Ereignis verbundene Informationen |

```swift theme={null}
import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)
```

Wir möchten 3 Ereignisse tracken:

| eventName               | Auslöser                                     |
| ----------------------- | -------------------------------------------- |
| `product_viewed`        | Beim Aufrufen des PDP                        |
| `product_added_to_cart` | Beim Hinzufügen eines Produkts zum Warenkorb |
| `checkout_completed`    | Bei der Bestellbestätigung nach der Zahlung  |

**`product_viewed`**

[Parameter (CSV)](/images/ios/Untitled%202c68bfd3e84981cabf11f24acd542d96.csv)

**Beispiel**

```jsx theme={null}
{
		productId: str
}
```

**`product_added_to_cart`**

[Parameter (CSV)](/images/ios/Untitled%202c68bfd3e84981858563ca1319b138e8.csv)

**Beispiel**

```jsx theme={null}
{
    productId: str,
    variantId: str,
    cart: [
	    {
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
				sku: "XYZ",
		    size: "S",
		    quantity: 2,
		    price: {
						amount: "50",
				    currencyCode: "EUR"		    
		    }
	    },
	    {
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
		    sku: "XYZ",
		    size: "S",
		    quantity: 1,
		    price: {
				    amount: "40",
				    currencyCode: "USD"
				}
	    }
	    ...
    ],
}
```

**`checkout_completed`**

[Parameter (CSV)](/images/ios/Untitled%202c68bfd3e84981e7ad20d59d320148e0.csv)

**Beispiel**

```jsx theme={null}
{
    orderId: "000001",
    cart: [
	    {
		    lineItemId: "000001#1",
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
				sku: "XYZ",
		    size: "S",
		    quantity: 2,
		    price: {
						amount: "50",
				    currencyCode: "EUR"		    
		    }
	    },
	    {
			  lineItemId: "000000#2",
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
		    sku: "XYZ",
		    size: "S",
		    quantity: 1,
		    price: {
				    amount: "40",
				    currencyCode: "USD"
				}
	    }
	    ...
    ],
}
```