Variações de Produtos

Esse artigo tem por objetivo detalhar e exemplificar como é feita a manipulação de  informações de variações utilizando o Opencode.

Todas as informação das variações de um produto estão armazenados no índice {{ product.variants }}  nesse índice é disponibilizados diversas informações referentes a variação como id , product_id , price , stock, payment_option, Sku , payment_option_details entre outras.

Abaixo um exemplo de retorno desse Índice.

Array
(
    [sku] => Array
        (
            [Cor] => Array
                (
                    [Azul] => Array
                        (
                            [id] => 112
                            [ean] => 
                            [product_id] => 88
                            [price] => 80.00
                            [cost_price] => 0.00
                            [stock] => 10
                            [minimum_stock] => 
                            [reference] => 
                            [weight] => 100
                            [length] => 40
                            [width] => 25
                            [height] => 25
                            [start_promotion] => 
                            [end_promotion] => 
                            [payment_option] => R$ 72,00 à vista com desconto Boleto - TC ou 6x com juros de R$ 14,28
                            [payment_option_details] => Array
                                (
                                    [0] => Array
                                        (
                                            [display_name] => Boleto - TrayCheckout
                                            [plots] => 1
                                            [value] => 72.00
                                        )

                                    [1] => Array
                                        (
                                            [display_name] => Cartão Amex - TrayCheckout
                                            [plots] => 6
                                            [value] => 14.28
                                        )

                                )

                            [available] => 
                            [illustrative_image] => 
                            [color_id_1] => 2
                            [color_id_2] => 0
                            [cubic_weight] => 100
                            [payment] => [html pronto das formas de pagamento]
                            [images] => Array
                                (
                                    [0] => Array
                                        (
                                            [small] => https://images4.tcdn.com.br/img/img_prod/image.jpg
                                            [medium] => https://images3.tcdn.com.br/img/img_prod/image.jpg
                                            [large] => https://images3.tcdn.com.br/img/img_prod/image.jpg
                                            [full] => https://images1.tcdn.com.br/img/img_prod/image.jpg
                                        )

                                )

                            [calculated_price] => 80.00
                            [is_variant] => 1
                            [price_offer] => 0
                            [color_1] => Array
                                (
                                    [id] => 2
                                    [name] => Azul
                                    [image] => https://images3.tcdn.com.br/img/img_prod/xx/cor_2.png?20160622100723
                                )

                        )

                    [Vermelho] => Array
                        (
                            [id] => 114
                            [ean] => 
                            [product_id] => 88
                            [price] => 80.00
                            [cost_price] => 0.00
                            [stock] => 10
                            [minimum_stock] => 
                            [reference] => 
                            [weight] => 100
                            [length] => 40
                            [width] => 25
                            [height] => 25
                            [start_promotion] => 
                            [end_promotion] => 
                            [payment_option] => R$ 72,00 à vista com desconto Boleto TC ou 6x com juros de R$ 14,28
                            [payment_option_details] => Array
                                (
                                    [0] => Array
                                        (
                                            [display_name] => Boleto - TrayCheckout
                                            [plots] => 1
                                            [value] => 72.00
                                        )

                                    [1] => Array
                                        (
                                            [display_name] => Cartão Amex - TrayCheckout
                                            [plots] => 6
                                            [value] => 14.28
                                        )

                                )

                            [available] => 
                            [illustrative_image] => 
                            [color_id_1] => 12
                            [color_id_2] => 0
                            [cubic_weight] => 100
                            [payment] => [html pronto das formas de pagamento]
                            [images] => Array
                                (
                                    [0] => Array
                                        (
                                            [small] => https://images.tcdn.com.br/img/img_prod/image.jpg
                                            [medium] => https://images.tcdn.com.br/img/img_prod/image.jpg
                                            [large] => https://images.tcdn.com.br/img/img_prod/image.jpg
                                            [full] => https://images4.tcdn.com.br/img/img_prod/image.jpg
                                        )

                                )

                            [calculated_price] => 80.00
                            [is_variant] => 1
                            [price_offer] => 0
                            [color_1] => Array
                                (
                                    [id] => 12
                                    [name] => Vermelho
                                    [image] => https://images3.tcdn.com.br/img/img_prod/xx/cor_12.png?20160622100723
                                )

                        )

                )

        )

)

Como exibir as formas de pagamento das variações?

Para exibir essa informação há duas opções:

A primeira delas é utilizar o payment, essa chamada trás um bloco já pronto das informações de precificação:

Exempo


{% for sku in product.variants %}
  {% for type in sku %}
    {% for value in type %}
      {{ value.payment }}
    {% endfor %}
  {% endfor %}
{% endfor %}

          
 

 É possivel também montar o código de acordo com sua necessidade para isso deve-se utilizar as informações do índice payment_option_details esse índice retorna as seguintes informações:

 [payment_option_details] => Array
        (
            [0] => Array
                (
                    [display_name] => Boleto - TrayCheckout
                    [plots] => 1
                    [value] => 72.00
                )

            [1] => Array
                (
                    [display_name] => Cartão Amex - TrayCheckout
                    [plots] => 6
                    [value] => 14.28
                )

        )

Exemplo


{% for sku in product.variants %}
  {% for type in sku %}
    {% for key, value in type %}
    <div>
    <h2>{{ key }}</h2>
      {% for payment in value.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 %}
    </div>
    {% endfor %}
  {% endfor %}
{% endfor %}
          
 

 

 Seguindo o mesmo principio é possivel exibir diversas outras características de variações, como tipos de variações e imagens por exemplo.