Instalação

Crie, e customize os layouts de seus projetos de maneira simples e eficiente. Faça o upload de todos os seus arquivos de forma automática utilizando a nossa console tool.

A console tool nada mais é do que uma gem escrita em Ruby onde é possivel realizar download e upload dos arquivos do tema de uma forma mais dinâmica permitindo um ambiente de alta produtividade, por isso é a nossa recomendação.

pré requisito: Ruby - versão igual ou superior á 2.1.7

$ gem install opencode_theme
$ opencode systeminfo
Ruby: v2.3.3-p222
OpencodeTheme: v:1.0.5
Operating System: x86_64-linux
HTTParty: v0.14.0
Launchy: v2.4.3

Atualização

A atualização da Console Tool é recomendada para sempre manter compatível com os recursos do OpenCode.

Para esta atualização, é necessário verificar a versão da GEM utilizada, pois caso utilize uma versão igual ou inferior a versão 0.1.2, é necessário desinstalar a GEM e realizar uma nova instalação

$ gem update opencode_theme
$ opencode systeminfo
Ruby: v2.3.3-p222
OpencodeTheme: v:1.0.5
Operating System: x86_64-linux
HTTParty: v0.14.0
Launchy: v2.4.3

Desinstalação

Caso utilize uma versão igual ou inferior a versão 0.1.2 será necessário realizar a desinstalação da GEM e a instalação para versão atual.

$ gem uninstall opencode_theme

Comandos Disponiveis

Para saber quais comandos estão disponíveis digite o comando ao lado:

$ opencode -h
$ opencode new API_KEY PASSWORD THEME_NAME THEME_BASE
$ opencode clean
$ opencode configure API_KEY PASSWORD THEME_ID
$ opencode download FILE
$ opencode help [COMMAND]
$ opencode list
$ opencode open
$ opencode remove FILE
$ opencode systeminfo
$ opencode upload FILE
$ opencode watch

Chaves de desenvolvimento

As chaves API_KEY e PASSWORD necessarias para criação e manutenção de temas são geradas através do painel administrativo, na aba Minha Loja > Design Da Loja , no canto superior direito, como mostra abaixo.

Lista de Desenvolvedores

Criar Tema

Cria um novo tema com o nome informado.

É possivel também informar um tema base para criação informando também o id do tema a ser utilizado.

Experimente já!

Ficou curioso para saber como funciona? Experimente criar agora uma tema na nossa loja de teste…

Para isso basta usar a API_KEY e o PASSWORD disponibilizados a baixo:

API_KEY: 20a699301d454509691f3ea02c1cba4b
PASSWORD: ea0727075e1639a42fd966a2f6e67abc

o comando ficará da seguinte maneira:

$ opencode new 20a699301d454509691f3ea02c1cba4b  ea0727075e1639a42fd966a2f6e67abc "primeiro-tema"

Após isso o seu tema já estará criado.

ATENÇÃO, não crie nenhum tema importante com as credenciais a cima. Por se tratar de uma loja de teste todos os temas criados são apagados periodicamente.

 $ opencode new API_KEY PASSWORD THEME_NAME THEME_BASE

Cache no Tema

Esse comando é responsável por limpar o cache dos arquivos estáticos do tema.

$ opencode clean

Configurar tema para edição

Esse comando é responsável por configurar o tema, é através dele que é gerado o arquivo config.yml, responsável pela sincronização do tema.

$ mkdir meuTema
$ cd meuTema
$ opencode configure API_KEY PASSWORD THEME_ID 
  ---
  :api_key: API_KEY
  :password: PASSWORD
  :theme_id: THEME_ID
  :preview_url: PREVIEW_URL

Download dos arquivos do Tema

Esse comando é responsavel por efetuar o download dos arquivos, ou de um arquivo especifico do tema.

$  opencode download FILE 

Help de comandos

Esse comando é responsavel por descrever um comando especifico.

$  opencode help COMMAND 

Temas disponiveis

Esse comando é responsavel por listar todos os temas da loja.

$    opencode list 

Preview do Tema

Esse comando é responsavel por abrir a loja no navegador

$    opencode open 

Excluir arquivos

Esse comando é responsavel por remover um arquivo do tema (apenas se o tema não estiver publicado)

$    opencode remove FILE 

Detalhes de Instalação

Esse comando é responsavel por mostra informações do sistema

$    opencode systeminfo 

Upload de Arquivos

Esse comando é responsavel por fazer upload dos arquivo informado ou todos se FILE for omitido

$    opencode upload FILE 

Upload automatico de arquivos

Esse comando é responsavel por monitorar os arquivo sempre que ele for salvo

$    opencode watch 

Erros

Abaixo descrição dos possiveis erros exibidos na gem

Código Descrição
00313 Extensão ou nome de arquivo invalido, verifique as regras aqui.
00314 Não é permitido o envio de arquivos para este diretórios veja a estrutura do tema aqui.
00401 Não é possivel editar o tema já publicado, saiba mais aqui

Objetos do Opencode

Objetos são estruturas de dados utilizadas para facilitar a manipulação de determinadas informações.

Podemos citar por exemplo o objeto product que contem todos os atributos de um produto, e também o objeto categories que tem como retorno todas as categorias da loja.

As informações podem ser trazidas em um vetor (array). Por isso, para utilizar por exemplo uma categoria, é necessário passar seu índice na listagem de categorias, ou seja a posição que a categoria se encontra dentro desse vetor de categorias.

If

Podemos exibir na tela somente os itens que tiverem o atributo igual ao que foi passado, para isso podemos fazer uma comparação na exibição de produto utilizando o if:

Com o if também podemos verificar se o objeto em questão, no caso o objeto categories, contém determinado atributo cadastrado. Como exemplo ao lado, é verificado se as categorias contém uma imagem, caso tenha ela é exibida na tela:

Para saber mais sobre as opções da tag if, clique aqui para ir até a documentação do Twig

For

Podemos também exibir elementos de um objeto utilizando um laço for, exemplo ao lado:

Para saber mais sobre as opções da tag for, clique aqui para ir até a documentação do Twig

 <h1>{{ categories[0].name }}</h1>
<h1>Minha Categoria</h1>

Como manipular Objetos

Podemos manipular objetos de diversas maneiras, como exibir seus atributos na tela, utilizar laços de repetição e fazer validações, tudo isso de acordo com a necessidade.

As requisições de produtos sempre retornarão um array (vetor) de dados, por isso para exibir um produto você deve passar seu índice dentro desse vetor.

Para saber os dados retornados no objeto, você pode utilizar o debug do twig, ele irá exibir na tela a estrutura retornada no objeto

{{ dump(product.image) }}
Array
  (
      [0] => Array
          (
              [small] => http://images.tcdn.com.br/img/small.jpg
              [medium] => http://images.tcdn.com.br/img/medium.jpg
              [large] => http://images.tcdn.com.br/img/large.jpg
              [full] => http://images.tcdn.com.br/img/full.jpg
          )

  )

Tray

Esse objeto retorna algumas configurações e integrações relacionadas a loja.

Atributos Descrição
tray.analytics Script de estatísticas de visitas do Google Analytics
tray.credits Retorna informações de creditos da Tray message, status, url
tray.meta Retorna informações de meta dados configuradas na plataforma
tray.scripts Retorna os scripts internos da plataforma.
tray.styles Retornas as folhas de estilos internas da plataforma.
tray.paths Retorna caminho dos cdns utilizados no tema js, css, shop_image, system_image, theme
  Array
  (
  [analytics] =>[SCRIPTS]
  [credits] => Array
      (
          [message] => Tecnologia TrayCommerce
          [status] => ATIVA
          [url] => [URL_REDIRECT]
      )
  [meta] => [META-TAGS]
  [scripts] =>[SCRIPTS]
  [styles] =>[STYLES]
  [paths] => Array
      (
          [js] => [PATH_URL]
          [css] => [PATH_URL]
          [shop_image] =>[PATH_URL]
          [system_image] =>[PATH_URL]
          [theme] =>[PATH_URL]
      )
  )

Store

Esse objeto retorna os dados da loja.

Atributos Descrição
store.id Identificador único da loja
store.name Nome da loja
store.status Retorna o status da loja na plataforma
store.url URL da loja
store.secure_url Retorna a url em ambiente seguro (https)
store.chat Retorna o conteúdo do campo “Atendimento Online” cadastrado no Painel Administrativo
store.current_url Retorna a url atual
  Array
  (
  [id] => [STORE_ID]
  [name] => [STORE_NAME]
  [logo] => [STORE_IMAGE]
  [status] => ativa
  [url] => [STORE_URL]
  [secure_url] => [STORE_URL_SECURE]
  [chat] => [CHAT]
  [current_url] =>[CURRENT_URL]
  )

Category

O Objeto category é responsável por retornar a categoria atual do tema, através dela é possível fazer validações relacionas a categoria dos produtos.

Disponível nas páginas: Catalog.

Para saber mais sobre como gerenciar categorias acesse: Wiki - Gerenciar categorias

Atributos Descrição
category.slug Endpoint onde é acessado a categoria
category.id Identificador único da categoria
category.name Nome da categoria
category.description Descrição da categoria
category.order Ordem de exibição segundo as configurações da loja
category.title Titulo da Categoria (SEO)
category.small_description Descrição detalhada da categoria
category.link URL da categoria
category.has_acceptance_term Possui o termo “Aceito”
category.acceptance_term Retorna as opções de Termo
category.brands As marcas vinculadas aos produtos dessa categoria (name, selected)
category.children Subcategorias
category.parent ID da categoria mãe
Array
(
    [slug] => [SLUG]
    [id] => 2
    [name] => [NAME]
    [description] => [DESCRIPTION]
    [order] => 1
    [title] => 
    [small_description] =>[DESCRICAO_DETALHADA]
    [link] => [LINK_CATEGORY]
    [has_acceptance_term] =>  
    [acceptance_term] => 
    [brands] => Array
        (
            [0] => Array
                (
                    [name] => [BRAND_NAME]
                    [selected] => 
                )

            [1] => Array
                (
                    [name] => [BRAND_NAME]
                    [selected] => 
                )

            [2] => Array
                (
                    [name] => [BRAND_NAME]
                    [selected] => 
                )

        )

    [children] => Array
        (
        )

    [parent] => 
)

Categories

O Objeto categories é responsável por retornar um array as categorias cadastradas no painel.

Disponível nas páginas: Todas.

Para saber mais sobre como gerenciar categorias acesse: Wiki - Gerenciar categorias

Atributos Descrição
categories[0].slug Endpoint onde é acessado a categoria
categories[0].id Identificador único da categoria
categories[0].parent_id Identificador único da categoria mãe
categories[0].name Nome da categoria
categories[0].description Descrição da categoria
categories[0].title Titulo da Categoria (SEO)
categories[0].small_description Descrição detalhada da categoria
categories[0].link URL da categoria
categories[0].has_product Retorna 1 caso tenha produtos
categories[0].images Imagem por categoria
categories[0].children Subcategorias
  [0] => Array
  (
  [slug] => [SLUG]
  [id] => [ID]
  [parent_id] => [PARENT_ID]
  [name] => [NAME]
  [description] => [DESCRIPTION]
  [title] => [TITLE]
  [small_description] =>  [SMALL_DESCRIPTION]
  [link] => [URL_CATEGORY]
  [has_product] => 1
  [images] => Array
      (
          [0] => [URL_IMAGE]
      )

  [children] => Array
  (
      [0] => Array
      (
          [slug] => [CHILDREN_SLUG]]
          [id] => [CHILDREN_ID]
          [parent_id] =>  [PARENT_ID]
          [name] =>[CHILDREN_NAME]
          [description] =>[CHILDREN_DESC]
          [title] => 
          [small_description] => 
          [link] => [CHILDREN_LINK]
          [has_product] => 1
          [images] => 
          [children] => 
      )
      )
  )
  <ul>
   {% for category in categories %}
    <li>
     <a href="{{ category.link }}">
       {{ category.name }}
      </a>
      {% if category.children %}
       <ul class="menu-children">
        {% if category.images %}
          <img src="{{ category.images[0] }}" 
          alt="{{ category.name }}">
       {% endif %}
      {% for child in category.children %}
       <li>
        <a href="{{ child.link }}">{{ child.name }}</a>
       </li>
       {% endfor %}
      </ul>
      {% endif %}
      </li>
      {% endfor %}
  </ul>

Banners

O objeto banners é responsável por trazer os banner cadastrados no painel e mostra-lo conforme as características necessárias.

Disponível nas páginas: Todas.

Para saber mais sobre como gerenciar banners acesse: Wiki - Cadastrar Banners | Wiki - Cadastrar Banners Banner JavaScript | Wiki - Banner por Categoria ou Marca

Para imprimir um banner,você poderá utilizar o helper de banner, onde exibem os banners em um bloco pre-moldado. Segue abaixo algumas chamadas:

Atributos Descrição
banner.home Exibido somente na página inicial do site. Antes dos produtos
banner.footer Exibido em todas as páginas, no rodapé.
banner.bottom Banner exibido na pagina na parte inferior
banner.side Exibido em todas as páginas, na lateral da loja
banner.title Exibido em todas as páginas antes do título
banner.floating Exibido na vitrine, apenas arquivos em FLASH
banner.popup Exibido na vitrine
banner.showcase Exibido somente na página inicial do site, ao lado do menu de categorias.
banner.extra1 Exibido em layouts personalizados
banner.extra2 Exibido em layouts personalizados
banner.extra3 Exibido em layouts personalizados
banner.extra4 Exibido em layouts personalizados

Se você deseja criar o banner do seu jeito, poderá utilizar as seguinte informações, lembrando que o padrão de chamada é sempre: banners.{position}.{key}.

Sintaxe: banners.{position}.{key}.

Atributos Descrição
banners.{position}.id Identificador único do banner
banners.{position}.type Tipo do banner, valores possíveis: “javascript”, “image”, “flash”, “gallery”
banners.{position}.description Descrição do banner
banners.{position}.src URL do banner
banners.{position}.link Link do banner
banners.{position}.width Largura da imagem ou do objeto flash
banners.{position}.height Altura da imagem ou do objeto flash
banners.{position}.alt Texto alternativo para a imagem do banner
banners.{position}.target Se o link vai abrir em uma nova janela ou na mesma
banners.{position}.banner_alt Banner alternativo caso não tenha suporte ao flash (apenas quando o tipo for “flash”), possui as chaves “src”, “link”, “target”
banners.{position}.margin_top Especifica a posição do banner referente ao topo da página (apenas banner “floating”)
banners.{position}.margin_left Especifica a posição do banner referente ao lado esquerdo da página
banners.extra1.interval* Intervalo da transição entre cada slide 3 a 10 (segundos)
banners.extra1.velocity* Velocidade da animação 0.5, 1.0, 1.5, 2.0
banners.extra1.animation* Tipo da animação blind, block, cube, cubeSpread, fade, fadeFour, glassCube, horizontal, tube
banners.extra1.stop_over* Pausar a troca de slides quando o mouse estiver sobre o banner 0, 1
banners.extra1.navigation* Tipos de navegação 0, 1, 2
banners.extra1.progressbar * Exibir barra de progresso 0, 1

* Disponível apenas e banners em js.

Array
(
[side] => Array
    (
      [id] => 18
      [type] => javascript
      [enable_navigation_keys] => 
      [interval] => 5000
      [velocity] => 0.5
      [class] => box_skitter_large
      [numbers] => 1
      [animation] => fade
      [stop_over] => 1
      [btn_pause] => 0
      [navigation] => 1
      [progressbar] => 
      [dynamic_size] => 
      [slides] => Array
          (
              [0] => Array
                  (
                      [image] =>[URL_IMAGE]
                      [link] =>[LINK]
                      [label] => [LABEL]
                      [target] => _blank
                      [width] => 265
                      [height] => 370
                  )

              [1] => Array
                  (
                      [image] =>[URL_IMAGE]
                      [link] =>[LINK]
                      [label] => [LABEL]
                      [target] => _blank
                      [width] => 265
                      [height] => 370
                  )
          )

  )

[home] => Array
  (
      [id] => 4
      [type] => javascript
      [enable_navigation_keys] => 
      [interval] => 5000
      [velocity] => 0.5
      [class] => box_skitter_large
      [numbers] => 1
      [animation] => fade
      [stop_over] => 1
      [btn_pause] => 0
      [navigation] => 1
      [progressbar] => 
      [dynamic_size] => 
      [slides] => Array
          (
              [0] => Array
                  (
                      [image] =>[URL_IMAGE]
                      [link] =>[LINK]
                      [label] => [LABEL]
                      [target] => _blank
                      [width] => 265
                      [height] => 370
                  )

              [1] => Array
                  (
                      [image] =>[URL_IMAGE]
                      [link] =>[LINK]
                      [label] => [LABEL]
                      [target] => _blank
                      [width] => 265
                      [height] => 370
                  )
          )

  )

)

        {% if banners.home %}
           {{ banner.home }}
        {% endif %}
      
         {% if banners.extra1 %}
           {{ banner.extra1 }}
        {% endif %}

{% if banners.home %}
    <a href="{{ banners.home.link }}" 
       target="{{ banners.home.target }}">
      <img src="{{ banners.home.src }}" 
          width="{{ banners.home.width }}"
          alt="{{ banners.home.alt }}" >
    </a>
{% endif %}
            
{% for slide in banners.extra1.slides %}
    <a href="{{ slide.link }}" target="{{ slide.target }}">
        <img src="{{ slide.image }}" alt="{{ slide.label }}">
    </a>
{% endfor %}                

Tags

O Objeto tags retorna uma lista com as palavras mais buscadas na loja.

Atributos Descrição
tags[0].font_size Tamanho da fonte com base na quantidade de vezes que foi buscada
tags[0].url URL para a página de busca
tags[0].word Palavra buscada
  Array
  (
      [0] => Array
          (
              [word] => Palavra1
              [font_size] => 100
              [url] => /Palavra1
          )

      [1] => Array
          (
              [word] => Palavra2
              [font_size] => 220
              [url] => /Palavra2
          )

      [2] => Array
          (
              [word] => Palavra3
              [font_size] => 100
              [url] => /Palavra3
          )

      [3] => Palavra1
          (
              [word] => Palavra4
              [font_size] => 100
              [url] => /Palavra4
          )
  )
{% for tag in tags %}
<a href="{{ tag.url }}" style="font-size: {{ tag.font_size }}%">
   {{ tag.word }}
</a>
{% endfor %}

Filters

O Objeto filters retorna um array com filtros que da a possibilidade de montar filtros com caracteristicas e variações de produtos.

Disponível nas páginas: catalog, search, home

Para saber mais sobre como gerenciar os Filtros Inteligentes acesse: Wiki - Filtro Inteligente

Chaves principais Descrição
categories Lista de categorias
brands Lista de marcas
prices Lista de preços
variations Lista de variações
features Lista de características

Nessas chaves são retornadas informações secundarias no filtro.

Chaves secundárias Descrição
title Título do filtro (ex: Categorias, Filtrar por marca, Faixa de preços)
items Lista de itens
  [categories] => Array
  (
  [title] => Categorias
  [applied] => 
  [items] => Array
  (
      [0] => Array
      (
      [title] => EPSON
      [count] => 2
      [url] => /mvc/store/catalog/?categoria=8
      [type] => link
      [applied] => 0
      )

      [1] => Array
      (
      [title] => HP
      [count] => 18
      [url] => /mvc/store/catalog/?categoria=10
      [type] => link
      [applied] => 0
      )

  )

  )

  [brands] => Array
  (
  [title] => Filtrar por Marca
  [applied] => 
  [items] => Array
  (
      [0] => Array
      (
          [title] => EPSON
          [count] => 2
          [url] => /mvc/store/catalog/?categoria=2&loja=332719&marca=marca_epson
          [type] => checkbox
          [applied] => 0
          [name] => marca
          [value] => marca_epson
      )

      [1] => Array
      (
          [title] => HP
          [count] => 18
          [url] => /mvc/store/catalog/?categoria=2&loja=332719&marca=marca_hp
          [type] => checkbox
          [applied] => 0
          [name] => marca
          [value] => marca_hp
      )

  )

  )

  [prices] => Array
  (
  [title] => Faixa de Preços
  [applied] => 
  [items] => Array
  (
  [0] => Array
      (
          [title] => De R$ 22,99 a R$ 156,81
          [count] => 13
          [url] => /mvc/store/catalog/?categoria=2&loja=332719&range=22.99-156.81
          [type] => checkbox
          [applied] => 0
          [name] => range
          [value] => 22.99-156.81
          [from] => 22.99
          [to] => 156.81
      )

  [1] => Array
      (
          [title] => De R$ 156,82 a R$ 291,63
          [count] => 4
          [url] => /mvc/store/catalog/?categoria=2&loja=332719&range=156.82-291.63
          [type] => checkbox
          [applied] => 0
          [name] => range
          [value] => 156.82-291.63
          [from] => 156.82
          [to] => 291.63
      )

  [2] => Array
      (
          [title] => De R$ 561,28 a R$ 696,09
          [count] => 2
          [url] => /mvc/store/catalog/?categoria=2&loja=332719&range=561.28-696.09
          [type] => checkbox
          [applied] => 0
          [name] => range
          [value] => 561.28-696.09
          [from] => 561.28
          [to] => 696.09
      )

      )

      )

Pages

O Objeto pages, contém informações das páginas da loja, como por exemplo a página atual e as paginas personalizadas.

Disponível nas páginas: todas

Para saber mais sobre Paginas Personalizadas acesse: Wiki - Paginas Personalizadas

Atributos Característica
pages.current Em qual página o usuário está navegando, ex: home
pages.custom Páginas Personalizadas cadastradas no Painel Administrativo

A baixo temos uma lista com retornos possíveis do Objeto pages.current

Retorno de pages.current Descrição
home Página inicial da loja
search Página de busca
catalog Página de catálogo (categoria)
product Página de produto
checkout_cart Carrinho de compras
register Página de cadastro
login Página de login
checkout_payment Escolha de pagamento na finalização de compra
company Quem somos
map Mapa do site

Em paginas personalizadas é retornado o slug da pagina.

  Array
  (
  [current] => home
  [custom] => Array
      (
      [0] => Array
          (
          [id] => 2
          [url] => /como-comprar
          [slug] => como-comprar
          [conteudo] => Para comprar em nossa loja é muito fácil ...
          [info] => comprar
          [name] => Como comprar
          [default] => 
          [status] => 1
          )

      [1] => Array
          (
          [id] => 3
          [url] => /seguranca
          [slug] => seguranca
          [conteudo] => Com relação aos seus dados pessoais de endereçamento, pagamento e conteúdo do pedido, você pode estar certo de que não serão utilizados para outros fins que não o de processamento dos pedidos realizados, não sendo portanto divulgados em hipótese alguma.
          [info] => seguranca
          [name] => Seguranca
          [default] => 
          [status] => 1
          )

      [2] => Array
          (
          [id] => 4
          [url] => /envio
          [slug] => envio
          [conteudo] => Todos os produtos serão enviados de acordo com a forma escolhida pelo cliente, em até 2 dias úteis da confirmação do pagamento. O prazo para a entrega varia de acordo com a forma de envio escolhida e não é de nossa responsabilidade, ,já que a entrega fica a cargo dos Correios....
          [info] => envio
          [name] => Envio
          [default] => 
          [status] => 1
          )
      )
  )
  {% if pages.current == 'home' %}
      <h4>
      Você está na nossa página inicial, navegue na nossa loja!
      </h4>
  {% else %}
      <h5>
          <a href="#">
          Clique a aqui para voltar a home
          </a>
      </h5>
  {% endif %}
  <ul>
  {% for custom in pages.custom %}
    <li>
      <a href="{{ custom.url }}">
          {{ custom.name }}
      </a>
    </li>
  {% endfor %}
  </ul>

Paginate

O Objeto paginate retorna um helper de paginação de produtos.

Disponível nas páginas: catalog, search

Se quiser utilizar um snippet pronto, utilize a seguinte chamada:

Ao lado um exemplo de montagem da exibição da paginação personalizada.

Para mais informações, visite a documentação oficial do helper Paginator.

{{ paginate.counter('Encontramos {:count} produto(s) em {:pages} página(s)') }}
   
{% if paginate.params.pageCount > 1 %}
 {{ paginate.first('Primeira', {'class': 'page-first'}) }}

 {% if paginate.hasPrev %}
   {{ paginate.prev('Anterior', {'class': 'page-prev'}) }}
 {% endif %}

 {{ paginate.numbers({
     'modulus': 9,
     'separator': '|',
     'class': 'page-link',
     'currentClass': 'page-current'
 }) }}

 {% if paginate.hasNext %}
     {{ paginate.next('Próxima', {'class': 'page-next'}) }}
 {% endif %}

 {{ paginate.last('Última', {'class': 'page-last'}) }}
 {% endif %}
   {{ element('snippets/pagination') }}

Seals

A Tray possui integração com 2 selos: Loja Protegida e Ebit.

Esses selos só são retornados caso estejam configurados na loja.

Disponível nas páginas: todas

Atributos Descrição
seals.ebit Retorna o HTML do selo do Ebit
seals.hackersafe Retorna o HTML do selo Loja Protegida
   {{ seals.ebit }}	
   {{ seals.hackersafe }}	 

ProductFeatured

Esse objeto retorna os produtos em destaque na categoria atual. As informações retornadas são as mesmas da Products.

Disponível nas páginas: catalog

   <a href="{{ productFeatured.link }}" 
   title="{{ productFeatured.name }}">
       <img src="{{ productFeatured.images[0].large }}" 
       alt="{{ productFeatured.name }}">
   </a>

PaymentMethods

Esse objeto trás todas as informações de formas de pagamentos a vista e a prazo cadastradas no painel.

Disponível nas páginas: Todas

Para saber mais sobre como gerenciar os meios de pagamento acesse: Wiki - Configurar formas de Pagamento

Nesse Objeto são retornadas as seguintes informações:

Atributos Descrição
paymentMethods.order Formas de pagamento à vista
paymentMethods.credit Formas de pagamento à prazo
Atributos Secundárias Descrição
display_name Nome da forma de Pagamento
thumbnail.url Url da imagem ilustrativa

Ao lado, exemplos de aplicação do Objeto paymentMethods:

Array ( 
 [order] => Array ( 
   [boletoonline] => Array ( 
     [display_name] => Boleto - TrayCheckout
     [thumbnail] => Array (
       [url]=> http://image.tcdn.com.br/img.png 
     )
   )
   [cartaojcbtraycheckout] => Array ( 
     [display_name] => CartãoJCB - TrayCheckout
     [thumbnail] => Array ( 
      [url] => http://image.tcdn.com.br/img.png 
      )
    )
  )
  [credit] => Array ( 
    [cartaovisa] => Array( 
      [display_name] => Visa - TrayCheckout 
      [thumbnail] => Array (
       [url] =>http://image.tcdn.com.br/img.png 
       )
   )
   [cartaomastercard] => Array ( 
     [display_name] => MasterCard -TrayCheckout 
     [thumbnail] => Array (
      [url] => http://image.tcdn.com.br/img.png 
      )
   ) 
   )
)

   <h5> A Vista </h5>
   {% for payment in paymentMethods.order %}
       <img src="{{ payment.thumbnail.url }}" alt="{{ payment.display_name }}">
   {% endfor %}
   <h5> A Prazo </h5>
   {% for payment in paymentMethods.credit %}
       <img src="{{ payment.thumbnail.url }}" alt="{{ payment.display_name }}">
   {% endfor %}

Product

Esse objeto trás todas as informações do produto, juntamente com algumas caracteristicas e configurações de recursos relacionados a ele.

Disponível nas páginas: Product

Para saber mais sobre como gerenciar produtos acesse: Wiki - Gerenciar produtos

Nesse Objeto são retornadas as seguintes informações:

Atributos Descrição
product.ean Exibe o código de barras do produto
product.modified Retorna a data de motificação do produto
product.is_kit Retorna 1 caso o produto tenha kit
product.slug Retorna o slug do produto
product.id Identificador único do produto
product.name Nome do produto
product.description Exibe a descrição completa do produto
product.description_small Exibe um resumo do produto
product.price Valor do produto
product.cost_price Retorna o preço de custo do produto
product.start_promotion Exibe a data de ínicio da promoção do produto
product.end_promotion Exibe a data de término da promoção do produto
product.brand Exibe a marca do produto
product.brand_id Retorna o id da marca do produto
product.model Exibe o modelo do produto
product.weight Exibe o peso do produto em gramas
product.length Exibe o comprimento do produto em centímetros
product.width Exibe a largura do produto em centímetros
product.height Exibe a altura do produto em centímetros
product.stock Quantidade de produtos em estoque
product.category_id Identificador único da categoria principal do produto
product.category_name Retorna o nome da categoria principal do produto
product.available Retorna se o produto está disponível
product.availability Informação de disponibilidade do produto
product.reference Exibe o código de referência do produto
product.has_variation Retorna verdadeiro caso o produto contenha variações
product.has_acceptance_terms Retorna verdadeiro se o produto possuir termos de aceitação
product.has_buy_together Retorna 1 caso o produto possua “Compre Junto”
product.additional_button Retorna verdadeiro se deve-se exibir selo adicional
product.additional_message Exibe a mensagem adicional do produto
product.quantity_sold Exibe a quantidade produtos vendidos
product.image Retorna 1 caso o produto tenha imagem
product.payment_option Retorna uma string com as opções de pagamento configuradas
product.payment_option_details Retorna as informações das formas de pagamento display_name, plots, value, type, tax
product.related_categories Retorna o ID das categorias relacionadas ao produto
product.release_date Retorna a data de lançamento do produto
product.virtual_product Retorna verdadeiro se o produto for virtual
product.minimum_stock Retorna o estoque minimo do produto
product.included_items Itens inclusos na compra do produto
product.related_products Array dos produtos relacionados
product.free_shipping Retorna verdadeiro se possuir frete grátis
product.ipi Retorna o ipi do produto
product.acceptance_term  
product.warranty_days Retorna a quantidade de dias em garantia
product.availability_days  
product.cubic_weight Retorna o peso cubico do produto
product.video Exibe a url do vídeo inserido no produto
product.metatag retorna um array com as meta tags configuradas no produto
product.payment_option_html Retornas um bloco html com as opções de pagamentos
product.percentage_discount Retorna a porcentagem de desconto do produto.
product.payment Retorna opões de parcelamento do produto
product.compared_product Retorna verdadeiro se o produto estiver na comparação
product.price_w_coupon Retorna o preço caso esteja com Cupon de desconto aplicado.
product.images Retorna as imagens do produto
product.variants Retorna um array com todas as informações das variações,os indices retornados são: id, ean, product_id, price, stock, minimum_stock, reference, start_promotion, end_promotion, promotional_price, payment_option, illustrative_image, Sku, VariantImage, payment_option_details
product.properties Retorna as caracteristicas do produto
product.price_offer Valor do produto em promoção
product.featured Retorna verdadeiro se for destaque
product.new Retorna verdadeiro se for lançamento
product.minimum_price Retorna o preço minimo do produto.
product.ranking count rating Ranking (avaliação) do produto
product.link Link para a página do produto
product.show_price Retorna 1 caso as informações de preço devam ser exibidas
product.upon_request Retorna se o produto está sob consulta
product.has_other_prices Retorna se o produto possui outros preços.
product.additional_information Exibe a informação adicional (máximo de 256 caracteres)
product.minimum_variant_price Retorna o melhor valor entre as variações do produto
product.payment_detail Retorna os detalhes das formas de pagamento
Array
 (
     [ean] => 
     [modified] => 2017-08-10 08:40:57
     [is_kit] => 0
     [slug] =>categoria/produto-teste
     [id] => 8
     [name] => Produto Teste
     [title] => 
     [description] => 
     [description_small] => Descrição
     [price] => 60
     [cost_price] => 25.00
     [start_promotion] => 2017-01-01
     [end_promotion] => 2017-01-31
     [brand] => Marca
     [brand_id] => 4
     [model] => xpto
     [weight] => 2
     [length] => 1
     [width] => 10
     [height] => 15
     [stock] => 720
     [category_id] => 14
     [category_name] => Categoria
     [available] => 1
     [availability] => 
     [reference] => M15001
     [additional_button] => 0
     [has_variation] => 0
     [has_acceptance_terms] => 0
     [has_buy_together] => 1
     [additional_message] => lorem ipsum
     [warranty] => 
     [quantity_sold] => 0
     [image] => 0
     [payment_option] => R$ 58,20 à vista com desconto Boleto - TrayCheckout
     [payment_option_details] => Array
    (
       [0] => Array
       (
           [display_name] => Boleto
           [type] => bank_billet
           [plots] => 1
           [value] => 58.20
           [tax] => 0.00
       )

    )

     [related_categories] => Array
         (
             [0] => 4
             [1] => 6
         )

     [release_date] => 
     [shortcut] => produto-teste
     [virtual_product] => 
     [minimum_stock] => 0
     [promotion_id] => 4
     [included_items] => Informação Adicional 2
     [related_products] => Array
     [free_shipping] => 1
     [current_price] => 60.00
     [ipi] => 0
     [acceptance_term_option] => 2
     [acceptance_term] => 
     [warranty_days] => 0
     [availability_days] => 0
     [cubic_weight] => 32
     [video] => 
     [metatag] => Array
    (
       [0] => Array
       (
        [type] => description
        [content] => Informação Adicional Teste
       )

       [1] => Array
       (
        [type] => description
        [content] => 
       )

       [2] => Array
       (
        [type] => keywords
        [content] => 
       )

    )

     [payment_option_html] =>  R$  58,20 à  vista com  desconto Boleto - TrayCheckout
     [percentage_discount] => 0.000000
     [payment] =>  R$ 58,20 à  vista com  desconto Boleto - TrayCheckout
     [product_price] => 60.00
     [calculated_price] => 60.00
     [compared_product] => 
     [price_w_coupon] => 60.00
     [images] => Array
         (
         )

     [variants] => Array
         (
         )

     [properties] => Array
         (
         )

     [price_offer] => 0
     [featured] => 1
     [new] => 1
     [minimum_price] => 0.00
     [ranking] => Array
         (
             [count] => 0
             [rating] => 0
             [ratingText] => 
         )

     [link] => http://loja.commercesuite.com.br/categoria/produto-teste
     [show_price] => 1
     [upon_request] => 
     [has_other_prices] => 
     [iconsRight] =>
     [iconsBottom] =>
     [iconsTop] =>
     [bonus] => 
     [wishlist] =>
     [social_content] =>
     [bundle] => 
     [additional_information] =>
     [additional_information_custom] =>
     [minimum_variant_price] => 0
     [payment_detail] => 
 )

Products

O Objeto products está disponível de acordo com as regras de cada página:

  • Na “home” contém os produtos em destaque;
  • Na “catalog” contém os produtos de uma categoria específica de acordo com os filtros aplicados;
  • Na “search” contém os produtos de acordo com os critérios da busca e os filtros aplicados.

Disponível nas páginas: home, catalog, search

Para saber mais sobre como gerenciar produtos acesse: Wiki - Gerenciar produtos

As requisições de produtos sempre retornarão um array de dados onde cada chave está descrita abaixo:

Atributos Descrição
products.id Identificador único do produto
products.name Nome do produto
products.description_small Exibe um resumo do produto
products.price Valor do produto
products.start_promotion Exibe a data de ínicio da promoção do produto
products.end_promotion Exibe a data de término da promoção do produto
products.brand Exibe a marca do produto
products.model Exibe o modelo do produto
products.weight Exibe o peso do produto em gramas
products.length Exibe o comprimento do produto em centímetros
products.width Exibe a largura do produto em centímetros
products.height Exibe a altura do produto em centímetros
products.stock Quantidade de produtos em estoque
products.category_id Identificador único da categoria principal do produto
products.available Retorna se o produto está disponível
products.availability Informação de disponibilidade do produto
products.reference Exibe o código de referência do produto
products.additional_button Retorna verdadeiro se deve-se exibir selo adicional
products.has_variation Retorna verdadeiro caso o produto contenha variações
products.additional_message Exibe a mensagem adicional do produto
products.warranty Retorna a quantidade de dias em garantia
products.quantity_sold Exibe a quantidade produtos vendidos
products.images Retorna as imagens do produto
products.shortcut  
products.payment_option Retorna uma string com as opções de pagamento configuradas
products.related_categories Retorna o ID das categorias relacionadas ao produto
products.release_date Retorna a data de lançamento do produto
products.slug Retorna o slug do produto
products.free_shipping Retorna verdadeiro se possuir frete grátis
products.Category Catgeorias do produto id, name
products.image Retorna 1 caso o produto tenha imagem
products.payment Retorna opões de parcelamento do produto
products.payment_option_html Retornas um bloco html com as opções de pagamentos
products.product_price  
products.calculated_price  
products.variants Retorna um array com todas as informações das variações,os indices retornados são: id, ean, product_id, price, stock, minimum_stock, reference, start_promotion, end_promotion, promotional_price, payment_option, illustrative_image, Sku, VariantImage, payment_option_details
products.properties Retorna as caracteristicas do produto
products.price_offer Valor do produto em promoção
products.featured Retorna verdadeiro se for destaque
products.new Retorna verdadeiro se for lançamento
products.payment_option_details Retorna as informações das formas de pagamento display_name, plots, value, type, tax
products.minimum_price Retorna o preço minimo do produto.
products.ranking count rating Ranking (avaliação) do produto
products.link Link para a página do produto
products.show_price Retorna 1 caso as informações de preço devam ser exibidas
products.upon_request Retorna se o produto está sob consulta
products.has_other_prices Retorna se o produto possui outros preços.
products.bonus_html Retorna html com o recurso de pontos
 Array
(
 [0] => Array
  (
   [id] => 72
   [name] => Produto teste
   [description_small] => 
   [price] => 500.00
   [start_promotion] => 2017-01-01
   [end_promotion] => 2017-01-31
   [brand] => teste
   [model] => 
   [weight] => 
   [length] => 
   [width] => 
   [height] => 
   [stock] => 20
   [category_id] => 2
   [available] => 1
   [availability] => 
   [reference] => 
   [additional_button] => 1
   [has_variation] => 
   [additional_message] => 
   [warranty] => 
   [quantity_sold] => 
   [images] => Array
   (
   [0] => Array
   (
       [small] => https://images.tcdn.com.br/img/img_prod/30_.jpg
       [medium] => https://images.tcdn.com.br/img/img_prod/90_72_.jpg
       [large] => https://images.tcdn.com.br/img/img_prod/180_.jpg
       [full] => https://images.tcdn.com.br/img/img_prod/72_.jpg
   )
   )

   [shortcut] => teste-hoje
   [payment_option] => 72
   [related_categories] => 72
   [release_date] => 
   [slug] => mitica/teste-hoje
   [free_shipping] => 
   [Category] => Array
   (
       [id] => 2
       [name] => Mítica
   )

   [image] => 1
   [payment] => R$ 450,00 à  vista com  desconto Boleto - TrayCheckout
   [payment_option_html] => R$ 450,00 à  vista com  desconto Boleto - TrayCheckout
   [product_price] => 500.00
   [calculated_price] => 500.00
   [variants] => 
   [properties] => Array
       (
           [Pais] => Array
               (
                   [0] => Brasil
               )
       )
   [price_offer] => 0.00
   [featured] => 0
   [new] => 0
   [payment_option_details] => Array
   (
       [0] => Array
           (
               [display_name] => Boleto 
               [plots] => 1
               [value] => 450.00
           )

   )

   [minimum_price] => 0.00
   [ranking] => Array
   (
       [count] => 0
       [rating] => 0
       [ratingText] => 
   )

   [link] => http://loja.commercesuite.com.br/categoria/produto-teste
   [show_price] => 1
   [upon_request] => 
   [has_other_prices] => 
   [bonus_html] => 
   )
)

O que são métodos

Os métodos do opencode são conjuntos de comandos já prontos que realizam determinado procedimento. Esses métodos têm como objetivo facilitar e estruturar o desenvolvimento.

A utilização de métodos possibilita consultar informações de Produtos, Marcas e Categorias, onde também disponibiliza utilidades como referenciar o caminho absoluto do tema além de exibir imagens e textos cadastrados no painel administrativo da Tray.

Manipulando métodos

Podemos manipular os métodos de diversas maneiras, como exibir seus atributos na tela, utilizar laços de repetição e fazer validações, tudo isso de acordo com a necessidade.

Alguns métodos como por exemplo Product(), Brands() e Categories() sempre retornarão um array (vetor) de dados, por isso para exibir determinada informação você deve passar seu índice dentro desse vetor ou utilizar um laço de repetição para exibir as informações. Já os métodos como Assets(), Image() e a Translation(), retornam apenas informações pontuais.

Desta forma, para exibir uma posição do vetor de products retornadas pelo método é necessario passar o indice do item no Array retornado, como ao lado.

Podemos também exibir todos os produtos ou todas as categorias utilizando uma estrutura de repetição (laço for)

Além disso podemos utilizar por exemplo o método Image() para exibir um botão adicional cadastrado no painel.

{% set products = Products() %}
{{ products[0].id}}
{{ Image('additional_button') }}

Asset

O método asset() é utilizado para referenciar o caminho absoluto do tema, com ele é possível incluir arquivos ao tema como css,javascript e imagens.

Exemplos ao lado:

   <img src="{{ asset('img/my-image.png') }}" alt="">
   <script src="{{ asset('js/style.js') }}"></script>
   <link rel="stylesheet" href="{{ asset('css/style.css') }}">

Brands

O Método Brands() retorna as marcas cadastradas no Painel Administrativo da loja.

Disponível nas páginas: todas

Para saber mais sobre como gerenciar marcas acesse: Wiki - Gerenciar Marcas

As requisições de marcas sempre retornarão um array de dados onde cada chave está descrita abaixo:

Atributos Descrição
brands[0].id Identificador único da marca
brands[0].name Nome da marca
brands[0].slug Final da url da marca

Veja alguns exemplos de uso ao lado:

 {# todas as marcas #}
 <ul>
   {% set brands = Brands() %}
   {% for brand in brands %}
     <li>{{ brand.name }}</li>
   {% endfor %}
 </ul>
 
 {# busca a marca Tray #}
 <ul>
   {% set brandTray = Brands( { "brand": "Tray" } ) %}
   {% for brand in brandTray %}
     <li>{{ brand.name }}</li>
   {% endfor %}
 </ul>

 {# busca o id 10 #}
 <ul>
   {% set brands = Brands( { "id": "10" } ) %}
   {% for brand in brands %}
     <li>{{ brand.id }}</li>
   {% endfor %}
 </ul>
  
   {# todas as marcas ordenadas por ID decrescente #}
   <ul>
    {% set brands = Brands({ "order": { "id": "desc" }}) %}
    {% for brand in brands %}
     <li>
      <span>{{ brand.id }}</span>
      <span>{{ brand.name }}</span>
     </li>
    {% endfor %}
   </ul>
   

Categories

O método Categories() retorna as categorias cadastradas no Painel Administrativo da loja.

Disponível nas páginas: todas

Para saber mais sobre como gerenciar categorias acesse: Wiki - Gerenciar Categorias

As requisições de categorias sempre retornarão um array de dados, veja o padrão de retorno em: Categories

Veja alguns exemplos de uso ao lado:

{# todas as categorias #}
<ul>
 {% set categories = Categories() %}
 {% for categorie in categories %}
  <li>{{ categorie.name }}</li>
 {% endfor %}
</ul>
{# busca o id 2 #}
{% set categoryTray = Categories( { "id": 2 } ) %}
<span>{{ categoryTray.name }}</span>
{# todas as categorias ordenadas por nome ascendente #}
{% set myCategories = Categories({ 
    "order": { "name": "asc" }}) %}
<ul>
 {% for category in myCategories %}
  <li>{{ category.name }}</li>
 {% endfor %}
</ul>      

Image

O Método Image() retorna uma imagem cadastrada no Painel Administrativo.

Disponível nas páginas: todas

Para saber mais sobre como gerenciar imagnes acesse: Wiki - Imagens/Botões

As requisições de marcas sempre retornarão um array de dados onde cada chave está descrita abaixo:

Keys Descrição
additional_button Botão Adicional
unavailable_button Botão Indisponível
buy_together_button Botão Compre Junto
calculate_shipping_value Botão Calcular Frete
buy Botão Comprar
back_to_shopping Botão Continuar Comprando
discount_code Botão Cupom de Desconto
sign_up Botão Efetuar Login
featured Imagem de Destaque
send Imagem Enviar
select Selecionado
free_shipping Imagem Frete Grátis
new Imagem Novo
sign_in Botão Logar
logo Imagem de Logo
next_step_sign_up Botão Prosseguir Cadastro já Efetuado
next_step_purchase Botão Próxima Etapa
simulate_shipping Simular Frete
upon_request Sob Consulta
{{ Image('key') }}	
 {{ Image('additional_button') }}	

Products

O Método Products() retorna os produtos cadastrados na loja.

Disponível nas páginas: todas

Para saber mais sobre como gerenciar produtos acesse Wiki - Produtos

As requisições de produtos sempre retornarão um array de dados, veja o padrão de retorno em: Products

É possivel aplicar filtros a esse método para que ela retorne apenas os produtos desejados. Segue a baixo a relação de filtros disponiveis:

Filtro Parametro
filter O filtro filter pode receber os seguintes parametros: featured, new, free_shipping, available, promotion
limit Recebe um valor da qual será a quantidade maxima de produtos.
order O filtro order é usado para ordernar a lista de produtos, pode receber os seguintes parametros: id, name, price, price_offer, stock, rand
categories O filtro categories Recebe o id das categorias da qual deseja filtrar os produtos.
brands O filtro brands Recebe o nome da marca da qual deseja filtrar os produtos.

Veja alguns exemplos de uso ao lado:

 {# Trás todos os produtos #}
 {% set products = Products() %}

 
 {#  Trás 8 produtos em destaque ordenados pelos mais vendidos que estejam cadastrados nas categorias 1 e 2 e tenham como marca "Tray" #}
  {% set products = Products({
      'filter': 'featured',
      'limit': 8,
      'order': {'quantity_sold': 'desc'},
       'categories': [2, 3],
      'brands': 'Tray'
  }) %}
  
   {% set products = Products({
       'order': {
           'quantity_sold': 'desc',
           'name': 'asc',
           'id': 'desc'
       }
   }) %}
   

Translation

O método Translation() exibe um texto de acordo com o idioma configurado na sua loja no Painel Administrativo.

Disponível nas páginas: todas

Para saber mais sobre como gerenciar textos acesse:Wiki - Gerenciamento de Textos

{{ Translation('key') }}

Consultar Produtos

Através da API de Produtos é possível consultar e listar os produtos contidos na loja virtual.

Endereço para Integração
URL de Acesso https://{URL_LOJA}/web_api/products
Protocolo Rest/HTTP

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

Exemplo ao lado de como consultar informações do produto:

Na consulta do produto, a API retorna a resposta em JSON.

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

JSON de Resposta
Product Dados do Produto
Product.ean EAN do Produto
Product.id Código do Produto
Product.name Nome do Produto
Product.price Preço do Produto
Product.promotional_price Preço Promocional do Produto
Product.start_promotion Data Inicial da Promoção do Produto
Product.end_promotion Data Final da Promoção do Produto
Product.brand Marca do Produto
Product.model Modelo do Produto
Product.category_id Código da Categoria do Produto
Product.available Disponibilidade do Produto
Product.hot Produto em Destaque
Product.release Liberação do Produto
Product.additional_button Botão Adicional do Produto
Product.has_variation Confirmação de Produto com Variação
Product.url Objeto com as URLs do Produto
Product.url.http URL Simples do Produto
Product.url.https URL Segura do Produto
Product.payment_option Informações de Pagamento
Product.payment_option_details[] Informações de Pagamento
Product.payment_option_details[].display_name Nome da Forma de Pagamento
Product.payment_option_details[].plots Quantidade de parcelas
Product.payment_option_details[].value Valor da parcela
Product.related_categories Categorias Relacionadas do Produto
Product.release_date Data da Liberação do Produto
Product.virtual_product Produto Virtual
Product.ProductImage[] Imagens do Produto
Product.ProductImage[].http URL Simples da Imagem do Produto
Product.ProductImage[].https URL Segura da Imagem do Produto
Product.ProductImage[].thumbs Miniatura da Imagem do Produto
Product.ProductImage[].thumbs.30 Miniatura de Tamanho 30px
Product.ProductImage[].thumbs.30.http URL Simples da Miniatura de 30px
Product.ProductImage[].thumbs.30.https URL Segura da Miniatura de 30px
Product.ProductImage[].thumbs.90 Miniatura de Tamanho 90px
Product.ProductImage[].thumbs.90.http URL Simples da Miniatura de 90px
Product.ProductImage[].thumbs.90.https URL Segura da Miniatura de 90px
Product.ProductImage[].thumbs.180 Miniatura de Tamanho 180px
Product.ProductImage[].thumbs.180.http URL Simples da Miniatura de 180px
Product.ProductImage[].thumbs.180.https URL Segura da Miniatura de 180px
 <script type="text/javascript"> 

 let producId = 88;
 fetch(`/web_api/products/${producId}`)
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>

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 (,).

Disponivel em todas APIs Publicas

Exemplo
URL de Acesso https://{URL_LOJA}/web_api/products?attrs=Product.ean,Product.price

Terá como resposta o conteúdo ao lado:

<script type="text/javascript"> 
       fetch(`/web_api/products/?attrs=Product.name`)
       .then(response => response.json())
       .then(result => {
           console.log(result);
       })
       .catch(err => {
           console.error('Falha', err);
       });
   </script>
   "Products": [
      {
        "Product": {
          "ean": "",
          "id": "110",
          "price": "3000.00"
        }
      },
   

Listagem de Produtos

Para a listagem de produtos, deverá ser realizada uma requisição via GET.

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

Dados de Entrada Obrig. Descrição
id Não Código do Produto
name Não Nome do Produto
category_id Não Categoria do Produto
ean Não EAN do Produto
price Não Preço do Produto
brand Não Marca do Produto
available Não Dsiponibilidade do Produto
attrs Não Atributos do Produto
created Não Data de Criação do Produto
modified Não Data de Modificação do Produto
stock Não Estoque do Produto
promotion Não Produto Promocional
free_shipping Não Produto com Frete Grátis
release Não Produto em Lançamento
hot Não Produto em Destaque
quantity_sold Não Quantidade Vendida do Produto
rand Não Retornar Produtos Randômicos
sort Não Ordenação da Consulta
limit Não Quantidade Limite de Registros
page Não Página da Consulta

Na listagem 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
Products[] Lista de Produtos
Products[].Product Dados do Produto
Products[].Product.ean EAN do Produto
Products[].Product.id Código do Produto
Products[].Product.name Nome do Produto
Products[].Product.price Preço do Produto
Products[].Product.promotional_price Preço Promocional do Produto
Products[].Product.start_promotion Data Inicial da Promoção do Produto
Products[].Product.end_promotion Data Final da Promoção do Produto
Products[].Product.brand Marca do Produto
Products[].Product.model Modelo do Produto
Products[].Product.category_id Código da Categoria do Produto
Products[].Product.available Produto Disponível
Products[].Product.availability Disponibilidade do Produto
Products[].Product.hot Produto em Destaque
Products[].Product.release Liberação do Produto
Products[].Product.additional_button Botão Adicional do Produto
Products[].Product.has_variation Confirmação de Produto com Variação
Products[].Product.url Objeto com as URLs do Produto
Products[].Product.url.http URL Simples do Produto
Products[].Product.url.https URL Segura do Produto
Products[].Product.payment_option Informações de Pagamento
Products[].Product.related_categories Categorias Relacionadas do Produto
Products[].Product.release_date Data da Liberação do Produto
Products[].Product.virtual_product Produto Virtual
Products[].Product.ProductImage[] Imagens do Produto
Products[].Product.ProductImage[].http URL Simples da Imagem do Produto
Products[].Product.ProductImage[].https URL Segura da Imagem do Produto
Products[].Product.ProductImage[].thumbs Miniatura da Imagem do Produto
Products[].Product.ProductImage[].thumbs.30 Miniatura de Tamanho 30px
Products[].Product.ProductImage[].thumbs.30.http URL Simples da Miniatura de 30px
Products[].Product.ProductImage[].thumbs.30.https URL Segura da Miniatura de 30px
Products[].Product.ProductImage[].thumbs.90 Miniatura de Tamanho 90px
Products[].Product.ProductImage[].thumbs.90.http URL Simples da Miniatura de 90px
Products[].Product.ProductImage[].thumbs.90.https URL Segura da Miniatura de 90px
Products[].Product.ProductImage[].thumbs.180 Miniatura de Tamanho 180px
Products[].Product.ProductImage[].thumbs.180.http URL Simples da Miniatura de 180px
Products[].Product.ProductImage[].thumbs.180.https URL Segura da Miniatura de 180px
Products[].Product.Variant[] Variações do Produto
   <script type="text/javascript"> 
       fetch(`/web_api/products/?category_id=1&limit=20` )
         .then(response => response.json())
         .then(result => {
           console.log(result);
         })
         .catch(err => {
         console.error('Falha', err);
       });
   </script>

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 Variação do Produt

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.

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

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
 <script type="text/javascript"> 

 let variantId = 88;
 fetch(`/web_api/variants/${variantId}`)
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>

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

JSON de Resposta

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
 <script type="text/javascript"> 

 let variantId = 88;
 fetch(`/web_api/variants/${variantId}`)
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>

Categorias

Através da API de Categorias é possível consultar as categorias contidas na loja virtual.

Endereço para Integração
URL de Acesso https://{URL_LOJA}/web_api/categories/tree/
Protocolo Rest/HTTP

Lista de Categorias

Para a lista de categorias, deverá ser realizada uma requisição via GET.

Podem ser enviados na URL o código da categoria desejada, onde será retornada somente a categoria desejada e as respectivas subcategorias:

JSON de Resposta

Category[] Lista de Categorias
Category[].Category Dados da Categoria
Category[].Category.slug Caminho absoluto da Categoria
Category[].Category.id Código da Categoria
Category[].Category.parent_id Código da Categoria Pai
Category[].Category.name Nome da Categoria
Category[].Category.description Descrição da Categoria (meta title)
Category[].Category.title Título da categoria (meta title)
Category[].Category.link Objeto com as URLs da Categoria
Category[].Category.link.http URL Simples da Categoria
Category[].Category.link.https URL Segura da Categoria
Category[].Category.images[] Imagens da Categoria
Category[].Category.images[].http URL Simples da Imagem da Categoria
Category[].Category.images[].https URL Segura da Imagem da Categoria
Category[].Category.children[] Lista de Subcategorias
Category[].Category.children[].Category Dados da Subcategoria
 <script type="text/javascript"> 

 let variantId = 88;
 fetch(`/web_api/variants/${variantId}`)
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>
   
{
   "Category": [
   {
    "Category": {
    "slug": "categoria-1",
    "id": "1",
    "parent_id": "",
    "name": "Categoria 1",
    "description": "categoria-1",
    "title": "",
    "link": {
     "http": "http://sualojavirtual/categoria-1",
     "https": "https://sualojavirtual/categoria-1"
     },
     "images": [
     {
       "http": "http://images1/123/img_1.png",
       "https": "https://images2/123/_1.png"
     }
     ],
     "children": [
     {
       "Category": {
       "slug": "categoria-1/subcategoria",
       "id": "3",
       "parent_id": "1",
       "name": "Subcategoria",
       "description": "Subcategoria",
       "title": "",
       "link": {
        "http": "http://sualojavirtual/categoria-1/subcategoria",
        "https": "https://sualojavirtual/categoria-1/subcategoria"
       },
       "images": [],
       "children": null
      }
    }]
   }]
  }

Busca de Produtos

Para a busca de produtos, deverá ser realizada uma requisição via GET.

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

Dados de Entrada Obrig. Descrição
query Não Texto de Busca
promotion Não Produto Promocional
id Não Códigos do Produto (Valores separados por “,”. Exemplo: 15,123,54)
category_id Não Categoria do Produto
price Não Faixa de Valor do Produto (Valores separados por “,”. Exemplo: 10.25,123.54)
rand Não Retornar Produtos Randômicos
sort Não Ordenação da Busca
limit Não Quantidade Limite de Registros
page Não Página da Busca

Na busca de produtos, a API retorna a resposta em JSON.

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

JSON de Resposta

paging Dados de Paginação
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
Products[] Lista de Produtos
Products[].Product Dados do Produto
Products[].Product.id Código do Produto
Products[].Product.name Nome do Produto
Products[].Product.available Produto Disponível
Products[].Product.price Preço do Produto
Products[].Product.shortcut Atalho do Produto
Products[].Product.category_id Código da Categoria do Produto
Products[].Product.description_small Descrição do Produto
Products[].Product.promotional_price Preço Promocional do Produto
Products[].Product.start_promotion Data Inicial da Promoção do Produto
Products[].Product.end_promotion Data Final da Promoção do Produto
Products[].Product.brand Marca do Produto
Products[].Product.model Modelo do Produto
Products[].Product.availability Disponibilidade do Produto
Products[].Product.hot Produto em Destaque
Products[].Product.release Liberação do Produto
Products[].Product.additional_button Botão Adicional do Produto
Products[].Product.has_variation Confirmação de Produto com Variação
Products[].Product.rating Classificação do Produto
Products[].Product.count_rating Contador de Classificação do Produto
Products[].Product.url Objeto com as URLs do Produto
Products[].Product.url.http URL Simples do Produto
Products[].Product.url.https URL Segura do Produto
Products[].Product.payment_option Informações de Pagamento
Products[].Product.ProductImage[] Imagens do Produto
Products[].Product.ProductImage[].http URL Simples da Imagem do Produto
Products[].Product.ProductImage[].https URL Segura da Imagem do Produto
Products[].Product.ProductImage[].thumbs Miniatura da Imagem do Produto
Products[].Product.ProductImage[].thumbs.30 Miniatura de Tamanho 30px
Products[].Product.ProductImage[].thumbs.30.http URL Simples da Miniatura de 30px
Products[].Product.ProductImage[].thumbs.30.https URL Segura da Miniatura de 30px
Products[].Product.ProductImage[].thumbs.90 Miniatura de Tamanho 90px
Products[].Product.ProductImage[].thumbs.90.http URL Simples da Miniatura de 90px
Products[].Product.ProductImage[].thumbs.90.https URL Segura da Miniatura de 90px
Products[].Product.ProductImage[].thumbs.180 Miniatura de Tamanho 180px
Products[].Product.ProductImage[].thumbs.180.http URL Simples da Miniatura de 180px
Products[].Product.ProductImage[].thumbs.180.https URL Segura da Miniatura de 180px
Products[].Product.Properties[] Propriedades do Produto
Products[].Product.Category Dados da Categoria do Produto
Products[].Product.Category.id Código da Categoria do Produto
Products[].Product.Category.name Nome da Categoria do Produto
Products[].Product.Category.description Descrição da Categoria do Produto
<script type="text/javascript"> 
fetch(`/web_api/search/?query="Produto"&price="10.00,50.00"` )
   .then(response => response.json())
   .then(result => {
   console.log(result);
   })
   .catch(err => {
   console.error('Falha', err);
});
</script>

Carrinho de Compra

Através da API de Carrinho de compra é possível incluir produtos e resgatar informações do carrinho de compra, retornando a URL deste carrinho para exibição ao cliente.

Endereço para Integração
URL de Acesso https://{sualojavirtual}.commercesuite.com.br/web_api/cart
Protocolo Rest/HTTP

Sessão do Usuário

Na API de Carrinho de Compra também será necessário resgatar a informação da sessão do usuário no carrinho. Esta informação poderá ser capturada através de um código javascript.

Apesar da sessão do usuário já existir no dataLayer, algumas páginas possuem cache e poderão trazer as informações de forma incorreta. Para evitar este problema, caso seja necessário, disponibilizamos a sessão também no código fonte das páginas do sistema para que possa ser recuperado.

   <script type="text/javascript">  
       let dataSession = document.querySelector('html').getAttribute('data-session');
   </script>

Consultar Carrinho de Compra

Para retornar as informações do Carrinho de Compra, basta realizar uma requisição via GET, enviando na URL o código da sessão do carrinho.

Para a integração com esta API, deverá ser realizada uma requisição via GET, concatenando o código da sessão do usuário no final da URL.

A consulta de informações do carrinho de compra retorna uma resposta em JSON.

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

JSON de Resposta

Cart Nó principal da resposta
Cart.session_id Código da Sessão do Carrinho
Cart.product_id Código do Produto
Cart.product_name Nome do Produto
Cart.quantity Quantidade
Cart.price Preço do Produto
Cart.weight Peso do Produto
Cart.date Data
Cart.variant_id Código da Variação
Cart.user_id ID do usuário
Cart.user_cod Código do Usuário
Cart.hour Hora
Cart.product_url Objeto com as URLs do Produto
Cart.product_url.http URL Simples do Produto
Cart.product_url.https URL Segura do Produto
Cart.product_image Objeto com as imagens do Produto
Cart.product_image.http URL Simples da Imagem do produto
Cart.product_image.https URL Segura da Imagem do produto
Cart.product_image.thumbs Miniatura da Imagem do Produto
Cart.product_image.thumbs.30 Miniatura de Tamanho 30px
Cart.product_image.thumbs.30.http URL Simples da Miniatura de 30px
Cart.product_image.thumbs.30.https URL Segura da Miniatura de 30px
Cart.product_image.thumbs.90 Miniatura de Tamanho 90px
Cart.product_image.thumbs.90.http URL Simples da Miniatura de 90px
Cart.product_image.thumbs.90.https URL Segura da Miniatura de 90px
Cart.product_image.thumbs.180 Miniatura de Tamanho 180px
Cart.product_image.thumbs.180.http URL Simples da Miniatura de 180px
Cart.product_image.thumbs.180.https URL Segura da Miniatura de 180px
Cart.email Email do Usuário
Cart.additional_information Informações Adicionais
 <script type="text/javascript"> 

 let dataSession = document.querySelector('html').getAttribute('data-session');

 fetch(`/web_api/cart/${dataSession}`)
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>

Incluir Produto no Carrinho

Para incluir produtos no carrinho de compra, basta realizar uma requisição via POST, enviando os parâmetros com informações do produto.

A requisição para a integração será via POST, onde segue abaixo o dado necessário para envio:

Dados de Entrada Obrig. Formato / Tam. Max Descrição
Cart Sim Objeto Nó principal da resposta
Cart.session_id Sim Texto / 32 Código da Sessão
Cart.product_id Sim Número Código do Produto
Cart.quantity Sim Número Quantidade
Cart.variant_id Não Número Código da Variação

Ao incluir produtos do carrinho de compra, é retorna uma resposta em JSON.

JSON de Resposta

message Mensagem de Retorno
id Código do Carrinho
session_id Código da Sessão do Carrinho
cart_url URL do Carrinho
code HTTP Code de Resposta
 <script type="text/javascript"> 
   let dataSession = document.querySelector('html').getAttribute('data-session');
   let dados = `{"Cart":{"session_id":"${dataSession}","product_id":"6","quantity":"1","variant_id":"0"}}`

   fetch('/web_api/cart/', {
       method: 'POST',
       headers: new Headers({'Content-Type':'application/json'}),
       body: dados
   }).then(response => response.json()
       .then(resp => console.log(resp))
       .catch(err => console.error('Falha', err))
   )
 </script>

Excluir Produto do Carrinho

Para excluir um produto especifico no carrinho de compra, basta realizar uma requisição utilizando o método DELETE, passando na url o session_id e o product_id do produto.

Esta requisição exclui um produto inteiro do carrinho. Caso ele tenha uma ou mais variações, todas são excluídas do carrinho.

Endereço para Integração
URL de Acesso https://{sualojavirtual}.commercesuite.com.br/web_api/carts/{session_id}/{product_id}
Protocolo Rest/HTTP

Ao excluir produtos do carrinho de compra, é retorna uma resposta em JSON.

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

JSON de Resposta

message Mensagem de Retorno
id Código do Carrinho
session_id Código da Sessão do Carrinho
cart_url URL do Carrinho
code HTTP Code de Res
 <script type="text/javascript"> 

 let dataSession = document.querySelector('html').getAttribute('data-session');
 let productID = 6


 fetch(`/web_api/carts/${dataSession}/${productID}`
   {
       method: "DELETE",
   })
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>

Excluir Sessão do Carrinho de Compra

Para excluir a sessão de um carrinho de compra, basta realizar uma requisição utilizando o método DELETE, passando na url o session_id.

Esta requisição exclui todos os produtos e variações do carrinho. Inclusive o carrinho é excluído, ele torna-se indisponível após a operação.

Endereço para Integração
URL de Acesso https://{sualojavirtual}.commercesuite.com.br/web_api/carts/{session_id}
Protocolo Rest/HTTP

Ao excluir o carrinho de compra, é retorna uma resposta em JSON.

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

JSON de Resposta

message Mensagem de Retorno
id Código do Carrinho
session_id Código da Sessão do Carrinho
cart_url URL do Carrinho
code HTTP Code de Res
 <script type="text/javascript"> 

 let dataSession = document.querySelector('html').getAttribute('data-session');

 fetch(`/web_api/carts/${dataSession}`
   {
       method: "DELETE",
   })
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>

Excluir Variação de um Produto no Carrinho

Para excluir uma variação especifica do produto no carrinho de compra, basta realizar uma requisição utilizando o método DELETE, passando na url o session_id e o product_id e o variant_id do produto.

Esta requisição exclui uma variação específica do carrinho.

Endereço para Integração
URL de Acesso https://{sualojavirtual}.commercesuite.com.br/web_api/carts/{session_id}/{product_id}/{variant_id}
Protocolo Rest/HTTP

Ao excluir uma variação do carrinho de compra, é retorna uma resposta em JSON.

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

JSON de Resposta

message Mensagem de Retorno
id Código do Carrinho
session_id Código da Sessão do Carrinho
cart_url URL do Carrinho
code HTTP Code de Resposta
 <script type="text/javascript"> 

 let dataSession = document.querySelector('html').getAttribute('data-session');
 let productID = 6;
 let variantID = 2


 fetch(`/web_api/carts/${dataSession}/${productID}/${variantID}`
   {
       method: "DELETE",
   })
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>

Excluir Carrinho de Compra

Para excluir o carrinho de compra, basta realizar uma requisição utilizando o método DELETE.

Esta requisição exclui o carrinho com id passado por parâmetro. A exclusão só será feita caso o id tenha a sessão também passada.

Endereço para Integração
URL de Acesso https://{sualojavirtual}.commercesuite.com.br/web_ap/carts/{session_id}/id/{id}
Protocolo Rest/HTTP

Ao excluir o carrinho de compra, é retorna uma resposta em JSON.

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

JSON de Resposta

message Mensagem de Retorno
id Código do Carrinho
session_id Código da Sessão do Carrinho
cart_url URL do Carrinho
code HTTP Code de Res
 <script type="text/javascript"> 

 let dataSession = $("html").attr("data-session");
 let cartID = 615440;

 fetch(`/web_api/carts/${dataSession}/id/${cartID}`
   {
       method: "DELETE",
   })
   .then(response => response.json())
   .then(result => {
     console.log(result.Product);
   })
   .catch(err => {
     console.error('Falha', err);
   });
 </script>