Saltar al contenido principal
Repositorio de Github: https://github.com/KlipFit/kleep-spm

​
Instalación

Este proceso solo debe seguirse una vez, la primera vez que necesites instalar el SDK en tu proyecto. Consulta la sección Actualización para ver las instrucciones de actualizaciones posteriores.
  1. Añade el siguiente paquete: https://github.com/KlipFit/kleep-spm
  2. Cambia la regla de dependencia a: hasta la siguiente versión mayor

​
Permisos

Añade el siguiente permiso a tu proyecto en info.plist: NSCameraUsageDescription

​
Uso

​
Método 1: requestSize

Este método permite implementar la lógica del CTA.
parámetroprioridaddescripción
productIDobligatorioEl ID de tu producto
retailerNameobligatorioNombre del comerciante
customerIDopcionalIdentificador CRM, usado para analíticas
trackingIDopcionalID de usuario usado por la solución de seguimiento externa
Esquema lógico Este esquema explica cómo actualizar el CTA que abre Kleep. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Ejemplo de implementación 
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)
	          }
        }
    }
}

​
Método 2: loadView

Este método se llama cuando se hace clic en el CTA. Permite cargar las diferentes pantallas. El desarrollador que integra el SDK debe embebidos en un bottom sheet.
parámetroprioridaddescripción
productIDobligatorioEl ID de tu producto
retailerNameobligatorioNombre del comerciante
customerIDopcionalIdentificador CRM, usado para analíticas
trackingIDopcionalID usado por el proveedor de seguimiento externo
Ejemplo de implementación 
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
}

​
Método 3: track

Este método permite rastrear eventos personalizados.
parámetroprioridaddescripción
eventNameobligatorioNombre del evento a rastrear
paramsopcionalInformación asociada al evento
import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)
Queremos rastrear 3 eventos:
eventNameDisparador
product_viewedAl visualizar la PDP
product_added_to_cartAl añadir producto al carrito
checkout_completedTras la confirmación del pedido después del pago
product_viewed Parámetros (CSV) Ejemplo 
{
		productId: str
}
product_added_to_cart Parámetros (CSV) Ejemplo 
{
    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 Parámetros (CSV) Ejemplo 
{
    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"
				}
	    }
	    ...
    ],
}