Saltar para o conteúdo principal
Repositório Github: https://github.com/KlipFit/kleep-spm

Instalação


Este processo só precisa de ser seguido uma vez, na primeira vez que instala o SDK no seu projeto. Consulte a secção Atualização para ver as instruções para atualizações subsequentes.
  1. Adicione o seguinte pacote: https://github.com/KlipFit/kleep-spm
  2. Altere a regra de dependência para: até à próxima versão major

Permissões


Adicione a seguinte permissão ao seu projeto em info.plist: NSCameraUsageDescription

Utilização


Método 1: requestSize

Este método permite implementar a lógica do CTA.
parâmetroprioridadedescrição
productIDobrigatórioO seu ID de produto
retailerNameobrigatórioNome do retalhista
customerIDopcionalIdentificador CRM, utilizado para análise
trackingIDopcionalID de utilizador utilizado por solução de tracking externa
Esquema lógico Este esquema explica como atualizar o CTA que abre o Kleep. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Exemplo de implementação
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 é chamado quando o CTA é clicado. Permite carregar os diferentes ecrãs. O programador que integra o SDK deve incorporá-los numa bottom sheet.
parâmetroprioridadedescrição
productIDobrigatórioO seu ID de produto
retailerNameobrigatórioNome do retalhista
customerIDopcionalIdentificador CRM, utilizado para análise
trackingIDopcionalID utilizado por fornecedor de tracking externo
Exemplo de implementação
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 fazer o tracking de eventos personalizados.
parâmetroprioridadedescrição
eventNameobrigatórioNome do evento a fazer tracking
paramsopcionalInformação associada ao evento
import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)
Pretendemos fazer o tracking de 3 eventos:
eventNameAcionador
product_viewedQuando o PDP é visualizado
product_added_to_cartQuando o produto é adicionado ao carrinho
checkout_completedQuando a encomenda é confirmada após o pagamento
product_viewed Parâmetros (CSV) Exemplo
{
		productId: str
}
product_added_to_cart Parâmetros (CSV) Exemplo
{
    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) Exemplo
{
    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"
				}
	    }
	    ...
    ],
}