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

Was this helpful?

  1. Construindo seu Template
  2. Desenvolver

Como manipular as variações de produtos

Esse artigo tem por objetivo detalhar e exemplificar como é feita a manipulação de informações de variações nos servidores Tray.

Todas as informações das variações de um produto estão armazenadas no índice {{ product.variants }} e nesse índice são disponibilizadas diversas informações referentes a variação como id, product_id, price, stock, payment_option, sku, entre outras.

Abaixo um exemplo de retorno desse índice.

Array
(
    [sku] => Array
        (
            [Cor] => Array
                (
                    [Azul] => Array
                        (
                            [id] => 112
                            [ean] => 
                            [product_id] => 88
                            [price] => 80.00
                            [cost_price] => 0.00
                            [stock] => 10
                            [minimum_stock] => 
                            [reference] => 
                            [weight] => 100
                            [length] => 40
                            [width] => 25
                            [height] => 25
                            [start_promotion] => 
                            [end_promotion] => 
                            [payment_option] => R$ 72,00 à vista com desconto Boleto - TC ou 6x com juros de R$ 14,28
                            [payment_option_details] => Array
                                (
                                    [0] => Array
                                        (
                                            [display_name] => Boleto - TrayCheckout
                                            [plots] => 1
                                            [value] => 72.00
                                        )

                                    [1] => Array
                                        (
                                            [display_name] => Cartão Amex - TrayCheckout
                                            [plots] => 6
                                            [value] => 14.28
                                        )

                                )

                            [available] => 
                            [illustrative_image] => 
                            [color_id_1] => 2
                            [color_id_2] => 0
                            [cubic_weight] => 100
                            [payment] => [html pronto das formas de pagamento]
                            [images] => Array
                                (
                                    [0] => Array
                                        (
                                            [small] => https://images4.tcdn.com.br/img/img_prod/image.jpg
                                            [medium] => https://images3.tcdn.com.br/img/img_prod/image.jpg
                                            [large] => https://images3.tcdn.com.br/img/img_prod/image.jpg
                                            [full] => https://images1.tcdn.com.br/img/img_prod/image.jpg
                                        )

                                )

                            [calculated_price] => 80.00
                            [is_variant] => 1
                            [price_offer] => 0
                            [color_1] => Array
                                (
                                    [id] => 2
                                    [name] => Azul
                                    [image] => http://images3.tcdn.com.br/img/img_prod/xx/cor_2.png?20160622100723
                                    [image_secure] => https://images3.tcdn.com.br/img/img_prod/xx/cor_2.png?20160622100723
                                )

                        )

                    [Vermelho] => Array
                        (
                            [id] => 114
                            [ean] => 
                            [product_id] => 88
                            [price] => 80.00
                            [cost_price] => 0.00
                            [stock] => 10
                            [minimum_stock] => 
                            [reference] => 
                            [weight] => 100
                            [length] => 40
                            [width] => 25
                            [height] => 25
                            [start_promotion] => 
                            [end_promotion] => 
                            [payment_option] => R$ 72,00 à vista com desconto Boleto TC ou 6x com juros de R$ 14,28
                            [payment_option_details] => Array
                                (
                                    [0] => Array
                                        (
                                            [display_name] => Boleto - TrayCheckout
                                            [plots] => 1
                                            [value] => 72.00
                                        )

                                    [1] => Array
                                        (
                                            [display_name] => Cartão Amex - TrayCheckout
                                            [plots] => 6
                                            [value] => 14.28
                                        )

                                )

                            [available] => 
                            [illustrative_image] => 
                            [color_id_1] => 12
                            [color_id_2] => 0
                            [cubic_weight] => 100
                            [payment] => [html pronto das formas de pagamento]
                            [images] => Array
                                (
                                    [0] => Array
                                        (
                                            [small] => https://images.tcdn.com.br/img/img_prod/image.jpg
                                            [medium] => https://images.tcdn.com.br/img/img_prod/image.jpg
                                            [large] => https://images.tcdn.com.br/img/img_prod/image.jpg
                                            [full] => https://images4.tcdn.com.br/img/img_prod/image.jpg
                                        )

                                )

                            [calculated_price] => 80.00
                            [is_variant] => 1
                            [price_offer] => 0
                            [color_1] => Array
                                (
                                    [id] => 12
                                    [name] => Vermelho
                                    [image] => http://images3.tcdn.com.br/img/img_prod/xx/cor_12.png?20160622100723
                                    [image_secure] => https://images3.tcdn.com.br/img/img_prod/xx/cor_12.png?20160622100723
                                )

                        )

                )

        )

)

Indicamos que seja utilizada a chamada image_secure para exibir as imagens das variações pois a mesma tem o link com https, a chamada somente com image tem o link com http

Vamos de um exemplo prático para deixar mais claro a utilização do {{ product.variants }}

Como exibir as formas de pagamento das variações?

Para exibir essa informação há duas opções:

A primeira delas é utilizar o payment, essa chamada trás um bloco já pronto das informações de precificação:

Exemplo

{% for sku in product.variants %}
  {% for type in sku %}
    {% for value in type %}
      {{ value.payment }}
    {% endfor %}
  {% endfor %}
{% endfor %}   

Também é possível exibir as formas de pagamento de acordo com sua necessidade e para isso deve-se utilizar as informações do índice payment_option_details. Esse índice retorna as seguintes informações:

 [payment_option_details] => Array
        (
            [0] => Array
                (
                    [display_name] => Boleto - TrayCheckout
                    [plots] => 1
                    [value] => 72.00
                )

            [1] => Array
                (
                    [display_name] => Cartão Amex - TrayCheckout
                    [plots] => 6
                    [value] => 14.28
                )

        )

Exemplo:

{% for sku in product.variants %}
  {% for payment in sku.payment_option_details %}
    {% if payment.plots == 1 %}
    <h2 clas="PrecoPrincipal" >{{ settings.currency }} {{ payment.value }}</h2>
      <span> à vista no {{ payment.display_name }}</span>
    {% else %}
      {% if payment|length > 1 %}
       <br><span> ou </span>
      {% endif %}
      em <span>{{ payment.plots }} vezes de {{ settings.currency }} {{ payment.value }}
      no {{ payment.display_name }}</span>
    {% endif %}
  {% endfor %}
{% endfor %} 

Seguindo o mesmo principio é possível exibir diversas outras características de variações, como tipos de variações e imagens por exemplo.

PreviousComo inserir um vídeo na home da lojaNextComo saber se o usuário está logado

Last updated 8 months ago

Was this helpful?

🧱