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:

1.  {{ 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`.

    

2.  {{ 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 %}
   

    

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

Taynara Sene

25 de fevereiro de 2021 18:53