A qui se destine cette page ?
Cette page présente un intérêt pour :
Les professionnels ayant déjà leur site web et souhaitant y intégrer les fonctionnalités de Kalendes.
Cette page leur permettra de découvrir les possibilités offertes par le widget Kalendes
Les webmasters ou intégrateurs qui cherchent comment intégrer le widget Kalendes dans le site de leur client. Ils trouveront ici des exemples de code pour faciliter leur implémentation
Intégrer le Widget Kalendes dans un site Web
Il vous suffit d'ajouter les lignes de code suivantes sous la balise body.
<![CDATA[
<!-- KALENDES WIDGET -->
<script src="https://www.kalendes.com/widget/widget.js" type="text/javascript"></script>
<script>/*<![CDATA[*/kalendes_host="mabelleboutique";/*]]]]><![CDATA[>*/</script>
<div id="kalendes-widget-container" ></div>
<!-- END OF KALENDES WIDGET -->
]]>
Remplacez la donnée "mabelleboutique" par le nom de votre host Kalendes.
Ex: si votre adresse est monsalon.kalendes.com, alors votre host kalendes est : monsalon
Le tour est joué ! le widget Kalendes se lancera au prochain chargement de page.
Si vous utilisez des outils du marché comme Wix ou Wordpress et que vous n'avez pas d'accès direct au contenu du body, suivez ces guides :
Définir un paramétrage personnalisé
Dans les sections ci-dessous, vous verrez qu'il existe des fonctions permettant de manipuler le Widget en javascript
Pour paramétrer un mode d'affichage dès le démarrage du widget, procédez ainsi :
- Chargez le widget ainsi avec une fonction onload en paramètre
<![CDATA[
<script src="https://www.kalendes.com/widget/widget.js?onload=kalendesLoaded" type="text/javascript"></script>
]]>
- Dès que le widget sera chargé, votre fonction window.kalendesLoaded sera déclenchée. C'est à l'intérieur de cette fonction que vous définirez le paramétrage initial
<![CDATA[
window.kalendesLoaded = function(){
console.log("Le Widget est chargé");
// Placez ici le paramétrage de l'affichage - Ex :
kalendes.setPercentHeight(90);
kalendes.setWidth(450);
};
]]>
Ouvrir et fermer le Widget depuis votre site web
Vous pouvez ouvrir le widget par la fonction kalendes.show()
Ouvrir
Vous pouvez fermer le widget par la fonction kalendes.hide()
Modifier la taille du widget
Vous pouvez définir une taille personnalisée du widget en pourcentage.
kalendes.setPercentHeight(100) définit une hauteur de 100%
kalendes.setPercentWidth(50) définit une largeur de 50%
Modifier la taille en %
Vous pouvez définir une taille personnalisée du widget en pixel.
kalendes.setHeight(500) définit une hauteur de 500px
kalendes.setWidth(500) définit une largeur de 500px
Modifier la taille en pixel
A NOTER :
Vous pouvez spécifier une hauteur en % et une largeur en px, et réciproquement
Si la largeur de l'écran est inférieure à 600px, le widget s'ouvrira automatiquement en plein écran
Positionner le widget dans votre site Web
Vous pouvez positionner le widget dans chaque coin ou au centre de la page
kalendes.setBottomRightPosition() positionne le widget en bas à doite
Positionner en bas à droite
kalendes.setTopRightPosition() positionne le widget en haut à doite
Positionner en haut à droite
kalendes.setBottomLeftPosition() positionne le widget en bas à gauche
Positionner en bas à gauche
kalendes.setTopLeftPosition() positionne le widget en haut à gauche
Positionner en haut à gauche
kalendes.setCenteredPosition() positionne le widget au centre de la page
Positionner au centre de la page
kalendes.maximize() positionne le widget en plein écran
kalendes.minimize() permet la sortie du plein écran
Positionner en plein écran
Le bouton d'ouverture du Widget
Kalendes peut positionner automatiquement sur votre site un bouton d'ouverture du widget sur votre site
kalendes.showButton() affiche le bouton
Afficher le bouton
kalendes.hideButton() cache le bouton
Cacher le bouton
kalendes.setButtomPosition(top,bottom,right,left) positionne le bouton
Positionner le bouton
Obtenir les références des articles et familles dans Kalendes
Si vous souhaitez effectuer une intégration poussée. Ex: Ajouter un article dans le panier Kalendes à partir de votre site Web
Il vous faudra connaitre les références des articles ou familles dans Kalendes
kalendes.retrieveArticleList() récupère la liste des articles.
Regardez dans les logs de votre navigateur pour voir cette liste.
Le paramètre "_id" servira de référence pour échanger avec Kalendes.
Obtenir la liste des articles
kalendes.retrieveFamilleList() récupère la liste des familles
Obtenir la liste des familles
Ouvrir le widget sur la page de votre choix
kalendes.goHome() ouvre le widget sur la page d'accueil.
Ouvrir la page d'accueil
kalendes.goArticles() ouvre la page Articles
Ouvrir la page produits & services
kalendes.goServices() ouvre la page Services
Ouvrir la page services
kalendes.goProduits() ouvre la page Produits
Ouvrir la page produits
kalendes.goPromotions() ouvre la page Promotions
Ouvrir la page des promotions
kalendes.goAccount() ouvre le compte client
Ouvrir le compte client
kalendes.goGiftCard() ouvre la page carte cadeau
Ouvrir la page carte cadeau
kalendes.openBasket() ouvre le panier client
Ouvrir le panier client
kalendes.selectFamille(_id) ouvre sur une famille
L'id de la famille peut être récupéré par kalendes.retrieveFamilleList()
Ouvrir sur une famille
kalendes.selectArticle(_id) ouvre sur un article
L'id de l'article peut être récupéré par kalendes.retrieveArticleList()
Ouvrir sur un article
Ajout d'un article au panier / Etat du panier
kalendes.addArticle(_id, quantite) ajoute un article au panier client
Ajouter un article au panier
kalendes.removeArticle(_id) supprime un article du panier client
Supprimer un article du panier
kalendes.updateQuantity(_id, quantite) modifie la quantité d'un article dans le panier
Modifier la quantité d'un article
kalendes.getBasketDetails() donne le détail du panier
Obtenir le détail du panier client
kalendes.subscribeBasketChange(function) permet d'être notifié d'un changement sur le panier client
Exemple: Montant de la commande: {{mCtrl.montantTtc}}€
S'abonner au panier client
