Drupal Commerce, maitriser votre checkout

Drupal Commerce, maitriser votre checkout

27 Jul 2014 |  Drupal

Une des demandes récurrentes de la part des utilisateurs de Drupal Commerce est la possibilité de personnaliser le checkout. Que ce soit pour changer les étapes du checkout, ou pour recueillir des données supplémentaires, l’API de Drupal Commerce permet de répondre à ce besoin facilement.

Drupal Commerce vient avec deux concepts concernant le checkout, les Pages et les panes. Les “pages” permettent l’affichage et la configuration des différentes pages du checkout, comme par exemple la page de paiement, de livraison ou encore comme la page de résumé de commande. Ces pages contiennent des “panes”, permettant d’interagir avec le client, comme illustre la saisie de l’adresse ou du numéro de carte de crédit dans le checkout.

Attention toutefois, lorsque vous rallongez votre checkout, vous complexifiez le processus d’achat et augmentez les risques de perte de clients. Incontestablement, la bonne pratique est d’avoir le checkout le plus simple et court possible, néanmoins il existe certains cas où il faut déroger à la règle.

Ordonner les étapes de votre checkout

La façon la plus simple d’ordonner les étapes de votre checkout consiste à vous rendre sur l’interface d’administration de votre site dans la rubrique checkout settings de la section store > configuration

Cette page d’administration regroupe toutes les pages de votre checkout ainsi que les panes contenus dans chaque page. Drag’n dropable, vous pouvez déplacer un pane d’une page à une autre de façon à créer l’expérience utilisateur de votre choix.

Par défaut le checkout est découpé en 4 pages: * Checkout : la page “Checkout”, est la première étape, elle permet la collecte des informations de base. * Review order: la page “Review order” permet d’afficher un résumé de la commande avant la validation et la soumission du paiement. * Payement : cette page, nommée “Payment”, est uniquement utilisée lorsque qu’une méthode de paiement est dite off-site. * Checkout complete: la page “Checkout complete”, permet d’afficher une confirmation de commande au client.

Drupal Commerce checkout configuration Crédit photo

Ajouter des pages à votre checkout

Comme bien souvent, il existe deux façons de faire avec Drupal ou Drupal Commerce pour arriver à vos fins. Soit vous utilisez un module contrib, soit vous faites un peu de code custom.

Si vous souhaitez passer par un module, il vous faudra utiliser Drupal Commerce Checkout Pages qui vous permettra d’ajouter des pages depuis l’interface d’administration de votre site.

L’autre façon, consiste à utiliser l’API de Drupal Commerce en implémentant le hook_commerce_checkout_page_info() dans un module custom. Une fois créée votre page sera accessible dans l’interface d’administration. C’est de cette manière que sont créées les pages de Drupal Commerce. Pour plus d’information, rendez-vous dans le fichier commerce_checkout.api.php du sous module checkout.

Ajouter des panes à votre checkout

De la même manière que précédemment, il est possible de faire la même chose avec les panes.

Coté module vous pouvez vous baser sur Commerce extra panes afin d’afficher une ou plusieurs nodes dans votre checkout en guise d’information.

Coté code, il vous faudra implémenter le hook_commerce_checkout_pane_info() de façon à déclarer votre nouveau pane. Notez ensuite, que vous devrez créer vos callbacks, afin d’afficher les informations désirées. Pour plus d’information, rendez-vous dans le fichier commerce_checkout.api.php du sous module checkout.

Le mot de la fin

Comme à l’accoutumée, il est simple de personnaliser le checkout de Drupal commerce que ce soit avec un module ou un peu de code custom. Encore une fois, attention de penser à l’expérience utilisateur de vos clients quand vous complexifiez le checkout.

Julien Dubreuil

Vous avez une idée, un projet web à réaliser ?

Ensemble, mettons en oeuvre sa réussite. Je vous accompagne dans vos projets, depuis l'élaboration du cahier des charges jusqu'à la mise en production. Pour plus d'information n'hésitez pas à me contacter.

Contactez-moi