Comment créer une caisse en deux étapes ? Deux méthodes élégantes révélées

Dans cet épisode du HelpDesk, l'un des membres de notre équipe révèle une méthode élégante pour créer un paiement en deux étapes. Tout d'abord, il explique comment créer deux pages distinctes, comme le font la plupart des processus de paiement en deux étapes. Ensuite, il présente une méthode qui permet d'afficher d'abord le formulaire d'informations sur le compte, puis les informations sur le paiement dans une deuxième étape distincte, mais sur la même page. Veuillez noter que cette deuxième option implique l'utilisation de HTML et de quelques scripts de base.

---

Curieux d'en savoir plus sur les caisses enregistreuses ?

"Je me demandais s'il existait un moyen simple de séparer la page principale de paiement en deux pages distinctes. Je souhaite avoir une page qui demande des informations sur le compte du client (nom, email, etc.), et ensuite aller vers une page pour entrer les informations de paiement une fois que le compte est créé."

---

John de MemberMouse a répondu :

"Il existe deux approches. La première fonctionne exactement comme vous l'avez décrit, c'est-à-dire qu'il y a deux pages de paiement indépendantes l'une de l'autre. Nous avons une description détaillée de la façon de construire ce processus dans notre article d'assistance Créer un paiement en deux étapes. J'inclurai également les éléments essentiels ci-dessous.

La première étape consiste à créer une nouvelle page pour la première étape de paiement, et à placer un fichier Formulaire d'adhésion gratuite sur la page.

Ensuite, vous créez un Page de confirmation spécifique au produit pour les adhésions gratuites, et sur cette page de confirmation, vous placez une copie de l'avis d'appel d'offres pour les adhésions gratuites. Checkout Core Page Template en modifiant le code Formulaire SmartTag légèrement pour qu'un produit spécifique soit proposé. Étant donné que toute personne qui accède à cette page est un membre connecté, la section "Détails du compte" de la caisse est automatiquement masquée et nous ne demandons plus ces informations. À ce stade, le membre peut remplir les informations relatives au paiement et terminer la procédure de paiement.

Le principal inconvénient de cette approche est qu'il peut être difficile de proposer un paiement en deux étapes pour plusieurs produits sur le même site. Tous les membres qui s'inscrivent au niveau d'adhésion gratuit que nous avons créé se verront proposer le produit que nous avons spécifié. Pour proposer plusieurs produits de cette manière, une option consisterait à placer un champ Interrupteur de produit à la deuxième étape de la commande. Une autre solution consiste à créer un niveau d'adhésion gratuite distinct pour chaque produit vendu et à créer un niveau d'adhésion gratuite pour chaque produit vendu. Décision du membre SmartTag pour passer d'un code de caisse à l'autre lors de la deuxième étape.

La deuxième approche consiste à créer deux pages à l'aide de scripts. Avec cette méthode, il n'y a pas vraiment deux pages, et les membres ne sont pas réellement créés tant qu'ils n'ont pas achevé l'ensemble du processus. Au lieu de cela, vous vous contentez de masquer et d'afficher des sections de la page et de fournir des boutons permettant de les parcourir. Cela crée l'expérience d'un paiement en deux étapes sans qu'une adhésion gratuite intermédiaire ne soit créée.

Il s'agit plutôt d'une activité de construction de pages de niveau intermédiaire, mais si vous êtes intéressé et quelque peu à l'aise avec le HTML et les scripts de base, vous pouvez suivre la démonstration de mise en œuvre ci-dessous pour voir comment cela peut être fait.

Démonstration d'une caisse élégante en 2 étapes

Tout d'abord, jetez un coup d'œil à la Modèle de page de paiement et vous verrez que toutes les différentes sections sont déjà présentées sous la forme de <div> et le masquage automatique des sections est un système distinct qui les entoure, ce qui est très pratique pour nous. Nous allons commencer par ouvrir la page de paiement dans l'éditeur et l'afficher en HTML.

Le premier changement que nous devons faire est d'ajouter du CSS pour que la page soit dans la configuration souhaitée lorsqu'elle se charge. Il y a plusieurs façons de le faire, et il serait préférable de le faire dans la section Additional CSS de votre thème, mais pour l'instant, nous allons simplement ajouter du code tout en haut de la page de paiement :

#mm-billing-information-section, #mm-shipping-information-section,
#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display : none;}

Juste en dessous, nous ajouterons quelques scripts pour nos fonctions d'affichage et de masquage des pages :

<script>
function showPageOne() {
  jQuery( ".mm-purchaseSection" ).hide();
  jQuery( "#mm-account-information-section" ).show();
  jQuery( "#mm-billing-information-section" ).hide();
  jQuery( "#mm-shipping-information-section" ).hide();
  jQuery( "#mm-coupon-block" ).hide();
  jQuery( "#page-nav-back" ).hide();
  jQuery( "#page-nav-forward" ).show();
}

function showPageTwo() {
  jQuery( ".mm-purchaseSection" ).show();
  jQuery( "#mm-account-information-section" ).hide();
  jQuery( "#mm-billing-information-section" ).show();
  jQuery( "#mm-shipping-information-section" ).show();
  jQuery( "#mm-coupon-block" ).show();
  jQuery( "#page-nav-forward" ).hide();
  jQuery( "#page-nav-back" ).show();
}
</script>

Il nous faut maintenant créer les boutons de navigation de notre page et les gestionnaires de clics associés. J'ai choisi de les placer dans la colonne de droite, je ne suis pas sûr que ce soit la meilleure décision de mise en page, et j'ai juste emprunté le style des boutons de MemberMouse, mais vous pouvez changer ces choses comme vous le souhaitez. Dans la section Checkout Core Page Template il serait inséré entre les lignes 144 et 145, c'est-à-dire juste au-dessus de la ligne <div class="”mm-purchaseSection”"> étiquette :

<div id="page-nav-forward">
<div id="page-nav-forward-button" class="mm-button large green" style="width:220px; text-align:center;">
Informations sur le paiement →</div>
</div>
<div id="page-nav-back">
<div id="page-nav-back-button" class="mm-button large green" style="width:220px; text-align:center;">
← Informations sur le compte</div>
<p> </p>
</div>

<script>
jQuery( "#page-nav-forward-button" ).click(function() {
  showPageTwo();
});
jQuery( "#page-nav-back-button" ).click(function() {
  showPageOne();
});
</script>

Vous pouvez tout à fait utiliser vos propres boutons ou images, il suffit qu'ils aient les bons identifiants pour que le script les prenne en compte.

Essayez-le et n'hésitez pas à me faire part de vos questions.

---

Curieux d'en savoir plus sur les caisses a répondu :

"Ceci a résolu mon problème. Merci beaucoup d'avoir pris le temps de me donner une réponse détaillée avec toutes les informations dont j'avais besoin !"

---

Contenu connexe

---

• Partager