SDK Sline
Installation
Rajoutez la balise suivante à la fin de la section <head> de votre page:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/sline-io/web-sdk@2.2/sline-sdk.min.js"></script>
Initialisation
Dans votre code, voici à quoi doivent ressembler les boutons:
<a href="#" class="addToCart" data-sku="sku1">Louer</a>
<a href="#" class="addToCart" data-sku="sku2">Louer</a>
A la fin de votre <body>, ajoutez la ligne suivante:
<script type="text/javascript">
Sline.Initialize({
retailer: retailerId,
production: false,
checkoutButton: {
//id: 'rent-btn',
classPath: '.addToCart',
prefix: 'Louer à partir de ',
suffix: '/mois',
events: {
customOnClickEvent: true
}
},
durationSelector: {
id: 'period-selector'
}
});
</script>
Configuration
Options principales
Paramètre | Type | Description | Obligatoire |
---|---|---|---|
retailer | String | Identifiant du marchand | Oui |
production | Boolean | Mettre à true si vous êtes en production, sinon à false | Oui |
checkoutButton | Object | Voir les options du checkoutButton plus bas | Oui |
durationSelector | Object | Voir les options du durationSelector plus bas | Non |
Configuration du CheckoutButton
Paramètre | Type | Description | Obligatoire |
---|---|---|---|
id | String | Identifiant du bouton | Oui, si le classPath n'est pas rempli |
classPath | String | Chemin d'accès aux boutons en CSS. Lisez le chapitre sur l'affichage de plusieurs produits. | Oui, si l'id n'est pas rempli |
prefix | String | Texte qui apparaîtra avant le prix dans le bouton | Non |
suffix | String | Texte qui apparaîtra après le prix dans le bouton | Non |
events | Object | Voir la configuration des évènements du checkoutButton | Non |
Configuration du CheckoutButton.Events
Paramètre | Type | Description | Obligatoire |
---|---|---|---|
customOnClickEvent | Boolean | Mettre à true si vous écoutez des évènements sur le click du bouton de checkout | Non |
Configuration du DurationSelector
Paramètre | Type | Description | Obligatoire |
---|---|---|---|
id | String | Identifiant du selecteur de durée | Non |
Variables accessibles
Cart
Contient la liste des produits et les quantités associées
Sline.cart: {product, quantity}[]
Durations
Contient la liste des différentes durées de locations disponibles (en mois). La valeur -1 représente un location sans engagement
Sline.durations: number[]
Prices
Contient la liste des produits et les prix associés en fonction de la durée de location
Sline.prices: Object
Voici un exemple de prix:
{
produit1: {
durée1: {
firstInstalmentPrice: {amount: 20000, currency: 'EUR'}
otherInstalmentPrice: {amount: 5000, currency: 'EUR'}
},
durée2: {
firstInstalmentPrice: {amount: 25000, currency: 'EUR'}
otherInstalmentPrice: {amount: 7000, currency: 'EUR'}
}
}
produit2: {
durée1: {
firstInstalmentPrice: {amount: 20000, currency: 'EUR'}
otherInstalmentPrice: {amount: 5000, currency: 'EUR'}
},
durée2: {
firstInstalmentPrice: {amount: 25000, currency: 'EUR'}
otherInstalmentPrice: {amount: 7000, currency: 'EUR'}
}
}
}
Méthodes
Voici les différentes méthodes disponibles via le SDK:
Initialize
Initialize doit être la première méthode que vous appelez pour configurer le SDK
Sline.Initialize(options)
ResetCart
ResetCart permet de vider complètement le panier actuel
Sline.ResetCart()
AddCart
Ajoute un produit dans le panier. Si le produit est déjà présent, la quantité passée en paramètre remplacera l'ancienne valeur
Sline.AddCart(item, quantity)
Paramètre | Type | Description | Obligatoire |
---|---|---|---|
item | string | Identifiant du produit | Oui |
quantity | Number | Nombre d'exemplaires du produit à ajouter | Oui |
UpdateCart
Ajoute un produit dans le panier. Si le produit est déjà présent, la quantité passée en paramètre remplacera l'ancienne valeur
Sline.UpdateCart(item, quantity)
Paramètre | Type | Description | Obligatoire |
---|---|---|---|
item | string | Identifiant du produit | Oui |
quantity | Number | Nombre d'exemplaires du produit à ajouter | Oui |
GetPriceForProductWithDuration
Retourne le prix (formatté avec la devise) pour un produit en fonction de la durée de location et de la quantité
Sline.GetPriceForProductWithDuration(item, quantity);
Paramètre | Type | Description | Obligatoire |
---|---|---|---|
elementId | String | ID du bouton déclencheur | Oui |
title | String | Texte qui sera injecté dans le bouton, en préfixe de "X€/mois". Valeur par défaut: "Louer à partir de " | Non |
Affichage de plusieurs produits sur une page
Si vous affichez plusieurs produits sur une page, vous devez configurer le sdk avec le champ checkoutButton.classPath et non checkoutButton.id. Vous devrez rajouter un attribut "data-sku" sur le bouton d'action, ainsi que sur d'éventuels boutons de gestion de quantité de produit.
Si vous souhaitez que le clic sur le bouton d'un produit ajoute simplement ce dernier au panier tout en restant sur la page, vous devez configurer le SDK avec events.customOnClickEvent = true et gérer les évènements dans votre code, y compris l'appel de la méthode AddCart.
Si vous souhaitez que le clic vous emmène directement sur la page de checkout, vous n'avez pas de configuration particulière à rajouter.