Exibindo as formas de pagamento de um Produto

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>