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
  • Consultar Informações de Variação do Produto
  • Listagem de Variações do Produto
  • Attrs

Was this helpful?

  1. Construindo seu Template
  2. APIs Disponíveis

Variações de Produto

Através da API de Variações de Produtos é possível identificar todas as variações contidas na loja virtual e identificar o produto relacionado à variação.

Endereço para Integração

URL de Acesso

https://{URL_LOJA}/web_api/variants

Protocolo

Rest/HTTP

Consultar Informações de Variação do Produto

Para retornar as informações da variação do produto, basta realizar uma requisição via GET, enviando na URL o código da variação desejada.

Veja abaixo uma chamada de exemplo para consultar informações de variação do produto:

<script type="text/javascript">  
    var variantId = "5";

    $.ajax({
        method: "GET",
        url: "/web_api/variants/" + variantId
    }).done(function( response, textStatus, jqXHR ) {
        console.log(response);
    }).fail(function( jqXHR, status, errorThrown ){
        var response = $.parseJSON( jqXHR.responseText );
        console.log(response);
    });
</script>

Na consulta de variação do produto, a API retorna a resposta em JSON.

Abaixo um detalhamento de cada nó do JSON de resposta:

JSON de Resposta
Descrição

Variant

Dados da Variação do Produto

Variant.ean

EAN da Variação do Produto

Variant.id

Código da Variação do Produto

Variant.product_id

Código do Produto

Variant.price

Preço da Variação do Produto

Variant.promotional_price

Preço Promocional da Variação do Produto

Variant.start_promotion

Data Inicial da Promoção da Variação do Produto

Variant.end_promotion

Data Final da Promoção da Variação do Produto

Variant.payment_option

Informações de Pagamento

Variant.illustrative_image

Imagem Ilustrativa da Variação do Produto

Variant.VariantImage[]

Imagens da Variação do Produto

Variant.VariantImage[].http

URL Simples da Imagem da Variação do Produto

Variant.VariantImage[].https

URL Segura da Imagem da Variação do Produto

Variant.VariantImage[].thumbs

Miniaturas da Imagem da Variação do Produto

Variant.VariantImage[].thumbs.30

Miniatura de Tamanho 30px

Variant.VariantImage[].thumbs.30.http

URL Simples da Miniatura de 30px

Variant.VariantImage[].thumbs.30.https

URL Segura da Miniatura de 30px

Variant.VariantImage[].thumbs.90

Miniatura de Tamanho 90px

Variant.VariantImage[].thumbs.90.http

URL Simples da Miniatura de 90px

Variant.VariantImage[].thumbs.90.https

URL Segura da Miniatura de 90px

Variant.VariantImage[].thumbs.180

Miniatura de Tamanho 180px

Variant.VariantImage[].thumbs.180.http

URL Simples da Miniatura de 180px

Variant.VariantImage[].thumbs.180.https

URL Segura da Miniatura de 180px

Variant.Sku[]

Sku da Variação do Produto

Variant.Sku[].type

Tipo da Variação do Produto

Variant.Sku[].value

Dados da Variação do Produto

Exemplo de resposta com sucesso baseando no envio do exemplo acima:

{
    "Variant": {
        "id": "184",
        "ean": "",
        "product_id": "610",
        "price": "199.90",
        "start_promotion": "0000-00-00",
        "end_promotion": "0000-00-00",
        "promotional_price": "0.00",
        "payment_option": "ou 12x com juros de R$ 18,89",
        "illustrative_image": "",
        "VariantImage": [
            {
                "http": "http://images.tcdn.com.br/img/img_prod/123/1.png",
                "https": "https://images.tcdn.com.br/img/img_prod/123/1.png",
                "thumbs": {
                    "30": {
                        "http": "http://images.tcdn.com.br/img/img_prod/123/30_1.png",
                        "https": "https://images.tcdn.com.br/img/img_prod/123/30_1.png"
                    },
                    "90": {
                        "http": "http://images.tcdn.com.br/img/img_prod/123/90_1.png",
                        "https": "https://images.tcdn.com.br/img/img_prod/123/90_1.png"
                    },
                    "180": {
                        "http": "http://images.tcdn.com.br/img/img_prod/123/180_1.png",
                        "https": "https://images.tcdn.com.br/img/img_prod/123/180_1.png"
                    }
                }
            }
        ],
        "Sku": [
            {
                "type": "Cor",
                "value": "Verde"
            },
            {
                "type": "Tamanho",
                "value": "G"
            }
        ]
    }
} 

Listagem de Variações do Produto

Para a listagem de variações do produto, deverá ser realizada uma requisição via GET.

Podem ser enviados alguns parâmetros nesta integração para realizar filtros na listagem de variações de produtos, segue abaixo o dado necessário para envio:

Dados de Entrada
Obrig.
Descrição

id

Não

Código do Produto

sort

Não

Ordenação da Consulta

limit

Não

Quantidade Limite de Registros

page

Não

Página da Consulta

Veja abaixo uma chamada de exemplo para a listagem de variações de produtos:

<script type="text/javascript">  
    var params = {};

    params["page"] = "1";
    params["limit"] = "5";

    $.ajax({
        method: "GET",
        url: "/web_api/variants/",
        data: params
    }).done(function( response, textStatus, jqXHR ) {
        console.log(response);
    }).fail(function( jqXHR, status, errorThrown ){
        var response = $.parseJSON( jqXHR.responseText );
        console.log(response);
    });
</script>

Na listagem de variações de produtos, a API retorna a resposta em JSON.

Abaixo um detalhamento de cada nó do JSON de resposta:

JSON de Resposta

paging

Dados do Produto

paging.total

Total de Registros

paging.page

Páginas corrente

paging.offset

Registro Inicial da Página

paging.limit

Limite de Registros

paging.maxLimit

Máximo de Registros

sort

Ordenação

availableFilters

Filtros Disponíveis

appliedFilters

Filtros Utilizados

Variants[]

Lista de Produtos

Variants[].Variant

Dados da Variação do Produto

Variants[].Variant.ean

EAN da Variação do Produto

Variants[].Variant.id

Código da Variação do Produto

Variants[].Variant.product_id

Código do Produto

Variants[].Variant.price

Preço da Variação do Produto

Variants[].Variant.promotional_price

Preço Promocional da Variação do Produto

Variants[].Variant.start_promotion

Data Inicial da Promoção da Variação do Produto

Variants[].Variant.end_promotion

Data Final da Promoção da Variação do Produto

Variants[].Variant.payment_option

Informações de Pagamento

Variants[].Variant.illustrative_image

Imagem Ilustrativa da Variação do Produto

Variants[].Variant.VariantImage[]

Imagens da Variação do Produto

Variants[].Variant.VariantImage[].http

URL Simples da Imagem da Variação do Produto

Variants[].Variant.VariantImage[].https

URL Segura da Imagem da Variação do Produto

Variants[].Variant.VariantImage[].thumbs

Miniaturas da Imagem da Variação do Produto

Variants[].Variant.VariantImage[].thumbs.30

Miniatura de Tamanho 30px

Variants[].Variant.VariantImage[].thumbs.30.http

URL Simples da Miniatura de 30px

Variants[].Variant.VariantImage[].thumbs.30.https

URL Segura da Miniatura de 30px

Variants[].Variant.VariantImage[].thumbs.90

Miniatura de Tamanho 90px

Variants[].Variant.VariantImage[].thumbs.90.http

URL Simples da Miniatura de 90px

Variants[].Variant.VariantImage[].thumbs.90.https

URL Segura da Miniatura de 90px

Variants[].Variant.VariantImage[].thumbs.180

Miniatura de Tamanho 180px

Variants[].Variant.VariantImage[].thumbs.180.http

URL Simples da Miniatura de 180px

Variants[].Variant.VariantImage[].thumbs.180.https

URL Segura da Miniatura de 180px

Variants[].Variant.Sku[]

Sku da Variação do Produto

Variants[].Variant.Sku[].type

Tipo da Variação do Produto

Variants[].Variant.Sku[].value

Dados da Variação do Produto

Exemplo de resposta com sucesso baseando no envio do exemplo acima:

{
    "paging": {
        "total": 105,
        "page": 1,
        "offset": 0,
        "limit": 30,
        "maxLimit": 50
    },
    "sort": [
        {
            "id": "asc"
        }
    ],
    "availableFilters": [
        "id",
        "product_id",
        "ean",
        "price",
        "promotional_price",
        "modified"
    ],
    "appliedFilters": [],
    "Variants": [
        {
            "Variant": {
                "id": "182",
                "ean": "",
                "product_id": "610",
                "price": "199.90",
                "start_promotion": "0000-00-00",
                "end_promotion": "0000-00-00",
                "promotional_price": "0.00",
                "payment_option": "ou 12x com juros de R$ 18,89",
                "illustrative_image": "",
                "Sku": [
                    {
                        "type": "Cor",
                        "value": "Verde"
                    },
                    {
                        "type": "Tamanho",
                        "value": "P"
                    }
                ]
            }
        }
    ]
}

Attrs

Caso deseje exibir apenas alguns atributos da API, pode-se utilizar o parâmetro attrs

O parâmetro Attrs deve ser passado pela url da requisição da API, nela você deve passar os atributos da qual deseja exibir separados por (,).

Exemplo:

   https://{URL_LOJA}/web_api/variants?attrs=Variant.price,Variant.payment_option_details

Terá como resposta o conteúdo abaixo:

"Variants": [
    {
      "Variant": {
        "id": "9",
        "product_id": "8",
        "price": "40.00",
        "payment_option_details": [
          {
            "display_name": "Boleto - TrayCheckout",
            "plots": "1",
            "value": "38.80"
          }
        ]
      }
    },

Abaixo um exemplo de utilização desse parâmetro:

  var params = {};
  params["attrs"] = "Variant.price,Variant.payment_option_details";

  $.ajax({
    method: "GET",
    url: "/web_api/variants/",
    data: params
  }).done(function( response, textStatus, jqXHR ) {
    console.log(response);
  }).fail(function( jqXHR, status, errorThrown ){
    var response = $.parseJSON( jqXHR.responseText );
    console.log(response);
  });
PreviousProdutosNextLoja de Temas Tray

Last updated 2 years ago

Was this helpful?

Para mais detalhes sobre a API de variações de produto acesse o link da documentação

🧱
https://developers.tray.com.br/?java#listagem-de-variacoes-get