Jak uruchomić nakładkę z innych przycisków lub linków

Ten artykuł szczegółowo opisuje dodawanie niestandardowego kodu do Twojej witryny WordPress i jest przeznaczony dla programistów. Chociaż sami nie świadczymy usług niestandardowego rozwoju, jeśli potrzebujesz pomocy, gorąco polecamy Seahawk Media.

Niestandardowe fragmenty kodu są dostarczane w stanie „takim, jakim są” i nie ma gwarancji, że będą działać w kolejnych wersjach WP Simple Pay.

Krok 1: Zaktualizuj adres URL przycisku

Aby uruchomić formularz płatności Stripe Checkout lub formularz nakładkowy za pomocą niestandardowego linku przycisku, musisz zmienić adres URL linku przycisku. Dostosowanie adresu URL linku przycisku będzie zależeć od sposobu edycji treści. Zaktualizuj adres URL do następującego:

#form-176

Zastąp 176 identyfikatorem formularza płatności, który chcesz uruchomić. Identyfikator formularza płatności znajdziesz na ekranie edycji formularza. Identyfikator formularza to część liczbowa skróconego kodu Simple Pay, jak pokazano poniżej.

Następnie osadź skrócony kod formularza płatności WP Simple Pay na swojej stronie, tak jak zwykle: . Spowoduje to wyświetlenie formularza płatności na stronie, ale ukryjemy go w następnych krokach, aby zapewnić widoczność tylko niestandardowego linku przycisku.

Krok 2: Dodaj niestandardowy kod JavaScript

Istnieje wiele sposobów dodawania niestandardowego kodu JavaScript do Twojej witryny WordPress. Zobacz nasz zalecany przewodnik po dodawaniu fragmentów kodu. Zalecamy dodanie kodu JavaScript do stopki motywu za pomocą bezpłatnej wtyczki WP Code. Przejdź do Fragmenty kodu → Nagłówek i stopka, a następnie dodaj niestandardowy kod JavaScript do sekcji Stopka, jak pokazano poniżej.

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

Zastąp 123 w wierszu 4 identyfikatorem swojego formularza płatności. Jeśli tworzysz wiele przycisków na stronie, możesz dodać oddzieloną przecinkami listę identyfikatorów formularzy płatności, które chcesz móc uruchamiać.

Krok 3: Dodaj niestandardowy kod CSS

Istnieje wiele sposobów dodawania niestandardowego kodu CSS do Twojej witryny WordPress. Opisaliśmy kilka sposobów w naszej dokumentacji. Zalecamy dodanie kodu CSS do nagłówka motywu za pomocą bezpłatnej wtyczki WP Code. Przejdź do Fragmenty kodu → Nagłówek i stopka, a następnie dodaj swój kod CSS do sekcji Nagłówek:

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

Spowoduje to ukrycie domyślnego wyniku skróconego kodu , dzięki czemu widoczny będzie tylko niestandardowy link przycisku.