Esse artigo tem como objetivo demostrar como exibir informações de pagamento de um produto, para isso há diversas formas e cabe ao desenvolvedor escolher qual melhor atende a suas necessidades:
- {{ product.payment }}
Essa chamada tem como principio exibir um bloco pronto com as formas de pagamentos configuradas na loja, para edita-lo é possivel utilizando apenas `css` e `js`.
- {{ product.payment_option_details }}
Assim como o
product.payment
esse índice retorna as informações de pagamento do produto, só que de uma forma mais detalhada, ele trás os elementos de forma separada, o que possibilita ao desenvolvedor realizar a implementação utilizando apenas as informações que precisa, esse índice é trazido também nas variações do produto, dessa forma é possivel obter as formas de pagamento de cada variação, para saber mais detalhes clique aqui.Exemplo de Retorno do Indice
[payment_option_details] => Array ( [0] => Array ( [display_name] => Boleto - TrayCheckout [plots] => 1 [value] => 45.00 ) [1] => Array ( [display_name] => Cartão Amex - TrayCheckout [plots] => 5 [value] => 10.60 ) )
Exemplo de Implementação
{% for payment in product.payment_option_details %} {% if payment.plots == 1 %} <h2 clas="PrecoPrincipal" >{{ settings.currency }} {{ payment.value }}</h2> <span> à vista no {{ payment.display_name }}</span> {% else %} {% if payment|length > 1 %} <br><span> ou </span> {% endif %} em <span>{{ payment.plots }} vezes de {{ settings.currency }} {{ payment.value }} no {{ payment.display_name }}</span> {% endif %} {% endfor %}
- API de Produto
É possivel também exibir as formas de pagamento utilizando a API de Produto como mostra o exemplo abaixo:
Exemplo
Crie um arquivo dentro da pasta
elements/snippets
como o conteudo abaixo:<script> $(document).ready(function(){ var productId = {{ product.id }} $.ajax({ method: "GET", url: "/web_api/products/"+productId }).done(function( response, textStatus, jqXHR ) { var payment = response.Product.payment_option_details var avista, ou, prazo; $( payment ).each(function( index ) { console.log(this); if(this.plots ==1){ avista = ` <h2 clas="PrecoPrincipal" > R$ ${this.value}</h2> <span> à vista no ${ this.display_name }</span>`; }else{ if(index > 1) ou = `<br><span> ou </span>`; prazo = ` em <span>${ this.plots } vezes de R$ ${ this.value } no ${ this.display_name }</span>`; } $(".product-price"+productId).append(avista, ou ,prazo); }); }).fail(function( jqXHR, status, errorThrown ){ var response = $.parseJSON( jqXHR.responseText ); }); }); </script>
Faça a chamada abaixo onde deseja exibir as formas de pagamento:
<div class="product-payment"> <div class="product-price{{ product.id }}"> </div> {% element 'snippets/payment' { "product": product } %} </div>
Comentários