Points gagnés sur la fiche produit
Le widget "Points produit" d'Enkore affiche sur la fiche produit le nombre de points de fidélité que l'achat de ce produit rapporterait au consommateur.
Objectif du widget
Le widget de points produit poursuit quatre objectifs :
- Informer de l'existence du programme de fidélité : le consommateur découvre le programme là où il passe le plus de temps, sur la fiche produit, sans avoir à le chercher.
- Renforcer la crédibilité de la marque : un gain chiffré, calculé d'après les règles d'attribution réellement actives de la boutique — règle produit, règle catégorie ou règle par défaut — plutôt qu'une promesse générique.
- Renforcer l'univers du programme : icône, couleur de fond, arrondi, texte et CSS personnalisé permettent d'aligner l'encart sur l'identité de la marque.
- Renvoyer vers le programme : l'encart est cliquable et mène à la page de présentation du programme de fidélité.
Deux modes d'intégration sont possibles : l'intégration par script javascript, où Enkore fournit le rendu complet de l'encart, et l'intégration par API, où la boutique construit son propre affichage à partir des endpoints de l'API.
Intégration à l'aide du script
Le widget est un bundle JavaScript autonome, chargé par une balise <script>. Il cherche dans la page l'élément d'ancrage, s'y monte, et lit dans le HTML les informations que le back-end de la boutique a ajoutées.
Ce que le back-end doit exposer dans le HTML
| Élément | Rôle | Obligatoire |
|---|---|---|
<div id="enkore-product-root"></div> | Point de montage du widget | Oui |
<div id="enkore-price" data-enkore-price="1809"></div> | Prix TTC du produit affiché, en centimes | Oui |
<div id="enkore-product-id" data-enkore-product-id="315"></div> | Identifiant du produit dans la plateforme e-commerce | Non |
<div id="enkore-categories" data-enkore-categories="[2,170]"></div> | Identifiants des catégories du produit, en tableau JSON | Non |
<div id="enkore-language" hidden data-enkore-language-iso="fr"></div> | Code ISO de la langue de la page | Non |
<div id="enkore-store-domain" data-enkore-domain="https://monstore.com"></div> | Domaine du store déclaré chez Enkore | Non |
Quelques précisions :
- Le prix est la seule donnée strictement nécessaire. Il doit être un entier de centimes, TTC, correspondant au prix réellement affiché au consommateur (déclinaison et promotions comprises). Sans lui — ou avec une valeur nulle ou non numérique — le widget ne se rend pas.
- L'identifiant du produit et ses catégories déterminent la règle appliquée. Ils sont facultatifs, mais en leur absence l'API ne peut retenir que la règle d'attribution par défaut : une règle propre au produit ou à sa catégorie ne sera jamais appliquée, et le nombre de points affiché différera de celui réellement crédité à la commande.
- Aucune identification du client n'est requise. Contrairement aux widgets qui opèrent au nom d'un consommateur, celui-ci n'affiche aucune donnée personnelle : ni hash ni
externalIdne sont à produire, et les endpoints appelés sont publics. - Langue : le widget choisit sa langue dans l'ordre suivant — langue de la page (
data-enkore-language-iso), puis langue par défaut du store configurée au back-office, puis français. Les langues gérées sontfr,en,es,de,it,nl,pl; un code régional (fr-FR) est ramené à sa langue (fr), etgb— l'iso_codesous lequel PrestaShop installe l'anglais britannique — est traité commeen. - Domaine : en son absence, le widget utilise le domaine du navigateur (
protocol + hostname). L'élément n'est donc utile que lorsque la page est servie sur un domaine différent de celui déclaré chez Enkore (préproduction, domaine multi-boutique).
Exemple de page
<!-- Point de montage -->
<div id="enkore-product-root"></div>
<!-- Données du produit, rendues côté serveur -->
<div id="enkore-price" data-enkore-price="1809"></div>
<div id="enkore-product-id" data-enkore-product-id="315"></div>
<div id="enkore-categories" data-enkore-categories="[2,170]"></div>
<!-- Facultatif -->
<div id="enkore-language" hidden data-enkore-language-iso="fr"></div>
<div id="enkore-store-domain" data-enkore-domain="https://monstore.com"></div>
<!-- Chargement du widget -->
<script async defer src="https://product-points-widget.enkore.io/enkore-product-default-1-0.js"></script>
Mettre à jour les points quand le prix change
Sur une fiche produit à déclinaisons, le prix affiché change sans rechargement de page. Le widget expose deux points d'entrée pour rester synchrone :
window.dispatchEvent(new CustomEvent('enkore:product-updated'))— après avoir mis à jour l'attributdata-enkore-price, déclenche un recalcul des points sans remonter le composant.window.EnkoreWidget.reinitialize()— remonte entièrement le widget, y compris la relecture de sa configuration.
Comportements pris en charge par le script
- L'emplacement de l'encart est piloté par le back-office : le widget s'insère juste après l'élément désigné par le sélecteur CSS configuré (
cssSelector). - Le CSS personnalisé défini au back-office est injecté dans le
<head>sous forme de balise<style id="enkore-custom-css">. - Le texte dépend de la règle retenue par l'API (produit, catégorie ou défaut) et accepte deux variables :
{{points}}(nombre de points) et{{pointsName}}(nom de la monnaie de fidélité de la boutique). - L'encart est cliquable : il ouvre l'URL de redirection configurée au back-office, ou à défaut la page
/programme-fidelitedu domaine de la boutique.
Aucun appel HTTP n'est à écrire : le script contacte l'API lui-même, avec les mêmes endpoints que ceux listés ci-dessous.
Intégration par API
Une boutique qui souhaite construire son propre affichage appelle directement les endpoints de l'API. Chaque endpoint est décrit — paramètres, schémas de réponse, exemples de code — dans la référence d'API.
Au chargement de la fiche produit
| Endpoint | Rôle | Authentification |
|---|---|---|
GET /store/widget/product-points | Configuration visuelle et textuelle de l'encart telle que définie au back-office (sélecteur CSS, textes par type de règle, couleur, arrondi, icône, URL de redirection, CSS personnalisé, traductions) | domain |
GET /point/product-points/calculate | Nombre de points que rapporterait l'achat du produit, nom de la monnaie de fidélité, et type de règle retenue | domain |
Le calcul prend le prix (price, en centimes) et, facultativement, l'identifiant du produit (product) et ses catégories (categories). La réponse précise dans type si les points viennent d'une règle produit, d'une règle catégorie ou de la règle par défaut — c'est cette valeur qui détermine lequel des trois textes de configuration afficher.
L'appel de configuration n'a d'intérêt que si l'on souhaite piloter l'apparence et l'emplacement de l'encart depuis le back-office Enkore. Une intégration entièrement maîtrisée côté boutique peut s'en passer et n'appeler que le calcul des points.
Sur changement de déclinaison
| Endpoint | Rôle | Authentification |
|---|---|---|
GET /point/product-points/calculate | Recalcule les points avec le nouveau prix affiché | domain |
La configuration, elle, n'a pas à être rechargée : seul le prix a changé.
Authentification
Les deux endpoints sont publics et n'ont besoin que du paramètre domain : le widget n'expose aucune donnée propre à un client. Aucun hash n'est donc à calculer côté serveur.
Quelle intégration choisir ?
Par défaut, l'intégration par script. Elle demande moins de travail : il suffit d'exposer quelques éléments dans le HTML et de charger le script. Elle donne accès à la configuration de l'encart depuis le back-office Enkore — y compris son emplacement sur la fiche produit — et la boutique profite automatiquement des mises à jour du widget — corrections, nouvelles langues, nouveaux réglages — sans redéploiement de son côté.
L'intégration par API est réservée aux boutiques qui veulent un contrôle total de l'affichage : intégration profonde dans un design system, fiche produit sur mesure, framework front spécifique. En contrepartie, tout le rendu et son évolution — y compris le recalcul des points au changement de déclinaison — restent à la charge de la boutique.