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

Was this helpful?

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

products

PreviousproductTabsNextproductFeatured

Last updated 1 year ago

Was this helpful?

O Objeto products é um array que disponibiliza informações de todos os produtos possíveis na página atual.

Na pagina de categorias “catalog”, por exemplo contém somente os produtos da categoria determinada de acordo com os filtros aplicados, e na “search” contém os produtos de acordo com os critérios da busca e os filtros aplicados.

Para chamar produtos com critérios personalizados, veja a função .

Disponível para uso nas páginas: home | catalog | search

Para saber mais sobre como gerenciar produtos acesse:

Atributos disponíveis​

As requisições de produtos sempre retornarão um array de dados, portanto podem ser exibidos com a utilização de um índice determinado como nos atributos abaixo, ou quando iterados em um laço de repetição.

Atributos
Característica

{{ products[0].id }}

Identificador único do produto.

{{ products[0].name }}

Nome do produto.

{{ products[0].description_small }}

{{ products[0].category_id }}

Identificador único da Categoria Principal do Produto

{{ products[0].price }}

Exibe o valor de venda configurado no produto.

{{ products[0].start_promotion }}

Exibe a data de inicio da promoção do produto.

{{ products[0].end_promotion }}

Exibe a data de término da promoção do produto.

{{ products[0].brand }}

Exibe a marca do produto.

{{ products[0].model}}

Exibe o modelo do produto.

{{ products[0].weight }}

Exibe o peso do produto em gramas.

{{ products[0].length }}

Exibe o comprimento do produto em centímetros.

{{ products[0].width }}

Exibe a largura do produto em centímetros.

{{ products[0].height }}

Exibe a altura do produto em centímetros.

{{ products[0].reference }}

Exibe o código de Referência do produto.

{{ products[0].quantity_sold }}

Exibe a quantidade de produtos vendidos.

{{ products[0].price_offer }}

Exibe o preço em promoção do produto.

{{ products[0].show_price }}

Existem regras na plataforma referente a exibição do preço. Só exiba o preço se o show_price for verdadeiro

{% if products[0].has_other_prices %}

Retorna se o produto possui outros preços

{{ products[0].has_variation }}

Retorna o valor 1 caso o produto possua variações.

{{ product.variants }}

Retorna um array com todas as informações das variações, os índices retornados são:

id | ean | product_id | price | stock |minimum_stock | reference |start_promotion |VariantImage | end_promotion | payment_option|illustrative_image | Sku| payment_option_details

{{ products[0].payment }}

Retorna opões de parcelamento do produto

{{ products[0].link }}

Link para a página do produto

{{ products[0].upon_request }}

Retorna se o produto está sob consulta

{{ products[0].available }}

Retorna um valor booleano. Caso o produto esteja ativo para venda, exibe o valor 1. A opção "Produto ativo - será exibido na loja para venda" no cadastro do produto tem que estar setada.

{{ products[0].availability }}

{{ products[0].stock }}

Quantidade de produtos em estoque.

{% if products[0].featured %}

Retorna verdadeiro se for destaque

{% if products[0].new %}

Retorna verdadeiro se for lançamento

{% if products[0].free_shipping %}

Retorna verdadeiro se possuir frete grátis

{{ products[0].additional_button }}

Retorna o valor 1 caso o produto não necessite de alguma seleção adicional para comprar. Não retornará nenhum valor para produtos com variação, kit, entre outros que necessitem de ação adicional antes de comprar.

{{ products[0].additional_message }}

Exibe a mensagem adicional cadastrada do produto.

{% set ranking = products[0].ranking %}

count | rating Ranking (avaliação) do produto

{{ products[0].warranty }}

Exibe a opção selecionada no tempo de garantia do produto.

{{ product.bonus_html }}

{{ product.data_tray_ga4 }}

Atributo product.images

Este atributo retorna um array com informações sobre as imagens cadastradas no produto, que pode ser usado nas páginas home, catalog e search. É 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

Abaixo você pode ver alguns exemplos da utilização do Objeto products

Input
<div class="showcase-catalog">
    <ul class="list-product">
        {% for item in products %}
            <li class="item">                
                <div class="product">
                    <div class="image">                        
                        <a href="{{ item.link }}" class="space-image">
                            <img class="image" src="{{ asset('img/empty.png') }}" data-src="{{ item.images[0].large }}" alt="{{ item.name }}">
                        </a>
                        {% set replaceTags = {'src=': 'width="119" height="22" alt="Selo" src='} %}
                         {% if product.featured and Image('featured') %}
                            <div class="tag featured">
                                {{ Image('featured') | replace(replaceTags) }}
                            </div>
                        {% endif %}                                       
                    </div>

                    <a class="item-info" href="{{ item.link }}">
                        <div class="item-name">
                            {{ item.name }}
                        </div>
                        <div class="item-price">
                            {% if item.available and item.stock > 0 and not item.upon_request %}
                            
                                {% set current_price = item.price_offer > 0 ? item.price_offer : item.price %}
                                {% set old_price     = item.price_offer > 0 ? item.price : false %}                                
                                {% if item.has_variation and item.has_other_prices %}
                                    <span class="item-has-variants">
                                        {{ Translation('a_partir_de') }}
                                    </span>
                                {% endif %}
                                                                
                                <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="item-installments">
                                        {{ item.payment }}
                                    </span>                                
                                </div>
                                                            
                            {% endif %}
                        </div>
                    </a>

                    <div class="actions">
                        {% if item.available and item.stock > 0 and not item.upon_request %}
                            <a class="item-button" href="{{ item.link }}">
                                Ver produto
                            </a>
                        {% endif %}
                    </div>

                </div>
            </li>
        {% endfor %}
    </ul>
</div>
Output
<div class="showcase-catalog">
    <ul class="list-product">
        <li class="item">                
            <div class="product">
                <div class="image">                        
                    <a href="www.sualoja/categoria/produto-a" class="space-image">
                        <img class="image" src="https://caminhoimg.com.br/produto-a.png" alt="Produto A">
                    </a>
                    <div class="tag featured">
                        Destaque
                    </div>
                </div>
                <a class="item-info" href="{{ item.link }}">
                    <div class="item-name">
                        Produto A
                    </div>
                    <div class="item-price">
                        <span class="item-has-variants">
                            A partir de
                        </span>
                        <div class="price display-cash">                                
                            <span class="old-price">
                                R$ 500,00
                            </span>                          
                            <span class="current-price">
                                R$ 450,00
                            </span>                                
                            <span class="item-installments">
                                ou 10x de 53,40 com juros
                            </span>                                
                        </div>
                    </div>
                </a>
                <div class="actions">
                    <a class="item-button" href="https://www.sualoja.com.br/produto-a">
                        Ver produto
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>

Retorna um texto com a uma descrição

Retorna o configurado para o produto.

🧱
{% set images = products[0].images %}
<img src="{{ images[0].small }}" alt="">
{% set images = products[0].images %}
<img src="{{ images[0].medium }}" alt="">
{% set images = products[0].images %}
<img src="{{ images[0].large }}" alt="">
{% set images = products[0].images %}
  <img src="{{ images[0].full }}" alt="">
Products()
Cadastrar Produto
simplificada do produto.
Prazo de disponibilidade
Programa de fidelização
Atributo para o Google Analytics 4