Documentação de Temas

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​

AtributosCaracterí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​

AtributosCaracterí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>
PreviouspaymentMethodsNextproductTabs

Last updated