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. I’ll include the essentials below too.

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 slightly so that a specific product is offered. Since anyone who reaches this page is a logged-in member, the Account Details section of the checkout is automatically hidden, and we don’t prompt for that information again. At this point, the member would be able to fill out payment information and finish the checkout process.

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.

The second approach is to fake two pages using scripting. With this method, there aren’t really two pages, and members are not really created until they complete the entire process. Instead, you’re just hiding and showing sections of the page, and providing buttons to advance through them. This creates the experience of two-step checkout without an intermediary free membership being created.

This is more like an intermediate-level page-building activity, but if you’re interested and somewhat comfortable with HTML and basic scripts, you can follow the demonstration implementation below to see how it can be done.

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 and you’ll see that all the different sections are already laid out as <div> blocks and our section auto-hiding is a separate system that surrounds them, so that’s really convenient for us. We’ll start by opening the checkout page in the editor and viewing it as HTML.

The first change we need to make is to add some CSS so that when the page loads it will be in the desired configuration. There’s a bunch of different ways to do this, ultimately it might be better to have it in your theme’s Additional CSS section, but for now we’ll just add some code to the very top of the checkout page:

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

Just underneath that, we’ll add some scripting for our functions that show and hide the 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>

Now we need to create our page navigation buttons, and the associated click handlers. I’ve elected to put those in the right column, I’m not sure that this is the very best layout decision, and I just borrowed some MemberMouse button styling, but you can change these things around as you prefer. In the 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