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​

Atributos	Característica
{{ product.id }}	Identificador único do produto.
{{ product.slug }}	Exibe uma string que corresponde ao trecho de URL que indica o acesso ao produto entre categorias.
{{ product.name }}	Nome do produto.
{{ product.category_id }}	Exibe o identificador único da categoria principal do produto.
{{ product.modified }}	Retorna a data e hora da última modificação do produto.
{{ product.is_kit }}	Retorna um valor booleano caso o produto seja um Kit de Produtos. Se o valor for 1 é um kit.
{{ product.brand_id }}	Retorna o número de ID "identificador único" da marca do produto.
{{ product.price }}	Preço de venda do produto.
{{ product.price_offer }}	Preço do produto em promoção.
{{ product.ProgressiveDiscounts }}	Retorna um Array com as informações sobre o desconto progressivo, os itens retornados são: name | description | tag
{{ product.percentage_discount }}	Retorna o valor numérico da porcentagem de desconto no preço do produto.
{{ product.cost_price }}	Retorna o preço de custo do produto.
{{ product.ipi }}	​Retorna o percentual cadastrado para o imposto IPI do produto.
{{ product.show_price }}	Retorna 1 caso as informações de preço devam ser exibidas.
{{ product.has_other_prices }}	Retorna se o produto possui outros preços, ou seja, se possui variações com preços de venda diferentes.
{{ product.payment }}	Retorna até 3 opões de parcelamento do produto definidos no campo "Exibir preço parcelado junto do preço do produto".
{{ product.payment_option_details }}	Retorna um Array com todas as informações das formas de pagamento, os índices retornados são: display_name | plots | value | type | tax
{{ product.link }}	Link para a página do produto, que pode ser usado no href da tag a.
{{ product.upon_request }}	Retorna se o produto está com o campo "Marcar produto sob consulta" ativo.
{{ product.available }}	Retorna um valor booleano. Caso o produto esteja desativado para venda exibe o valor 1. Opção "Produto ativo - será exibido na loja para venda" desmarcado.
{{ product.availability_days }}	Retorna o número de dias configurado no Prazo de disponibilidade do produto.
{{ product.stock }}	Retorna a quantidade de produtos em estoque.
{{ product.featured }}	Retorna verdadeiro se o produto tiver o selo destaque. Opção "Exibir selo destaque no produto" marcada.
{{ product.new }}	Retorna verdadeiro se o produto tiver o selo lançamento. Opção "Exibir selo lançamento no produto" marcada.
{{ product.free_shipping }}	Retorna verdadeiro se o produto possuir frete grátis.
{{ product.additional_button }}	Retorna verdadeiro se o produto tiver o selo adicional. Opção "Exibir selo adicional no produto" marcada.
{{ product.availability }}	Informação de disponibilidade do produto. Configurada no campo "Prazo de disponibilidade".
{{ product.ranking }}	Retorna um Array com informações da avaliação do produto, os índices retornados são: count | rating
{{ product.ean }}	Exibe o código de barras do produto, configurado no campo "Código EAN/GTIN/UPC".
{{ product.description }}	Exibe a descrição completa do produto, configurada no campo "Descrição".
{{ product.description_small }}	Exibe uma descrição simplificada do produto.
{{ product.start_promotion }}	Exibe a data de início da promoção do produto, configurado no campo "Período da promoção".
{{ product.end_promotion }}	Exibe a data de término da promoção do produto, configurado no campo "Período da promoção".
{{ product.release_date }}	Retorna a data de lançamento do produto
{{ product.brand }}	Exibe a marca do produto, configurada no campo "Marca".
{{ product.model }}	Exibe o modelo do produto, configurada no campo "Modelo".
{{ product.weight }}	Exibe o peso do produto em gramas, configurado no campo "Peso".
{{ product.cubic_weight }}	Retorna o peso cúbico do produto.
{{ product.length }}	Exibe o comprimento do produto em centímetros, configurado no campo "Comprimento".
{{ product.width }}	Exibe a largura do produto em centímetros, configurada no campo "Largura".
{{ product.height }}	Exibe a altura do produto em centímetros, configurada no campo "Altura".
{{ product.reference }}	Exibe o código de referência do produto, configurada no campo "Referência".
{{ product.has_acceptance_terms }}	Retorna verdadeiro se o produto possuir termos de aceite.
{{ product.additional_message }}	Exibe a mensagem adicional do produto, configurada no campo "Mensagem adicional".
{{ product.warranty }}	Exibe o texto a respeito da garantia do produto, configurada no campo "Tempo de garantia".
{{ product.warranty_days }}	Retorna o número de dias configurado para garantia do produto.
{{ product.quantity_sold }}	Exibe a quantidade produtos vendidos.
{{ product.related_categories }}	Retorna um Array com o ID das categorias relacionadas ao produto.
{{ product.virtual_product }}	Retorna verdadeiro se o produto for virtual. Opção "Este produto não requer o envio físico (serviços ou bens digitais - produto virtual)" marcada.
{{ product.video }}	Exibe a URL do vídeo inserido no produto, configurado no campo "Endereço do video (url)".
{{ product.related_products }}	Array dos produtos relacionados que retorna outro array contendo as informações dos produtos.
{{ product.compared_product }}	Retorna verdadeiro se o produto estiver na comparação de produtos, e caso a opção "Habilitar Função para comparar produtos" esteja marcada.
{{ product.included_items }}	Itens inclusos na compra do produto, configurado no campo "Itens inclusos".
{{ product.has_variation }}	Retorna um valor booleano "1" verdadeiro caso o produto contenha variações.
{{ product.variants }}	Retorna um array contendo diversos arrays um dentro do outro que levam ao tipo de variações, suas características e todas suas informações com os seguintes índices retornados: id | ean | product_id | price | stock | minimum_stock | reference | weight | length | width | height | start_promotion | end_promotion |price_offer | payment_option | illustrative_image | images | payment_option_details
{{ product.additional_information }}	Exibe o campo de informação adicional (máximo de 256 caracteres) cadastrado para o produto.
{{ productTabs }}	Retorna um array com as abas da página do produto, que contem outro array com informações com os seguintes índices: id | container_id | description | url Para saber mais acesseproductTabs

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:

Atributos disponíveis do "product.images"	Características e Exemplo de uso
small​	Exibe a imagem do produto nas dimensões de 30x30px. Exemplo de código: {% set images = product.images %} <img src="{{ images[0].small }}" alt="">
medium	Exibe a imagem do produto nas dimensões de 90x90px. Exemplo de código: {% set images = product.images %} <img src="{{ images[0].medium }}" alt="">
large	Exibe a imagem do produto nas dimensões de 180x180px. Exemplo de código: {% set images = product.images %} <img src="{{ images[0].large }}" alt="">
full	Exibe a imagem do produto no tamanho original dela. Exemplo de código: {% set images = product.images %} <img src="{{ images[0].full }}" alt="">

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​

Atributos	Característica
{{ productHelper.banner() }}	Exibe a imagem da Promoção em lote atrelada ao produto ou somente o nome da promoção, caso não haja imagem cadastrada.
{{ productHelper.gallery() }}	Exibe uma galeria com todas as imagens e vídeo cadastrados no produto. Em que a imagem exibida no momento aparece maior e em tamanho menor as thumbnails para visualizar as outras imagens e vídeo do produto.
{{ productHelper.social() }}	Exibe o bloco de redes sociais padrão da plataforma para que o produto seja compartilhado nas redes.
{{ productHelper.labels() }}	Exibe os selos que rotulam o produto (destaque, frete grátis, lançamento, entre outros).
{{ productHelper.details() }}	Exibe algumas informações de detalhe do produto (marca, modelo, referência e data de lançamento).
{{ productHelper.icons('top') }}	Exibe as características do produto em formato de ícone, as posições disponíveis são: top | right | bottom
{{ productHelper.bonus() }}	Exibe a quantidade de pontos do Programa de Fidelidade que o cliente ganha ao comprar o produto.
{{ productHelper.variants() }}	Exibe um bloco com as variações do produto que possibilita a escolha da variação desejada para compra.
{{ productHelper.form() }}	Exibe um input que permite inserir a Quantidade de produtos e o botão Comprar.
{{ productHelper.shipping() }}	Exibe o input com o botão para cálculo de Frete.
{{ productHelper.pricing() }}	Exibe informações de preço, detalhes e formas de pagamento (o conteúdo muda de acordo com algumas configurações do Painel Administrativo).
{{ productHelper.bundle() }}	Exibe um bloco de Compre Junto com sugestão de outros produtos que podem ser comprados com o produto atual (este bloco só é exibido se todos os produtos possuírem estoque).
{{ productHelper.gifts() }}	Exibe a seleção dos Brindes disponíveis para o produto, se o mesmo estiver configurado.
{{ productHelper.wishlist() }}	Exibe o botão ou a lista de seleção para adicionar o produto a lista de presente e casamento.

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>

Exemplo do uso do atributo product.video

<!--Renderização condicional caso exista vídeo -->
{% if product.video %}
  <!-- CSS -->
  <style>
    /* Estilizando o widget */
    #youtube-widget {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      z-index: 1000;
      border-radius: 50px;
      overflow: hidden;
       transition: transform 0.3s ease;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    /* Deixa o vídeo caber dentro do widget */
    #youtube-widget iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
  <!-- Estrutura do HTML -->
  <div id="youtube-widget">
    <iframe 
      src="{{ product.video }}?autoplay=1&mute=1" 
      allow="autoplay; encrypted-media"
      allowfullscreen>
    </iframe>
  </div>
{% endif %}