Cum să lansați un overlay din alte butoane sau linkuri

Acest articol detaliază adăugarea de cod personalizat pe site-ul tău WordPress și este destinat dezvoltatorilor. Deși noi nu oferim servicii de dezvoltare personalizată, dacă ai nevoie de ajutor, recomandăm cu tărie Seahawk Media.

Fragmentele de cod personalizat sunt furnizate ca atare și nu există nicio garanție că vor continua să funcționeze pe mai multe versiuni de WP Simple Pay.

Pasul 1: Actualizează URL-ul butonului

Pentru a lansa un formular de plată Stripe Checkout sau o fereastră pop-up printr-un link de buton personalizat, trebuie să schimbi URL-ul linkului butonului. Ajustarea URL-ului linkului butonului va depinde de modul în care editezi conținutul. Actualizează URL-ul la următorul:

#form-176

Înlocuiește 176 cu ID-ul formularului de plată pe care dorești să îl lansezi. Poți găsi ID-ul formularului tău de plată în ecranul de editare a formularului. ID-ul formularului este porțiunea numerică a shortcode-ului Simple Pay, așa cum se arată mai jos.

Apoi, încorporează shortcode-ul formularului de plată WP Simple Pay pe pagina ta, așa cum ai face în mod normal: . Acest lucru va face ca formularul de plată să fie afișat pe pagină, dar îl vom ascunde în pașii următori pentru a ne asigura că este vizibil doar linkul butonului personalizat.

Pasul 2: Adaugă JavaScript personalizat

Există multe modalități de a adăuga cod JavaScript personalizat pe site-ul tău WordPress. Vezi ghidul nostru recomandat pentru adăugarea de fragmente de cod. Recomandăm să adaugi JavaScript în footer-ul temei tale folosind pluginul gratuit WP Code. Mergi la Fragmente de cod → Antet și subsol, apoi adaugă JavaScript-ul personalizat în secțiunea Subsol, așa cum se arată mai jos.

<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>

Înlocuiește 123 din linia 4 cu ID-ul formularului tău de plată. Dacă creezi mai multe butoane pe o pagină, poți adăuga o listă separată prin virgulă de ID-uri de formulare de plată pe care dorești să le poți lansa.

Pasul 3: Adaugă CSS personalizat

Există multe modalități de a adăuga cod CSS personalizat pe site-ul tău WordPress. Am schițat câteva moduri în documentația noastră. Recomandăm să adaugi CSS în antetul temei tale folosind pluginul gratuit WP Code. Mergi la Fragmente de cod → Antet și subsol, apoi adaugă CSS-ul tău în secțiunea Antet:

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

Acest lucru va ascunde ieșirea implicită a shortcode-ului , astfel încât să fie vizibil doar linkul butonului personalizat.