Como iniciar um overlay de outros botões ou links

Este artigo detalha a adição de código personalizado ao seu site WordPress e destina-se a desenvolvedores. Embora não ofereçamos serviços de desenvolvimento personalizado, se precisar de ajuda, recomendamos vivamente Seahawk Media.

Trechos de código personalizados são fornecidos como estão e não há garantia de que continuarão a funcionar em várias versões do WP Simple Pay.

Passo 1: Atualize o URL do Botão

Para lançar um formulário de pagamento Stripe Checkout ou overlay através de um link de botão personalizado, você precisa alterar o URL do link do botão. Ajustar o URL do link do botão dependerá de como você está editando seu conteúdo. Atualize o URL para o seguinte:

#form-176

Substitua 176 pelo ID do formulário de pagamento que você deseja lançar. Você pode encontrar o ID do seu formulário de pagamento na tela de edição do formulário. O ID do formulário é a parte numérica do shortcode do Simple Pay, como mostrado abaixo.

Em seguida, incorpore o shortcode do formulário de pagamento WP Simple Pay em sua página como faria normalmente: . Isso fará com que o formulário de pagamento seja exibido na página, mas o ocultaremos nas próximas etapas para garantir que apenas o link do botão personalizado fique visível.

Passo 2: Adicione JavaScript Personalizado

Existem muitas maneiras de adicionar código JavaScript personalizado ao seu site WordPress. Veja nosso guia recomendado para adicionar trechos de código. Recomendamos que você adicione JavaScript ao rodapé do seu tema usando o plugin gratuito WP Code. Vá para Trechos de Código → Cabeçalho e Rodapé, e então adicione o Javascript personalizado à seção Rodapé, como mostrado abaixo.

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

Substitua o 123 na linha 4 pelo ID do seu formulário de pagamento. Se você estiver criando vários botões em uma página, pode adicionar uma lista separada por vírgulas de IDs de formulários de pagamento que deseja poder lançar.

Passo 3: Adicione CSS Personalizado

Existem muitas maneiras de adicionar código CSS personalizado ao seu site WordPress. Demos algumas formas em nossa documentação. Recomendamos que você adicione CSS ao cabeçalho do seu tema usando o plugin gratuito WP Code. Vá para Trechos de Código → Cabeçalho e Rodapé, e então adicione seu CSS à seção Cabeçalho:

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

Isso ocultará a saída padrão do shortcode , para que apenas o link do botão personalizado fique visível.