La présente section du document, à destination des webdesigner, a pour objectif de définir l’ensemble des modifications des thèmes graphiques nécessaires à la mise en œuvre du transporteur Colissimo Points relais.
Les clients ne souhaitant PAS utiliser le transporteur Colissimo Points relais n’ont aucune modification à faire. Les changements effectués sur le processus de commande sont totalement compatibles avec leurs thèmes graphiques actuels. Il peut cependant être intéressant d’intégrer les modifications des templates suivants qui apportent des améliorations ergonomiques et fonctionnelles (cf. leur section respective ci dessous).
Les clients qui souhaitent utiliser le transporteur Colissimo Points relais doivent procéder à la mise à jour des fichiers suivants de leur thème graphique :
Dans tous les cas, nous recommandons la mise en place de toutes les modifications, facultatives et obligatoires, décrites dans ce document, même pour les clients ne voulant pas utiliser Colissimo Points relais.
Le détail de ces modifications est exposé dans les sections suivantes.
La page /ecommerce/colissimo_pickup.html est utilisée comme page portail afin d'accueillir l'Iframe de choix de point relais. Cette page sert également de page de retour. Ce template est également utilisé en cas d’erreur ou d’indisponibilité de la plateforme Colissimo.
Ce template est inexistant dans les thèmes actuellement déployés. Sa présence est obligatoire pour utiliser le transporteur Colissimo Points relais. Si le transporteur est activé malgré l’absence de ce fichier dans le thème graphique du site, un message d’erreur indiquant ce défaut de configuration sera affiché à la place de la page portail, empêchant alors de finir le processus de commande pour les acheteurs ayant choisit ce transporteur.
| Bloc | Balise | Description |
|---|---|---|
| main.intitule | {intitule} | La Balise intitule contient l’intitulé du widget « Livraison » tel qu’il est défini dans la configuration de ce dernier. Le Bloc main.intitule n’est pas affiché si la valeur de l'intitulé est vide. |
| main.erreurs | Le Bloc erreurs est affiché si la page contient des erreurs | |
| main.erreurs.erreur | {erreur} | Chaque erreur est affichée dans son propre bloc et affectée à la balise erreur |
| main.formulaire | {iframe} | Adresse de l'iframe pour l'intégration générique de la recherche de points relais |
| {gmaps_key} | Affiche la clé API GoogleMaps | |
| {transporteur_id} | Identifiant du transporteur | |
| {adresse} | Affiche l'adresse de livraison courante | |
| {ville} | Affiche la ville de livraison courante | |
| {cp} | Affiche le code postal de livraison courant | |
| {pays_id} | Affiche l'identifiant du pays de livraison courant |
<!-- BEGIN:main -->
<!-- BEGIN:intitule --><h2>{intitule}</h2><!-- END:intitule -->
<!-- BEGIN:erreurs -->
<div>
<!-- BEGIN:erreur -->{erreur}<br /><!-- END:erreur -->
</div>
<!-- END:erreurs -->
<!-- BEGIN:formulaire -->
<iframe src="{iframe}"></iframe>
<!-- END:formulaire -->
<a href="/ecommerce/transporteurs.html">Choisir un autre mode de Livraison</a>
<!-- END:main -->Il est égalment possible de se passer de l'iframe et de faire une intégration sur mesure dans le site le choix du point relais. A la charge de l'intégrateur de developper l'ensemble des codes HTML, CSS et Javascript. Il est cependant conseillé de s'inspirer du fonctionnement de la page à l'intérieur de l'iframe (visible à l'adresse /embed/colissimo_pickup.html du site un fois que le transporteur Colissimo Points relais est séléctionné dans le tunnel de commande).
Kiubi fournit des données complémentaires dans le template du widget pour faciliter cette intégration :
{transporteur_id}{adresse}, {ville}, {cp} et {pays_id}Il est obligatoire d'intégration le choix du point relais dans le bloc main.formulaire.
L'initialisation d'une cart GoogleMaps est possible en utlisant le clé API GoogleMaps configurée dans le transporteur avec {gmaps_key}.
L'API Front-office dispose d'un endpoint retournant les points relais. Grâces aux balises {transporteur_id}, {adresse}, {ville}, {cp} et {pays_id} il est possible de forger une requête vers ce endpoint et récupérer une liste de point relais :
GET /cart/carriers/{transporteur_id}/pickup?address={adresse}&city={ville}&zipcode={cp}&country_id={pays_id}Ou plus simplement avec le client API Front-office :
kiubi.get('/cart/carriers/'+transporteur_id+'/pickup', {
address:'...',
city:'...',
zipcode:'...',
country_id:'...'
});Pour désigner un point relais comme adresse de livraison de la commande, il faut forger une requête de type POST vers la page /ecommerce/colissimo_pickup.html avec un paramètre data comportant le JSON suivant :
{
status: 'ok',
relay: {
relay_id : 'XXXX',
name: 'XXXX',
address : 'XXXX',
city : 'XXXX',
zipcode : 'XXXX',
country : 'XXXXX',
relay_type: 'XXXXX'
}
}Si le point relais est accepté, l'utilisateur est redirigé vers la page de récapitulatif de commande. Sinon un message d'erreur est affiché par le bloc main.erreurs et le bloc main.formulaire n'est pas affiché.
Pour forcer l'affichage d'une erreur, il suffit de changer le paramètre data avec un JSON équivalant à :
{
status: 'error',
error: 'Message d\'erreur'
}