Comments (5)
@LucasR0cha, sua solução funcionou. No entanto, outro problema relatado pelos clientes é que, no celular, ao clicar no campo com o texto do código Pix (para copiar manualmente), a tela é deslocada para a lateral, quebrando a largura da página e tornando impossível retornar ao seu centro. Testei e confirmei o problema. Resolvi temporariamente ajustando o seu código para que o campo do código Pix se expanda verticalmente, permitindo a exibição do conteúdo em várias linhas.
@devaguia, seria possível verificar também este detalhe? O plugin da Vindi está muito bom desde as últimas atualizações e com esses pequenos ajustes ficaria excelente. Obrigado!
" <div class='woocommerce-order-overview woocommerce-thankyou-order-details order_details' style='padding:20px; margin-bottom:30px;'>
<h3><strong style='color: #6d6d6d'>Vindi Intermediador</strong></h3>
<div style='margin: 20px 0'>
<span>Pix Copia e Cola</span>
<div style='display: flex; align-items: center; flex-direction: column;'>
<textarea style='width: 100%; height: 100px; margin-bottom: 10px;' id='linhaDigitavel' readonly>". $data['qrcode_original_path'] ."</textarea>
<button class='copiaCola' id='copiaCola' onclick='copiarTexto(\"linhaDigitavel\")'>
<img name='imgCopy' src='{$url_image}/assets/images/copy.svg' alt='Copiar' style='width: 20px; height: 20px; margin-right: 5px;'> Copiar Código
</button>
</div>
</div>
<div style='margin: 20px 0'>
<span><strong>Escaneie o QR Code:</strong></span>
<div>
<object class='qrCodeYapay' data='". $data['qrcode_path'] ."' ></object>
</div>
</div>
<hr/>
<div style='margin: 20px 0'>
<span>Após realizar o pagamento do PIX no seu aplicativo, você receberá a confirmação do pagamento em seu e-mail.</span>
</div>
</div>
<script>
function copiarTexto(elementoId) {
var copyText = document.getElementById(elementoId);
copyText.select();
navigator.clipboard.writeText(copyText.value)
.then(() => {
alert('Código copiado com sucesso!');
})
.catch(err => {
alert('Oops, não foi possível copiar: ' + err);
});
}
</script> ";
from woo-yapay.
@devaguia obrigado! Aproveito para deixar uma pequena atualização para que a mensagem informando "código copiado com sucesso" não gere um pop-up. Adaptado novamente do código fornecido pelo @LucasR0cha. Já testado em compra real e funcionando bem.
" <div class='woocommerce-order-overview woocommerce-thankyou-order-details order_details' style='padding:20px; margin-bottom:30px;'>
<h3><strong style='color: #6d6d6d'>Vindi Intermediador</strong></h3>
<div style='margin: 20px 0'>
<span>Pix Copia e Cola</span>
<div style='display: flex; align-items: center; flex-direction: column;'>
<textarea style='width: 100%; height: 100px; margin-bottom: 10px;' id='linhaDigitavel' readonly>". $data['qrcode_original_path'] ."</textarea>
<button class='copiaCola' id='copiaCola' onclick='copiarTexto(\"linhaDigitavel\")'>
<img name='imgCopy' src='{$url_image}/assets/images/copy.svg' alt='Copiar' style='width: 20px; height: 20px; margin-right: 5px;'> Copiar Código
</button>
</div>
</div>
<div style='margin: 20px 0'>
<span><strong>Escaneie o QR Code:</strong></span>
<div>
<object class='qrCodeYapay' data='". $data['qrcode_path'] ."' ></object>
</div>
</div>
<hr/>
<div style='margin: 20px 0'>
<span>Após realizar o pagamento do PIX no seu aplicativo, você receberá a confirmação do pagamento em seu e-mail.</span>
</div>
</div>
<script>
function copiarTexto(elementoId) {
var copyText = document.getElementById(elementoId);
copyText.select();
navigator.clipboard.writeText(copyText.value)
.then(() => {
var feedback = document.createElement('span');
feedback.textContent = 'Código copiado com sucesso!';
feedback.style.marginLeft = '10px'; // Ajuste o estilo conforme necessário
feedback.style.color = 'green'; // Ajuste a cor do texto
var button = document.getElementById('copiaCola');
button.parentNode.insertBefore(feedback, button.nextSibling);
setTimeout(function() {
feedback.parentNode.removeChild(feedback);
}, 3000); // Remove o feedback após 3 segundos
})
.catch(err => {
console.error('Ops, não foi possível copiar: ', err);
// Aqui você pode adicionar um feedback alternativo se houver falha na cópia
});
}
</script>
";
from woo-yapay.
Opa Pessoal, realmente tem problema no botão, pode usar o meu código abaixo html para resolver esse problema.
" <div class='woocommerce-order-overview woocommerce-thankyou-order-details order_details' style='padding:20px; margin-bottom:30px;'> <h3><strong style='color: #6d6d6d'>Vindi Intermediador</strong></h3> <div style='margin: 20px 0'> <span>Pix Copia e Cola</span> <div style='display: flex; align-items: center; flex-direction: column;'> <input style='width: 100%; margin-bottom: 10px;' type='text' id='linhaDigitavel' value='". $data['qrcode_original_path'] ."' /> <button class='copiaCola' id='copiaCola' onclick='copiarTexto(\"linhaDigitavel\")'> <img name='imgCopy' src='{$url_image}/assets/images/copy.svg' alt='Copiar' style='width: 20px; height: 20px; margin-right: 5px;'> Copiar Código </button> </div> </div> <div style='margin: 20px 0'> <span><strong>Escaneie o QR Code:</strong></span> <div> <object class='qrCodeYapay' data='". $data['qrcode_path'] ."' ></object> </div> </div> <hr/> <div style='margin: 20px 0'> <span>Após realizar o pagamento do PIX no seu aplicativo,você receberá a confirmação do pagamento em seu e-mail.</span> </div> </div> <script> function copiarTexto(elementoId) { var copyText = document.getElementById(elementoId); copyText.select(); navigator.clipboard.writeText(copyText.value) .then(() => { alert('Código copiado com sucesso!'); }) .catch(err => { alert('Oops, não foi possível copiar: ' + err); }); } </script> ";
from woo-yapay.
Vamos analisar e levar a correção nas próximas atualizações. Obrigado por ambas contribuições @fgugna @LucasR0cha
from woo-yapay.
Olá @devaguia, gostaria de fazer uma pequena sugestão de melhoria sobre esse assunto, visando aumentar a conversão, especialmente entre o público mais velho. Esse público frequentemente relata ter dificuldade de entender que o ícone é um link para copiar o conteúdo. Deixo a seguir uma sugestão:
![Captura de Tela 2024-06-10 às 17 06 49](https://private-user-images.githubusercontent.com/163227027/338334740-9c4c0617-3a96-497a-8c57-32cdf6508fcd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIyMTU4NTQsIm5iZiI6MTcyMjIxNTU1NCwicGF0aCI6Ii8xNjMyMjcwMjcvMzM4MzM0NzQwLTljNGMwNjE3LTNhOTYtNDk3YS04YzU3LTMyY2RmNjUwOGZjZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyOVQwMTEyMzRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05MGE5NTU2ZGRmZmY4YmIxM2Q0Nzg1Yjg1ZTZhNjc4MzhjMWEwZWM2YmI1MGRjMzFmYzhmMTE4OGUxMDQ5Nzg5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ODWv9RxSp31yoDR5RNqaLS81halUlVgLPkcpVpMyQ14)
from woo-yapay.
Related Issues (20)
- Cancelar a transação automaticamente se o cartão for recusado HOT 8
- O plugin possui alguns problemas de código o que desconfigura o site HOT 6
- woo-yapay não funciona com o endpoint /order-pay/{ORDER_ID} que é uma função nativa do Woo para pagar novamente os pedidos HOT 5
- Clientes reclaram que o parcelamento nÃo libera após preencheram dados [NÃO RESOLVIDO] HOT 123
- Plugin adiciona CSS que causa problema de formatação no layout do site HOT 10
- Ao selecionar Pessoa Jurídica e Boleto, o campo CPF é exibido HOT 5
- Ícones forma de pagamento no checkout muito grande. HOT 3
- Alguns pedidos com pagamento via boleto não estão sendo atualizados HOT 3
- parcelamento sem, juros para o plugin diz que é com juros HOT 2
- Sugestão de *Melhoria*
- Bug de CPF quando pagamento é recusado. HOT 3
- Erro no JS HOT 1
- Bug na versão 0.6.8 HOT 4
- Bug versão 0.6.9 preenchimento nome mobile HOT 6
- Versão 0.7.1 não funciona, cada vez pior essas "melhorias" HOT 2
- Problema com Parcelamentos e Exibição de Opções no Checkout HOT 8
- Espaçamento inferior dos campos na versão 0.7.2 HOT 5
- Código de rastreio não funciona HOT 3
- Novo bloco de checkout do WooCommerce
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from woo-yapay.