LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page
  • Atributos disponíveis​
  • Atributo product.images
  • Como Usar
  • Helpers do product
  • Atributos disponíveis​
  • Como Usar os Helpers
  • Exemplo de uso do Objeto e Helper product

Was this helpful?

  1. Construindo seu Template
  2. Referências
  3. Objetos

product

PreviouspaymentMethodsNextproductTabs

Last updated 2 years ago

Was this helpful?

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:

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

{{ 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 }}

{{ 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 }}

{{ 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 }}

{{ 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 }}

{{ 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 }}

{{ 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 }}

{{ product.compared_product }}

{{ 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 }}

{{ productTabs }}

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:

medium

Exibe a imagem do produto nas dimensões de 90x90px. Exemplo de código:

large

Exibe a imagem do produto nas dimensões de 180x180px. Exemplo de código:

full

Exibe a imagem do produto no tamanho original dela. Exemplo de código:

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() }}

{{ 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() }}

{{ 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() }}

{{ productHelper.variants() }}

{{ 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() }}

{{ productHelper.bundle() }}

{{ productHelper.gifts() }}

{{ productHelper.wishlist() }}

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>

Retorna um valor booleano caso o produto seja um Se o valor for 1 é um kit.

​Retorna o percentual cadastrado para o do produto.

Retorna o número de dias configurado no do produto.

Retorna verdadeiro se o produto possuir

Exibe uma descrição

Retorna verdadeiro se o produto possuir

Array dos que retorna outro array contendo as informações dos produtos.

Retorna verdadeiro se o produto estiver na comparação de produtos, e caso a opção "" esteja marcada.

Exibe o campo de (máximo de 256 caracteres) cadastrado para o produto.

Retorna um array com as , que contem outro array com informações com os seguintes índices: id | container_id | description | url Para saber mais acesse

Exibe a imagem da atrelada ao produto ou somente o nome da promoção, caso não haja imagem cadastrada.

Exibe o bloco de padrão da plataforma para que o produto seja compartilhado nas redes.

Exibe a quantidade de pontos do que o cliente ganha ao comprar o produto.

Exibe um bloco com as que possibilita a escolha da variação desejada para compra.

Exibe informações de preço, detalhes e (o conteúdo muda de acordo com algumas configurações do Painel Administrativo).

Exibe um bloco de 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).

Exibe a seleção dos disponíveis para o produto, se o mesmo estiver configurado.

Exibe o botão ou a lista de seleção para adicionar o produto a

🧱
{% set images = product.images %}
<img src="{{ images[0].small }}" alt="">
{% set images = product.images %}
<img src="{{ images[0].medium }}" alt="">
{% set images = product.images %}
<img src="{{ images[0].large }}" alt="">
{% set images = product.images %}
<img src="{{ images[0].full }}" alt="">
Cadastrar Produto
Kit de Produtos.
imposto IPI
Prazo de disponibilidade
frete grátis.
simplificada do produto.
termos de aceite.
produtos relacionados
Habilitar Função para comparar produtos
informação adicional
productTabs
abas da página do produto
Promoção em lote
redes sociais
Programa de Fidelidade
variações do produto
formas de pagamento
Compre Junto
Brindes
lista de presente e casamento.