Tray Themes

https://partners.tray.com.br/themes
Admin
Tray Themes is a documentation platform for partners to develop responsive, fast, and accessible...
Tokens:113,945
Snippets:363
Trust Score:9.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Accessing Short Product Description

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example illustrates how to get a brief description of a product. This is useful for summary views or product listings.

```html
{{ products[0].description_small }}
```

--------------------------------

### Accessing Product Payment Options

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to retrieve information about the installment payment options available for a product.

```html
{{ products[0].payment }}
```

--------------------------------

### Displaying Promotion Start Date

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This snippet demonstrates how to display the start date of a product's promotion. Useful for highlighting special offers.

```html
{{ products[0].start_promotion }}
```

--------------------------------

### Consultar Informações do Produto via GET

Source: https://partners.tray.com.br/themes/construindo-seu-template/apis-disponiveis/produtos

Exemplo de como realizar uma requisição GET para a API para obter informações de um produto específico. Utiliza jQuery AJAX para a chamada e manipula a resposta em caso de sucesso ou falha.

```JavaScript
var productId =  "84";
    
    $.ajax({
        method: "GET",
        url: "/web_api/products/"+productId
    }).done(function( response, textStatus, jqXHR ) {
        console.log(response);
    }).fail(function( jqXHR, status, errorThrown ){
        var response = $.parseJSON( jqXHR.responseText );
        console.log(response);
    });
```

--------------------------------

### Displaying Product Availability Timeframe

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to display the configured availability timeframe for a product.

```html
{{ products[0].availability }}
```

--------------------------------

### Displaying Product Model

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to display the model name or number of a product.

```html
{{ products[0].model}}
```

--------------------------------

### Retrieve Available Products with Limit and Order

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/funcoes/products

This example retrieves up to 4 available products, ordered by the best-selling items.

```Twig
{% set products = Products({
   'filter': 'available',
   'limit': 4,
   'order': {'quantity_sold': 'desc'}
}) %}
```

--------------------------------

### Displaying Quantity Sold

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to display the total quantity of a product that has been sold.

```html
{{ products[0].quantity_sold }}
```

--------------------------------

### Displaying Product Warranty Information

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to display the selected warranty period for a product.

```html
{{ products[0].warranty }}
```

--------------------------------

### Get Payment Method Display Model

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Retrieves the active configuration for displaying payment methods on the product page. Returns 1 for 'Open List' and 2 for 'Icons'.

```Liquid
{{ settings.payment_method_option }}
```

--------------------------------

### Get Banner ID

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/banner

This code snippet retrieves the unique identifier for a banner. It uses the pattern 'banners.{position}.id', with 'home' as an example position.

```html
{{ banners.home.id }}
```

--------------------------------

### Baixar arquivos de tema com Tray CLI

Source: https://partners.tray.com.br/themes/comece-por-aqui/meu-primeiro-tema

Comando para baixar todos os arquivos de um tema da plataforma para o ambiente de desenvolvimento local.

```bash
tray download
```

--------------------------------

### Twig For Loop Example

Source: https://partners.tray.com.br/themes/construindo-seu-template/twig/possibilidades-de-uso

Provides an example of iterating over a list of users using a `for` loop in Twig to display their usernames.

```Twig
<ul>
    {% for user in users %}
        <li>{{ user.username }}</li>
    {% endfor %}
</ul>
```

--------------------------------

### Estrutura de Resposta JSON para Informações do Produto

Source: https://partners.tray.com.br/themes/construindo-seu-template/apis-disponiveis/produtos

Exemplo da estrutura de resposta em JSON ao consultar as informações de um produto. Detalha os campos disponíveis, como dados do produto, imagens e URLs.

```JSON
{
    "Product": {
        "ean": "8882",
        "id": "84",
        "name": "Produto Teste 4",
        "description": "Produto para Teste Automatizado. Produto sem variação.</p>\r\n",
        "description_small": "Produto de Teste 4",
        "price": "199.90",
        "promotional_price": "0.00",
        "start_promotion": "0000-00-00",
        "end_promotion": "0000-00-00",
        "brand": "Paginacao",
        "model": "Modelo 3",
        "category_id": "16",
        "available": "1",
        "availability": "Em estoque",
        "hot": "1",
        "release": "0",
        "additional_button": "",
        "has_variation": "",
        "additional_message": "Mensagem.",
        "warranty": "1 ano",
        "rating": "0",
        "count_rating": "0",
        "ProductImage": [
            {
                "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/400636/180_1.png",
                        "https": "https://images.tcdn.com.br/img/img_prod/400636/180_1.png"
                    }
                }
            }
        ],
        "image": "1",
        "url": {
            "http": "http://sualojavirtual.commercesuite.com.br/produto-teste-4-pr.htm",
            "https": "https://sualojavirtual.commercesuite.com.br/produto-teste-4-pr.htm"
        }
    }
}
```

--------------------------------

### Twig Whitespace Formatting Examples

Source: https://partners.tray.com.br/themes/construindo-seu-template/twig/possibilidades-de-uso

Provides examples of correct whitespace usage around Twig delimiters according to coding standards.

```Twig
{{ foo }}
{# comment #}
{% if foo %}{% endif %}
```

--------------------------------

### Get Help with Tray CLI Commands

Source: https://partners.tray.com.br/themes/tray-cli/comandos

Displays a list of available commands and their descriptions. If a specific command is provided as an argument, it shows detailed help for that command.

```bash
tray help [command]
```

--------------------------------

### Tab Component Usage Example

Source: https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/novo/estrutura/componentes/tab

An example demonstrating how to use the Tab component to group other form elements like Select and Text fields. Each element is assigned to a specific tab using the 'tab' attribute.

```json
{
    "type": "tab",
    "field": "campo_tabs",
    "options": [
        {
          "value": "aba_a",
          "content": "Primeira Aba A"
        },
        {
          "value": "aba_b",
          "content": "Primeira Aba B"
        }
    ]
},
{
    "label": "Título do select dentro da aba A",
    "type": "select",
    "description": "Descrição da aba atual aberta.",
    "field": "options_01",
    "tab": "aba_a",
    "options": [
        {
          "value": "op_01",
          "content": "Mais Vendidos"
        },
        {
          "value": "op_02",
          "content": "Frete Grátis"
        },
        {
          "value": "op_03",
          "content": "Promoção"
        }
    ]
},	
{
    "label": "Título do campo de texto sem icone na Aba B", 
    "type": "text",
    "description": "Descrição do campo",
    "placeholder": "Como deve ser o texto inserido",
    "field": "nome_do_campo_text_abab", 
    "validation": "required:true|min:10|max:30",
    "tab": "aba_b"
}
```

--------------------------------

### Adicionar produto ao carrinho via link

Source: https://partners.tray.com.br/themes/construindo-seu-template/desenvolver/como-adicionar-o-botao-comprar-na-listagem-dos-produtos

Esta abordagem utiliza um link direto para adicionar um produto ao carrinho. É uma solução simples, mas funciona apenas para produtos sem variações. Se o produto tiver variações, o link redirecionará para a página do produto.

```HTML
<a href="{{ links.cart_add ~ product.id }}" alt="comprar"> Comprar</a>
```

--------------------------------

### HTML Snippet Inclusion Example

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/adicionar-ao-carrinho-sem-sair-da-pagina

This example demonstrates how to include an HTML snippet file within a template, passing product data as a parameter. This is a common pattern for modularizing front-end code.

```HTML
{% element 'snippets/add-cart' {"product": product} %}
```

--------------------------------

### Categories API JSON Response Example

Source: https://partners.tray.com.br/themes/construindo-seu-template/apis-disponiveis/categorias

This is an example of a successful JSON response from the Tray Categories API when requesting category data. It includes a list of categories, each with its details, images, and potential subcategories.

```JSON
{
    "Category": [
        {
            "Category": {
                "slug": "categoria-1",
                "id": "1",
                "parent_id": "",
                "name": "Categoria 1",
                "description": "categoria-1",
                "title": "",
                "link": {
                    "http": "http://sualojavirtual.com.br/categoria-1",
                    "https": "https://sualojavirtual.com.br/categoria-1"
                },
                "images": [
                    {
                        "http": "http://images1.tcdn.com.br/img/img_prod/123/categoria_img_1.png",
                        "https": "https://images2.tcdn.com.br/img/img_prod/123/categoria_img_1.png"
                    }
                ],
                "children": [
                    {
                        "Category": {
                            "slug": "categoria-1/subcategoria",
                            "id": "3",
                            "parent_id": "1",
                            "name": "Subcategoria",
                            "description": "Subcategoria",
                            "title": "",
                            "link": {
                             "http": "http://sualojavirtual.com.br/categoria-1/subcategoria",
                             "https": "https://sualojavirtual.com.br/categoria-1/subcategoria"
                            },
                            "images": [],
                            "children": null
                        }
                    }
                ]
            }
        },
        {
            "Category": {
                "slug": "categoria-2",
                "id": "2",
                "parent_id": "",
                "name": "Categoria 2",
                "description": "categoria-2",
                "title": "",
                "link": {
                    "http": "http://sualojavirtual.com.br/categoria-2",
                    "https": "https://sualojavirtual.com.br/categoria-2"
                },
                "images": [
                    {
                        "http": "http://images1.tcdn.com.br/img/img_prod/123/categoria_img_2.png",
                        "https": "https://images2.tcdn.com.br/img/img_prod/123/categoria_img_2.png"
                    }
                ],
                "children": null
            }
        }
    ]
}
```

--------------------------------

### Adicionar produto ao carrinho via API com JavaScript

Source: https://partners.tray.com.br/themes/construindo-seu-template/desenvolver/como-adicionar-o-botao-comprar-na-listagem-dos-produtos

Este método envolve o uso de JavaScript e a API de carrinho para adicionar produtos. Requer mais conhecimento técnico. Um botão é adicionado ao layout, e uma função JavaScript é usada para enviar os dados do produto para o carrinho via requisição AJAX. O código lida com o sucesso e falha da operação, atualizando a interface do usuário.

```HTML
<button type="submit" data-app="product.buy-button" data-product ="{{ product.id }}" >    Comprar </button>
```

```JavaScript
jQuery('[data-app="product.buy-button"]').on('click', function() {
  var $productId = jQuery(this).attr('data-product');
  var $dataSession = jQuery("html").attr("data-session");
  var self = this;
  jQuery.ajax({
    method: "POST",
    url: "/web_api/cart/",
    contentType: "application/json; charset=utf-8",
    data: '{"Cart":{"session_id":"'+$dataSession+'","product_id":"'+$productId+'","quantity":1}}'
  }).done(function( response, textStatus, jqXHR ) {
    jQuery(self).text("Adicionado!")
   var qtdCart = parseInt(jQuery("[data-cart=amount]").html());
   jQuery("[data-cart=amount]").html(qtdCart + 1);
  }).fail(function( jqXHR, status, errorThrown ){
    var response = jQuery.parseJSON( jqXHR.responseText );
    // Exibe a mensagem de erro (estoque insuficiente, etc)
    alert(response.causes[0])
  });
})
```

--------------------------------

### Listar Produtos com Filtros via GET

Source: https://partners.tray.com.br/themes/construindo-seu-template/apis-disponiveis/produtos

Exemplo de como realizar uma requisição GET para listar produtos, utilizando parâmetros para filtrar a listagem. A requisição é feita usando jQuery AJAX.

```JavaScript
var params = {};

params["category_id"] = "123";
params["page"] = "2";
params["limit"] = "20";

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

--------------------------------

### Configuração de Exibição de Segunda Imagem (Editor Antigo)

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/exibir-a-segunda-imagem-ao-passar-o-mouse

Este snippet HTML é para o editor de temas antigo e configura as opções de rádio para 'Sim' ou 'Não' para exibir a segunda imagem ao passar o mouse.

```HTML
<div class="item">
    <div class="box-option">
        <div class="msg">Exibir a segunda imagem ao passar o mouse?</div>
        <div class="list-radio flex">
            <label class="option flex align-center">
                <input type="radio" name="image_list" value="1">
                <div class="dot"></div>
                <div class="text">Sim</div>
            </label>
            <label class="option flex align-center">
                <input type="radio" name="image_list" value="0">
                <div class="dot"></div>
                <div class="text">Não</div>
            </label>
        </div>
    </div>
</div>
```

--------------------------------

### Get Hot Tags Position

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Returns 1 for 'Display below footer' and 2 for 'Display above Footer'.

```Liquid
{{ settings.hottags_position }}
```

--------------------------------

### Configuração de Exibição de Segunda Imagem (Novo Editor)

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/exibir-a-segunda-imagem-ao-passar-o-mouse

Este snippet JSON é para o novo editor de temas e define um campo do tipo 'toggle' para controlar a exibição da segunda imagem ao passar o mouse.

```JSON
{
  "label": "Imagem do produto",
  "fields": [
    {
      "label": "Exibir a segunda imagem ao passar o mouse?",
      "type": "toggle",
      "description": "",
      "field": "image_list"
    }
  ]
}
```

--------------------------------

### Get Currency Configuration

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Retrieves the active 'Currency' configuration. Possible values: 'R$' | 'US$'.

```Liquid
{{ settings.currency }}
```

--------------------------------

### Consultar Informações de Variação de Produto via GET

Source: https://partners.tray.com.br/themes/construindo-seu-template/apis-disponiveis/variacoes-de-produto

Exemplo de como consultar as informações de uma variação de produto utilizando uma requisição GET. A chamada é feita para o endpoint `/web_api/variants/{variantId}` e o resultado é processado no callback `done` ou `fail`.

```JavaScript
<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>
```

--------------------------------

### Get Product Image Zoom Height

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Returns the configured height for product image zoom in the settings.

```Liquid
{{ settings.zoom_height }}
```

--------------------------------

### HTML para Botões de Quantidade de Produto

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/botoes-quantidade

Este snippet HTML cria os botões de '+' e '-' e um campo de texto para selecionar a quantidade de um produto. Inclui um alerta para variações de produto e um botão de compra.

```HTML
<div data-app="product.quantity" id="quantidade">
  <span id="span_erro_carrinho" class="blocoAlerta" style="display:none;">Selecione uma opção para variação do produto</span>
  <label>Quantidade:</label>      
  <input type="button" id="plus" value='-' onclick="process(-1)" />
  <input id="quant" name="quant" class="text" size="1" type="text" value="1" maxlength="5" />
  <input type="button" id="minus" value='+' onclick="process(1)">
</div>
<button type="submit">Comprar</button>
```

--------------------------------

### asset() Function Output Example

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/funcoes/asset

Shows the expected output when using the asset() function, which resolves to a full URL including the store path, theme ID, and the requested asset path, often with a cache-busting query parameter.

```html
<img src="https://caminhoimg.com.br/1234/themes/111/img/my-image.png?1223" alt="">
<script src="https://caminhojs.com.br/1234/themes/111/js/style.js?1223"></script>
<link href="https://caminhoimg.com.br/1234/themes/111/css/style.css?1223">
```

--------------------------------

### Get Product Image Zoom Width

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Returns the configured width for product image zoom in the settings.

```Liquid
{{ settings.zoom_width }}
```

--------------------------------

### Get Currency Abbreviation

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Retrieves the active currency and displays its abbreviation code. Possible values: 'BRL' | 'USS'.

```Liquid
{{ settings.currency_abbr }}
```

--------------------------------

### Estrutura de Resposta JSON para Listagem de Produtos

Source: https://partners.tray.com.br/themes/construindo-seu-template/apis-disponiveis/produtos

Exemplo da estrutura de dados em JSON retornada pela API após uma requisição de listagem de produtos. Inclui informações de paginação, filtros aplicados e a lista de produtos.

```JSON
{
    "paging": {
        "total": 201,
        "page": 1,
        "offset": 0,
        "limit": 1,
        "maxLimit": 50
    },
    "sort": [ { "id": "asc" } ],
    "availableFilters": [
        "id", "name", "category_id", "ean", "available", "price",
        "brand", "model", "hot", "quantity_sold", "release",
        "free_shipping", "weight", "image", "release_date", "stock",
        "promotion", "modified", "created" ],
    "appliedFilters": [],
    "Products": [
        {
            "Product": {

```

--------------------------------

### Get Default Image Zoom Width

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Returns the configured 'Width of Default Image (without zoom)' in the settings.

```Liquid
{{ settings.default_image_zoom_width }}
```

--------------------------------

### Configurar Cadastro de Marcas com Imagem (HTML)

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/menu-de-marcas

Este snippet HTML define a estrutura para o cadastro de marcas, permitindo que o cliente ative a exibição de marcas na loja, faça upload de imagens para cada marca (com restrição de largura) e adicione links para cada marca. Ele é projetado para ser inserido no arquivo settings.html.

```HTML
<div class="tab-show">

    <div class="title-tab">Menu de Marcas</div>
    <div class="marcas">

        <div class="box-option">
            <div class="name">Exibir Marcas na loja?</div>
            <div class="list-radio">
                <label class="option">
                    <input type="radio" name="brands_active" value="1" checked="">
                    <div class="dot"></div>
                    <div class="text">Sim</div>
                </label>
                <label class="option">
                    <input type="radio" name="brands_active" value="0">
                    <div class="dot"></div>
                    <div class="text">Não</div>
                </label>
            </div>
        </div>

        <div class="msg">* Subir imagens com largura máxima de 180px</div>

        <div class="line-upload">
            <div class="item">
                <div class="name">Marca 01</div>
                <div class="box-file">
                    <div class="input-group file">
                        <div class="area-file">
                            <input type="file" class="form-control" accept="image/*" name="brand_1">
                        </div>
                        <a class="remove-img"></a>
                    </div>
                </div>
                <input type="text" class="input-panel" name="link_marca_1" placeholder="Link da Marca">
            </div>
            <div class="item">
                <div class="name">Marca 02</div>
                <div class="box-file">
                    <div class="input-group file">
                        <div class="area-file">
                            <input type="file" class="form-control" accept="image/*" name="brand_2">
                        </div>
                        <a class="remove-img"></a>
                    </div>
                </div>
                <input type="text" class="input-panel" name="link_marca_2" placeholder="Link da Marca">
            </div>
            <div class="item">
                <div class="name">Marca 03</div>
                <div class="box-file">
                    <div class="input-group file">
                        <div class="area-file">
                            <input type="file" class="form-control" accept="image/*" name="brand_3">
                        </div>
                        <a class="remove-img"></a>
                    </div>
                </div>
                <input type="text" class="input-panel" name="link_marca_3" placeholder="Link da Marca">
            </div>
        </div>

    </div>
</div>
```

--------------------------------

### Example Tray Object Return Structure

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/tray

This PHP code snippet illustrates the structure of the data returned by the `tray` object, showing arrays and values for attributes like analytics, credits, meta, scripts, styles, and paths.

```PHP
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]h
            [css] => [PATH_URL]
            [shop_image] => [PATH_URL]
            [system_image] => [PATH_URL]
            [theme] => [PATH_URL]
        )
)

```

--------------------------------

### Get Default Image Zoom Height

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Returns the configured 'Height of Default Image (without zoom)' in the settings.

```Liquid
{{ settings.default_image_zoom_height }}
```

--------------------------------

### Checking if Product is Featured

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to check if a product is marked as a featured item.

```html
{% if products[0].featured %}
    Product is featured.
{% endif %}
```

--------------------------------

### Exibir Imagem de Banner Home com Link em HTML

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/banner

Este código HTML/Twig exibe uma imagem de banner 'home' juntamente com seu link, se o banner estiver cadastrado. Ele considera as dimensões da imagem e a forma como o link deve ser exibido, incluindo o atributo 'target'.

```Twig
{% 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 %}
```

--------------------------------

### Checking for Product Variations

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to determine if a product has variations, returning '1' if it does.

```html
{{ products[0].has_variation }}
```

--------------------------------

### Estrutura do Produto com Segunda Imagem no Hover

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/exibir-a-segunda-imagem-ao-passar-o-mouse

Este snippet HTML define a estrutura de um link de produto, incluindo a lógica para exibir a segunda imagem quando a configuração está ativa e o dispositivo não é móvel.

```HTML
<a href="{{ product.link }}" class="space-image{{ settings.image_list and product.images[1] and (not utils.is_mobile) ? ' second' }}">
    <img src="{{ product.images[0].large }}" alt="{{ product.name }}">
    {% if settings.image_list and product.images[1] and (not utils.is_mobile) %}
        <img src="{{ product.images[1].large }}" alt="{{ product.name }}">
    {% endif %}
</a>
```

--------------------------------

### Initialize settings.json

Source: https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/settings

This snippet shows the basic structure required for the settings.json file to function correctly. It includes the 'current' object, which holds the active customization settings.

```json
{
    "current":{}
}
```

--------------------------------

### Implementação com Twig para exibir formas de pagamento

Source: https://partners.tray.com.br/themes/construindo-seu-template/desenvolver/exibindo-as-formas-de-pagamento-de-um-produto

Este código usa a sintaxe Twig para iterar sobre as opções de pagamento de um produto e exibir o preço à vista ou parcelado, dependendo do número de parcelas.

```Twig
{% for payment in product.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 %}

```

--------------------------------

### Displaying Product Height

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to display the height of a product, usually in centimeters.

```html
{{ products[0].height }}
```

--------------------------------

### Create a New Theme on Tray Platform

Source: https://partners.tray.com.br/themes/tray-cli/comandos

Creates a new theme on the store with a specified name and based on a base theme. It requires API key, password, theme name, and base theme, which can be provided as arguments or prompted interactively. The --debug option generates log files.

```bash
tray create [options] [key] [password] [theme-name] [theme-base]
```

--------------------------------

### Displaying Product Length

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/products

This code example shows how to display the length of a product, usually in centimeters.

```html
{{ products[0].length }}
```

--------------------------------

### Exibir Banner Home e Mobile com Lógica de Dispositivo em Twig

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/banner

Este código Twig gerencia a exibição de banners com base no tipo de dispositivo. Ele prioriza o 'Banner Mobile' se o dispositivo for móvel e o 'Banner Home' estiver disponível, caso contrário, exibe o 'Banner Home' para ambos os tipos de acesso. Se apenas o 'Banner Home' estiver cadastrado, ele é exibido em todos os acessos.

```Twig
{% if banner.home or banner.mobile %}
    {% if banner.mobile and utils.is_mobile %}
	    {{ banner.mobile }}          
	{% else %}
		{{ banner.home }}
	{% endif %}
{% endif %}
```

--------------------------------

### Get Product Image Zoom Position

Source: https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings

Returns the configured 'Zoom Position' in the settings. Possible values: 'left' | 'right'.

```Liquid
{{ settings.zoom_position }}
```
Tokens:
Raw