Comment lancer un overlay à partir d'autres boutons ou liens

Cet article détaille l'ajout de code personnalisé à votre site WordPress et s'adresse aux développeurs. Bien que nous ne fournissions pas nous-mêmes de services de développement personnalisé, si vous avez besoin d'aide, nous vous recommandons vivement Seahawk Media.

Les extraits de code personnalisés sont fournis tels quels et il n'y a aucune garantie qu'ils continueront à fonctionner sur plusieurs versions de WP Simple Pay.

Étape 1 : Mettre à jour l'URL du bouton

Pour lancer un formulaire de paiement Stripe Checkout ou superposé via un bouton personnalisé, vous devez modifier l'URL du lien du bouton. L'ajustement de l'URL du lien du bouton dépendra de la manière dont vous modifiez votre contenu. Mettez à jour l'URL comme suit :

#form-176

Remplacez 176 par l'ID du formulaire de paiement que vous souhaitez lancer. Vous pouvez trouver l'ID de votre formulaire de paiement dans l'écran de modification du formulaire. L'ID du formulaire est la partie numérique du shortcode Simple Pay, comme illustré ci-dessous.

Ensuite, intégrez le shortcode du formulaire de paiement WP Simple Pay sur votre page comme vous le feriez normalement : . Cela affichera le formulaire de paiement sur la page, mais nous le masquerons dans les étapes suivantes pour nous assurer que seul le lien du bouton personnalisé est visible.

Étape 2 : Ajouter du JavaScript personnalisé

Il existe de nombreuses façons d'ajouter du code JavaScript personnalisé à votre site WordPress. Consultez notre guide recommandé pour ajouter des extraits de code. Nous vous recommandons d'ajouter du JavaScript au pied de page de votre thème à l'aide du plugin gratuit WP Code. Allez dans Extraits de code → En-tête et pied de page, puis ajoutez le JavaScript personnalisé dans la section Pied de page comme indiqué ci-dessous.

<script>
( function( $ ) {
	// Update comma separated list with payment form ID(s) to launch.
	var ids = [ '123' ];

	// Do not modify.
	ids.forEach( function( id ) { 
		$( 'a[href~="#form-' + id + '"]' ).click( function( e ) {
			e.preventDefault(); 
			$( '.simpay-form-' + id + ' .simpay-payment-btn' ).click();
			$( '#simpay-modal-control-' + id ).click(); 
		}); 
	});
})( jQuery );
</script>

Remplacez 123 à la ligne 4 par l'ID de votre formulaire de paiement. Si vous créez plusieurs boutons sur une page, vous pouvez ajouter une liste d'ID de formulaires de paiement séparés par des virgules que vous souhaitez pouvoir lancer.

Étape 3 : Ajouter du CSS personnalisé

Il existe de nombreuses façons d'ajouter du code CSS personnalisé à votre site WordPress. Nous avons décrit quelques méthodes dans notre documentation. Nous vous recommandons d'ajouter du CSS à l'en-tête de votre thème à l'aide du plugin gratuit WP Code. Allez dans Extraits de code → En-tête et pied de page, puis ajoutez votre CSS dans la section En-tête :

<style>
body:not(.simpay-form-preview) .simpay-form-wrap {
  display: none;
} 
</style>

Cela masquera la sortie par défaut du shortcode , de sorte que seul le lien du bouton personnalisé soit visible.