Página responsável por mostrar os detalhes do produto e sequencialmente adicioná-lo ao carrinho.

# obtendo informações do produto em questão

# instanciar o produto
{% set produto = store.productDetail(productId) %}

IMPORTANTE!

Para incluir a parte dinâmica do produto, ou seja, onde aparecem o preço, quantidade, botão de adicionar ao carrinho e demais, você tem 02 opções.

- Na primeira você pode usar o modelo padrão wBuy, ao qual irá carregar dinamicamente o conteúdo sem a possibilidade de personalização do HTML.
- Na segunda opção você poderá adicionar os blocos disponíveis, respeitando a regra pré-estabelecida e descrita abaixo.

 

Opção 1 - Modelo dinâmico padrão wBuy

# copie e cole onde deseja que o conteúdo dinâmico apareça em seu template
{{ dynamic_include|raw }}

O resultado será parecido um dos modelos abaixo, dependendo se está ativa a grade ou não na loja virtual:

 

Opção 2 - Modelo dinâmico personalizado

# exemplo de utilização
# insira onde deseja que o conteúdo dinâmico apareça em seu template

{% set sku = extra.sku ? extra.sku : produto.sku %} // define o sku que deverá inicializar

# faça um include do seu widget dentro de uma div#inc_sku
<div id="inc_sku">
	{{ include('caminho-do-seu-widget.html') }}
</div>

O seu widget de inclusão deverá ser construído seguindo as instruções e parâmetros encontrados aqui, em html.productDetailSKU(sku, extra.id).

# includes padrões

Para resgatar os últimos 03 comentários ativos do produto usando o widget padrão, chame-o com o seguinte trecho:

{{ include('includes/product_comments.html') }}

Abaixo segue o conteúdo padrão do widget product_comments.html. Caso deseje alterar o conteúdo do include padrão, crie um novo widget com o conteúdo desejado e chame-o no lugar. Você também pode utilizar a documentação do método store.getCommentsProduct(productId) para encontrar seus comentários.

{% set comentarios = store.getCommentsProduct(extra.id) %}

<h2 class="t">AVALIAÇÕES ({{ comentarios.total }})</h2>
{% if comentarios.total == 0 %}
<div class="block margin-bottom text-center">
    <p class="text-warning">Você conhece este produto?<br>O que pode nos contar sobre ele?</p>
</div>
{% else %}
<div class="itens">
    {% for comentario in comentarios.items %}
    <div class="item">
        <div class="h">
            <span>{{ comentario.nome }} - {{ comentario.data|date('d/m/Y') }}</span>
            <div class="rat">
                {{ comentario.estrelas|raw }}
            </div>
        </div>
        {% if comentario.comentario %}
        <p class="c">{{ comentario.comentario }}</p>
        {% endif %}
    </div>
    {% endfor %}
    <div itemprop="review" itemtype="http://schema.org/Review" itemscope>
        <div itemprop="author" itemtype="http://schema.org/Person" itemscope>
            <meta itemprop="name" content="{{ comentarios.items[0].nome }}" />
        </div>
        <div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope>
            <meta itemprop="ratingValue" content="{{ comentarios.items[0].voto }}" />
            <meta itemprop="bestRating" content="{{ comentarios.items[0].voto }}" />
        </div>
    </div>
</div>
{% endif %}

{% if comentarios.items|length >= 1 %}
<a href="#" class="b mymodal" data-include="inc.php?meio=produtos_det_comentarios&id={{ extra.id }}" data-title="Avaliações"><i class="fa fa-list-alt"></i> ver todas avaliações</a>
{% endif %}
<a href="#" class="b mymodal{{ comentarios.items|length == 0 ? ' block' : '' }}" data-include="inc.php?meio=produtos_det_comentar&id={{ extra.id }}" data-width="400" data-title="Avaliar"><i class="fa fa-pencil"></i> deixe sua avaliação</a>

Para incluir os botões de compartilhamento do produto, adicione o seguinte trecho:

<div class="row">
	<div class="col">
		<p class="text-muted mb-1">Compartilhe</p>
		{{ include('includes/share.html') }}
	</div>
</div>

# session / produtos curtidos

{% set session = store.getSession() %}

{% if extra.id not in session.curtidos %}
<a href="" class="btn btn-light curtir"><i class="fa fa-fw fa-heart-o text-danger"></i> Curtir</a>
{% else %}
<span class="btn btn-light disabled"><i class="fa fa-fw fa-heart text-success"></i> Curtiu!</span>
{% endif %}

# avaliações TrustVox (quando disponível na loja virtual)

# estrelas de votação
{% trustvoxStars = html.trustvoxProductStars(produtoId) %}

# bloco de avaliações
{% trustvoxRating = html.trustvoxProductRating() %}

# variáveis disponíveis através de store.productDetail(productId)

Todas variáveis disponíveis encontra-se aqui: store.productDetail(produto_id)

Aqui você encontra um modelo completo padrão da página de detalhes do produto: Página de detalhes do produto