Neste tutorial vamos adicionar à loja a visualização da funcionalidade de múltiplos pagamentos personalizados, o que nos permite diferenciar formas de pagamento como "Depósito Bancário", "Transferência", "A combinar / Dinheiro" e " Pix" com descontos independentes.
Caso você não possua os componentes "popup" (CSS, JS, HTML), recomendamos que você faça diretamente o tutorial que explica como implementar o popup da forma de pagamento (em vez de apenas atualizá-lo)
HTML
1. A primeira coisa que faremos é chamar o componente de forma de pagamento que traz as últimas atualizações.
Onde tivermos nosso código de meio de pagamento antigo ou desatualizado, adicionaremos o componente de detalhe de pagamento com o seguinte código.
{{ component('payments/payments-details',
{
text_classes: {
text_accent: "label label-accent ml-1",
subtitles: "mb-3",
text_big: "font-big",
text_small: "font-small",
align_right: "text-right"
},
spacing_classes: {
top_1x: "mt-1",
top_2x: "mt-2",
top_3x: "mt-3",
right_1x: "mr-1",
right_2x: "mr-2",
right_3x: "mr-3",
bottom_1x: "mb-1",
bottom_2x: "mb-2",
bottom_3x: "mb-3",
left_3x: "ml-3",
},
container_classes : {
payment_method: "card p-3"
}
})
}}Os parâmetros que o componente de detalhes de pagamentos aceita são principalmente classes para CSS
Classes para textos:
- text_classes.text_accent: Usado para os textos de destaque, como descontos
- text_classes.subtitles: Usado para os subtítulos dentro do pop-up
- text_classes.text_big: Usado para textos grandes que ainda é menor que um título
- text_classes.text_small: Usado para textos pequenos
Classes de espaçamento:
- spacing_classes.top_1x: Usado para margens superiores em 1x
- spacing_classes.right_1x: Usado para margens à direita em 1x
- spacing_classes.right_2x: Usado para margens à direita em 2x
- spacing_classes.right_3x: Usado para margens à direita em 3x
- spacing_classes.bottom_1x: Usado para margens inferiores em 1x
- spacing_classes.bottom_2x: Usado para margens inferiores em 2x
- spacing_classes.bottom_3x: Usado para margens inferiores em 3x
- spacing_classes.left_3x: Usado para margens à esquerda em 3x
Este componente inclui o detalhe de todos os meios de pagamento bem como os descontos que cada um pode oferecer.
Ativação
Uma vez que todas as alterações em seu código tenham sido aplicadas, você poderá ativar a funcionalidade para que seus clientes possam ver os novos meios de pagamento personalizados digitando o link à seguir, substituindo onde diz "sualoja.lojavirtualnuvem.com.br" pela URL da sua loja:
https://sualoja.lojavirtualnuvem.com.br/admin/themes/?activate-new-payments-info=true
Lembre-se, você precisa estar logado no Administrador Nuvemshop para ativar.