html.productDetailSKU
Disponibiliza como retorno os elementos HTML dos dados dinâmicos da página de detalhes do produto.
# obrigatoriamente passe como parâmetro o sku recebido na tela-pai e o id do produto desta (detalhes do produto)
{% set html = html.productDetailSKU(sku, extra.id) %}
# exemplo de uso
{% set html = html.productDetailSKU(sku, extra.id) %}
{%
set setTagsEcommerceProductDetail = store.setTagsEcommerceProductDetail({
id: extra.id,
sku: sku,
name: html.matriz.produto,
quantity: 1,
price: html.matriz.valor_cliente.valor,
})
%}
<div id="produto-sku" data-sku="{{ sku }}" data-widget="produto-sku-html.html" data-loadingwhenchange="true">
{{ html.googletags }}
{{ html.pontoswb }}
{{ html.valor }}
{{ html.desconto }}
{{ html.compra_minima }}
{{ html.parcelamento }}
{{ html.contador_regressivo }}
{{ html.disponibilidade }}
{{ html.valor_atacado }}
{{ html.ultimas_unidades }}
{{ html.frete_gratis }}
{{ html.tabela_medidas }}
{{ html.info_assinatura }}
<div class="estoque">
{{ html.grade }}
{{ html.campos_adicionais }}
</div>
<div class="botoes">
{{ html.botao_carrinho }}
{{ html.calculo_frete }}
</div>
</div>
<script>
var _cor_id = '{{ html.matriz.cor.id }}';
$(function(){
if(productPhotosColorSelected != _cor_id){
mobileLoadPhotosByColor(_cor_id);
productLoadPhotosByColor({
cor_id: _cor_id,
tipo_fotos: '{{ html.matriz.tipo_fotos }}',
});
productPhotosColorSelected = _cor_id;
}
{% if html.matriz.grade_tipo == 'grid' %}
$('#geral, #mymodal').on('click', '.grade .l .cor .item', function(){
let _th = $(this);
let color = _th.data('cor');
productLoadPhotosByColor({
cor_id: color,
tipo_fotos: '{{ html.matriz.tipo_fotos }}',
});
mobileLoadPhotosByColor(color);
});
{% endif %}
});
</script>
{{ setTagsEcommerceProductDetail }}
ATENÇÃO
Obrigatoriamente coloque suas variáveis dinâmicas dentro de um div#produto-sku, caso contrário não irá funcionar os elementos em Javascript pré-programados.
A div#produto-sku recebe como parâmetros os seguintes campos (veja no exemplo acima):
data-sku string Obrigatório - O SKU do produto setado na tela-pai desta (detalhes do produto)
data-widget string Obrigatório - Nome do seu widget dinâmico na árvore de widgets, exemplo: produtos-detalhes-sku.html
data-loadingwhenchange string bool - Informe true para que mostre um pequeno informativo de carregamento (loading) sob o widget, indicando ao consumidor que está sendo processado. Informe false para desabilitar. Padrão: false
# retorno dos dados
googletags string raw - <div> com tags montadas preparadas para o Google Retargeting. Não se esqueça de fazer o Retargeting na tela-pai desta.
pontoswb string raw - <div.clube-info-pontos> com informações dos pontos que o comprador ganhará na compra do produto caso o aplicativo Fidelização esteja ativo
valor string raw - <div.valores> com informações do valor do produto em questão
valor_atacado string raw - <div.valor_atacado> com informações do valor de atacado quando existente
desconto string raw - <p.desconto> quando existente, mostra informações do desconto disponível
compra_minima string raw - <p.compra_minima> quando existente, mostra informações de quantidade mínima para compra do SKU
parcelamento string raw - <div.parcelas> quando existente, mostra por linha os parcelamentos disponíveis para o SKU com base no valor de venda
contador_regressivo string raw - <div.countdown> mostra quando um produto estiver em promoção e a opção de mostrar contador regressivo está habilitada
disponibilidade string raw - <p.disponibilidade> mostra o prazo de disponibilidade do produto
ultimas_unidades string raw - <p.ultimas_unidades> mostra quanto habilitado e o SKU tiver 5 ou menos itens disponíveis
frete_gratis string raw - <p.frete_gratis> quando existente, mostra o informativo: FRETE GRÁTIS
grade string raw - <div> monta e mostra a grade disponível para o produto conforme a configuração da loja e tipo de grade
campos_adicionais string raw - <div.campos_adicionais> quando existente, mostra campos adicionais que o consumidor deve selecionar antes de adicionar o produto no carrinho
botao_carrinho string raw - <div.row-botao-carrinho> quando disponível, permite que o consumir adicione o SKU ao carrinho
calculo_frete string raw - <div#calculo_frete> carrega o script responsável pelo cálculo de frete para o SKU selecionado
tabela_medidas string raw - <button.tabela_medidas> ao ser clicado abre um modal com informações da tabela de medidas definida
matriz array - Todos os dados contidos na matriz
matriz.id int - ID do SKU
matriz.sku string
matriz.quantidade_em_estoque int - Quantidade atual em estoque da variação selecionada
matriz.frete array
matriz.frete.comprimento double
matriz.frete.largura double
matriz.frete.altura double
matriz.frete.peso double
matriz.frete.gratis boolean
matriz.frete.base_calculo double - Valor base de cálculo para frete
matriz.frete.permite_calculo boolean - Se true, permite mostrar o formulário de cálculo do frete
matriz.prazo_producao int - Prazo de produtoção/disponibilizade do produto em dias úteis
matriz.produto_url string
matriz.desonto_mostra_valor boolean - Caso true, deve mostrar o valor do desconto em reais e não em porcentagem
matriz.mostra_prazo_producao boolean - Caso true, deve mostrar o prazo de produção do produto
matriz.parcelamento_list array - Lista dos métodos de parcelamento
matriz.parcelamento_list.tipo string
matriz.parcelamento_list.boleto boolean - Se true, este gateway está configurado para receber por boleto
matriz.parcelamento_list.parcelas int - Quantidade de parcelas possíveis para pagamento
matriz.parcelamento_list.valor_parcela double - Valor de cada parcela
matriz.parcelamento_list.has_juros boolean - Se true, o valor_parcela está calculado com juros
matriz.parcelamento_list.perc_desconto double - Percentual de desconto quando existente.
matriz.link_externo string - Link externo do produto. Caso existente, deve ser respeitado e não deve-se adicionar o produto ao carrinho, pois a compra é feita externamente
matriz.mostra_seletor_quantidade boolean - Caso true, deve mostrar o input de quantidade de produtos a ser adicionado no carrinho
matriz.mostra_variacoes_titulo boolean - Caso true, deve-se mostrar o nome das variações (Cor e Tamanho) no título do produto ao navegar entre os SKUs
matriz.produto_url string
matriz.redireciona_ao_carrinho boolean - Caso true, ao clicar no botão de adicionar ao carrinho, deve-se redirecionar o consumidor imediatamente para /carrinho
matriz.controla_estoque boolean - Caso true, a loja controla a venda por quantidade em estoque
matriz.permite_cotacao boolean - Caso true, deve-se mostrar o botão e formulário para que seja possível solicitar uma cotação do produto
matriz.permite_aviseme boolean - Caso true, deve-se mostrar o botão de avise-me
matriz.mostra_contador_regressivo boolean - Caso true, deve-se mostrar o contador regressivo para o término de uma promoção quando existente
matriz.mostra_ultimas_unidades boolean - Caso true, deve-se mostrar o informativo de últimas unidades disponíveis (geralmente informando a quantidade de estoque disponível)
matriz.tabela_medidas int - ID da tabela de medidas
matriz.grade_tipo int - ID do tipo de grade do produto
matriz.mostrar_valor_apartir boolean - Caso true, deve-se mostrar a mensagem de "à partir" antes do valor principal
matriz.sob_consulta boolean
matriz.produto_esgotado boolean
matriz.caracteristicas string - Texto cadastrado sobre as caracteristicas do produto