Come avviare un overlay da altri pulsanti o link

Questo articolo descrive come aggiungere codice personalizzato al tuo sito WordPress ed è destinato agli sviluppatori. Sebbene non forniamo noi stessi servizi di sviluppo personalizzato, se hai bisogno di aiuto, ti raccomandiamo vivamente Seahawk Media.

Gli snippet di codice personalizzato sono forniti "così come sono" e non vi è alcuna garanzia che continueranno a funzionare tra più versioni di WP Simple Pay.

Passaggio 1: Aggiorna l'URL del pulsante

Per avviare un modulo di pagamento Stripe Checkout o popup tramite un pulsante o link personalizzato, devi modificare l'URL del pulsante. La modifica dell'URL del pulsante dipenderà da come stai modificando i tuoi contenuti. Aggiorna l'URL al seguente:

#form-176

Sostituisci 176 con l'ID del modulo di pagamento che desideri avviare. Puoi trovare l'ID del tuo modulo di pagamento nella schermata di modifica del modulo. L'ID del modulo è la parte numerica dello shortcode di Simple Pay, come mostrato di seguito.

Successivamente, incorpora lo shortcode del modulo di pagamento WP Simple Pay nella tua pagina come faresti normalmente: . Ciò causerà l'output del modulo di pagamento sulla pagina, ma lo nasconderemo nei passaggi successivi per garantire che sia visibile solo il pulsante o link personalizzato.

Passaggio 2: Aggiungi JavaScript personalizzato

Ci sono molti modi per aggiungere codice JavaScript personalizzato al tuo sito web WordPress. Consulta la nostra guida consigliata per l'aggiunta di snippet di codice. Ti consigliamo di aggiungere JavaScript al footer del tuo tema utilizzando il plugin gratuito WP Code. Vai su Snippet di codice → Intestazione e piè di pagina, quindi aggiungi il Javascript personalizzato nella sezione Piè di pagina come mostrato di seguito.

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

Sostituisci 123 nella riga 4 con l'ID del tuo modulo di pagamento. Se stai creando più pulsanti su una pagina, puoi aggiungere un elenco separato da virgole di ID di moduli di pagamento che desideri poter avviare.

Passaggio 3: Aggiungi CSS personalizzato

Ci sono molti modi per aggiungere codice CSS personalizzato al tuo sito web WordPress. Abbiamo delineato alcuni modi nella nostra documentazione. Ti consigliamo di aggiungere CSS all'intestazione del tuo tema utilizzando il plugin gratuito WP Code. Vai su Snippet di codice → Intestazione e piè di pagina, quindi aggiungi il tuo CSS nella sezione Intestazione:

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

Ciò nasconderà l'output predefinito dello shortcode , in modo che sia visibile solo il pulsante o link personalizzato.