Exibindo as formas de pagamento de um produto

Esse artigo tem como objetivo demonstrar 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 é possível 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 é possível obter as formas de pagamento de cada variação.

   Exemplo de retorno do índice

[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 %}

1. API de Produto

   É possível 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 conteúdo 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>

Lembre-se de configurar o modo de demonstração do preço do produto em sua loja. Para isso acesse Configurações > Produto > Geral > Preço e escolha as opções desejadas.