product

Esse objeto trás todas as informações do produto atual.

Disponível para uso nas páginas: product | snippets/product

Para saber mais sobre como gerenciar produtos acesse: Cadastrar Produto

Atributos disponíveis​

Atributo product.images

Este atributo retorna um array com informações sobre as imagens cadastradas no produto, que pode ser usado somente na página do produto. É possível manipular o tamanho da imagem para uso em Thumbnails por exemplo, com os atributos da tabela abaixo:

Como Usar

No código HTML o objeto product pode ser usado como no formato abaixo:

Input
<div>
    Codigo do produto: <span>{{ product.id }}</span>
    <h3>{{ product.name }}</h3>
    <h3>{{ product.brand }}</h3>
</div>

{% if product.featured %}
    <span style="color:#fff; background:red">Produto em destaque!</span>
{% endif %}

<div>
    {% if product.price_offer > 0 and product.show_price %}
        Esse produto está em promoção!
    {% endif %}
    
    {% if product.price > 0 and product.show_price %}
        <small> De: R${{ product.price|currency }}</small>
        <span> por: R${{ product.price_offer|currency }}</span>
    {% endif %}
    
    {{ product.payment }}
    
    {% set ranking = product.ranking %}
    
    {% if ranking %}
      Quantidade de avaliações: {{ ranking.count }} <br>
      Nota do produto: {{ ranking.rating }}
    {% endif %}
    
    {{ product.description }}
</div>
Output
<div>
    Codigo do produto: <span>1</span>
    <h3>Camiseta Branca</h3>
    <h3>Marca X</h3>
</div>

<span style="color:#fff; background:red">Produto em destaque!</span>

<div>
    Esse produto está em promoção!  
    <small> De: R$ 50,00</small>
    <span> por: R$ 24,90</span>   
     ou 3x de R$ 10,00 com juros
    Quantidade de avaliações: 150 <br>
    Nota do produto: 5
    Camiseta básica para o dia a dia!
</div>

Helpers do product

Para simplificar o uso de lógica com o objeto product também é possível utilizar seus helpers, que geram um determinado conteúdo com as informações do produto em um bloco já definido e pré-moldado, pronto para ser utilizado somente fazendo a chamada do Helper no código HTML.

Atributos disponíveis​

Como Usar os Helpers

O código HTML abaixo mostra a galeria de imagens do produto atual em exibição.

{{ productHelper.gallery() }}

Exemplo de uso do Objeto e Helper product

O código HTML abaixo pode ser utilizado na pasta elements/snippets para exibição do produto na vitrine.

Input
<div itemid="30" class="product{{ product.has_other_prices ? ' has-other-prices' }}">
    <a href="{{ settings.buy_to_cart ? links.cart_add ~ product.id : product.link }}" data-tray-tst="vitrine_produto_link_imagem">>
        <div class="product-image">
            {% if product.images %}
                {% if utils.is_mobile %}
                    <img itemprop="image" src="{{ product.images[0].large }}" alt="{{ product.name }}" title="{{ product.name }}">
                {% else %}
                    <img itemprop="image"  data-original="{{ product.images[0].large }}" class="lazy" src="{{ asset('img/loading.svg') }}" alt="{{ product.name }}" title="{{ product.name }}">
                {% endif %}
            {% else %}
                <img src="{{ asset('img/no-image.svg') }}" alt="Nenhuma imagem foi cadastrada" width="100" title="{{ product.name }}">
            {% endif %}
            {{ productHelper.banner() }}
            
            {% if settings.discount %}
                {% set porcentagemDesconto = 100 - ( product.price_offer / product.price ) * 100 %}
                {% if porcentagemDesconto < 100 %}
                  <span class="discount"> {{ porcentagemDesconto|number_format }}% de desconto </span>
                {% endif %}  
            {% endif %}             
        </div>
        <div class="product-name" itemprop="name">{{ product.name }}</div>
        <meta itemprop="productID" content="{{ product.id }}"/>
        <meta itemprop="sku" content="{{ product.id }}"/>
        {% if product.ean %}
            <meta itemprop="gtin14" content="{{ product.ean }}">
        {% endif %}
     
        {% if product.brand %}
        <span itemprop="brand" itemscope itemtype="http://schema.org/Organization">
            <meta itemprop="name" content="{{ product.brand }}"/>
        </span>
        {% endif %} 

        {% for discount in product.ProgressiveDiscounts %}
            {% if discount.tag %}
            <div class="product-discount-recursive-tag">{{discount.tag}}</div>
            <div class="product-discount-recursive-desc">{{discount.description}}</div>
            {% endif %}
        {% endfor %} 
 
        {% if settings.cache_infopreco %}
        <div data-module="pricing" data-snippet="snippets/product-payment" data-product-id="{{ product.id }}">
            <div class="pricing">
                Carregando...
            </div>
        </div>
        {% else %}
            <div class="price display-cash">
                {% if old_price %}
                <span class="old-price">
                    {{ settings.currency }} {{ old_price | currency }}
                </span>
                {% endif %}
                <span class="current-price">
                    {{ settings.currency }} {{ current_price | currency }}
                </span>
                <span class="product-installments">
                    {{ product.payment }}
                </span>
            </div>
        {% endif %}        
    </a>
</div>
Output
<div itemid="30" class="product has-other-prices">
    <a href="www.sualoja/produto01" data-tray-tst="vitrine_produto_link_imagem">
        <div class="product-image">
            <img itemprop="image" src="https://caminhoimg.com.br/product01.png alt="Produto de teste" title="Produto de teste">
            <img src="https://caminhoimg.com.br/promocao-lote.png" alt="Promoção em lote" width="100" title="Promoção em lote leve 4 pague 3">
            <span class="discount"> 20% de desconto </span>
        </div>
        <div class="product-name" itemprop="name">Produto de teste</div>
        <meta itemprop="productID" content="30"/>
        <meta itemprop="sku" content="30"/>
        <meta itemprop="gtin14" content="ABCD1234">
        <span itemprop="brand" itemscope itemtype="http://schema.org/Organization">
            <meta itemprop="name" content="Marca X"/>
        </span>

        <div class="product-discount-recursive-tag">Desconto Progressivo</div>
        <div class="product-discount-recursive-desc">10% de desconto comprando 2 unidades</div>
        <div class="price display-cash">
            <span class="old-price">
                R$ 500,00
            </span>
            <span class="current-price">
                R$ 480,00
            </span>
            <span class="product-installments">
                ou 12x de R$ 40,00 sem juros
            </span>
        </div>               
    </a>
</div>

Last updated