Esse objeto trás todas as informações do produto atual.
Disponível para uso nas páginas: product | snippets/product
Para saber mais sobre como gerenciar produtos acesse: Cadastrar Produto
Atributos disponíveis
Atributo product.images
Este atributo retorna um array com informações sobre as imagens cadastradas no produto, que pode ser usado somente na página do produto. É possível manipular o tamanho da imagem para uso em Thumbnails por exemplo, com os atributos da tabela abaixo:
Como Usar
No código HTML o objeto product pode ser usado como no formato abaixo:
Input
<div> Codigo do produto: <span>{{ product.id }}</span> <h3>{{ product.name }}</h3> <h3>{{ product.brand }}</h3></div>{% if product.featured %} <spanstyle="color:#fff; background:red">Produto em destaque!</span>{% endif %}<div> {% if product.price_offer > 0 and product.show_price %} Esse produto está em promoção! {% endif %} {% if product.price > 0 and product.show_price %} <small> De: R${{ product.price|currency }}</small> <span> por: R${{ product.price_offer|currency }}</span> {% endif %} {{ product.payment }} {% set ranking = product.ranking %} {% if ranking %} Quantidade de avaliações: {{ ranking.count }} <br> Nota do produto: {{ ranking.rating }} {% endif %} {{ product.description }}</div>
Output
<div> Codigo do produto: <span>1</span> <h3>Camiseta Branca</h3> <h3>Marca X</h3></div><spanstyle="color:#fff; background:red">Produto em destaque!</span><div> Esse produto está em promoção! <small> De: R$ 50,00</small> <span> por: R$ 24,90</span> ou 3x de R$ 10,00 com juros Quantidade de avaliações: 150 <br> Nota do produto: 5 Camiseta básica para o dia a dia!</div>
Helpers do product
Para simplificar o uso de lógica com o objeto product também é possível utilizar seus helpers, que geram um determinado conteúdo com as informações do produto em um bloco já definido e pré-moldado, pronto para ser utilizado somente fazendo a chamada do Helper no código HTML.
Atributos disponíveis
Como Usar os Helpers
O código HTML abaixo mostra a galeria de imagens do produto atual em exibição.
{{ productHelper.gallery() }}
Exemplo de uso do Objeto e Helper product
O código HTML abaixo pode ser utilizado na pasta elements/snippets para exibição do produto na vitrine.
Exibe uma string que corresponde ao trecho de URL que indica o acesso ao produto entre categorias.
{{ product.name }}
Nome do produto.
{{ product.category_id }}
Exibe o identificador único da categoria principal do produto.
{{ product.modified }}
Retorna a data e hora da última modificação do produto.
{{ product.is_kit }}
Retorna um valor booleano caso o produto seja um Kit de Produtos. Se o valor for 1 é um kit.
{{ product.brand_id }}
Retorna o número de ID "identificador único" da marca do produto.
{{ product.price }}
Preço de venda do produto.
{{ product.price_offer }}
Preço do produto em promoção.
{{ product.ProgressiveDiscounts }}
Retorna um Array com as informações sobre o desconto progressivo, os itens retornados são: name | description | tag
{{ product.percentage_discount }}
Retorna o valor numérico da porcentagem de desconto no preço do produto.
{{ product.cost_price }}
Retorna o preço de custo do produto.
{{ product.ipi }}
Retorna o percentual cadastrado para o imposto IPI do produto.
{{ product.show_price }}
Retorna 1 caso as informações de preço devam ser exibidas.
{{ product.has_other_prices }}
Retorna se o produto possui outros preços, ou seja, se possui variações com preços de venda diferentes.
{{ product.payment }}
Retorna até 3 opões de parcelamento do produto definidos no campo "Exibir preço parcelado junto do preço do produto".
{{ product.payment_option_details }}
Retorna um Array com todas as informações das formas de pagamento, os índices retornados são: display_name | plots | value | type | tax
{{ product.link }}
Link para a página do produto, que pode ser usado no href da tag a.
{{ product.upon_request }}
Retorna se o produto está com o campo "Marcar produto sob consulta" ativo.
{{ product.available }}
Retorna um valor booleano. Caso o produto esteja desativado para venda exibe o valor 1. Opção "Produto ativo - será exibido na loja para venda" desmarcado.
Itens inclusos na compra do produto, configurado no campo "Itens inclusos".
{{ product.has_variation }}
Retorna um valor booleano "1" verdadeiro caso o produto contenha variações.
{{ product.variants }}
Retorna um array contendo diversos arrays um dentro do outro que levam ao tipo de variações, suas características e todas suas informações com os seguintes índices retornados: id | ean | product_id | price | stock | minimum_stock | reference | weight | length | width | height | start_promotion | end_promotion |price_offer | payment_option | illustrative_image | images | payment_option_details
{{ product.additional_information }}
Exibe o campo de informação adicional (máximo de 256 caracteres) cadastrado para o produto.
{{ productTabs }}
Retorna um array com as abas da página do produto, que contem outro array com informações com os seguintes índices: id | container_id | description | url
Para saber mais acesseproductTabs
small
Exibe a imagem do produto nas dimensões de 30x30px. Exemplo de código:
{% set images = product.images %}<imgsrc="{{ images[0].small }}"alt="">
medium
Exibe a imagem do produto nas dimensões de 90x90px. Exemplo de código:
{% set images = product.images %}<imgsrc="{{ images[0].medium }}"alt="">
large
Exibe a imagem do produto nas dimensões de 180x180px. Exemplo de código:
{% set images = product.images %}<imgsrc="{{ images[0].large }}"alt="">
full
Exibe a imagem do produto no tamanho original dela. Exemplo de código:
{% set images = product.images %}<imgsrc="{{ images[0].full }}"alt="">
{{ productHelper.banner() }}
Exibe a imagem da Promoção em lote atrelada ao produto ou somente o nome da promoção, caso não haja imagem cadastrada.
{{ productHelper.gallery() }}
Exibe uma galeria com todas as imagens e vídeo cadastrados no produto. Em que a imagem exibida no momento aparece maior e em tamanho menor as thumbnails para visualizar as outras imagens e vídeo do produto.
{{ productHelper.social() }}
Exibe o bloco de redes sociais padrão da plataforma para que o produto seja compartilhado nas redes.
{{ productHelper.labels() }}
Exibe os selos que rotulam o produto (destaque, frete grátis, lançamento, entre outros).
{{ productHelper.details() }}
Exibe algumas informações de detalhe do produto (marca, modelo, referência e data de lançamento).
{{ productHelper.icons('top') }}
Exibe as características do produto em
formato de ícone, as posições disponíveis são: top | right | bottom
{{ productHelper.bonus() }}
Exibe a quantidade de pontos do Programa de Fidelidade que o cliente ganha ao comprar o produto.
{{ productHelper.variants() }}
Exibe um bloco com as variações do produto que possibilita a escolha da variação desejada para compra.
{{ productHelper.form() }}
Exibe um input que permite inserir a Quantidade de produtos e o botão Comprar.
{{ productHelper.shipping() }}
Exibe o input com o botão para cálculo de Frete.
{{ productHelper.pricing() }}
Exibe informações de preço, detalhes e formas de pagamento (o conteúdo muda de acordo com algumas configurações do Painel Administrativo).
{{ productHelper.bundle() }}
Exibe um bloco de Compre Junto com sugestão de outros produtos que podem ser comprados com o produto atual (este bloco só é exibido se todos os produtos possuírem estoque).
{{ productHelper.gifts() }}
Exibe a seleção dos Brindes disponíveis para o produto, se o mesmo estiver configurado.