product.tpl

No template de detalhes do produto, encontramos a estrutura que contém dois snipplets principais:

• product/product-image.tpl
• product/ product-form.tpl

Porém,o arquivo começa com um container com várias classes .js - que recebe todos os comportamentos de JavaScript que essa seção possui. Portanto, essas classes devem ser preservadas.

<div id="single-product" class="js-has-new-shipping js-product-detail js-product-container js-shipping-calculator-container" data-variants="{{product.variants_object | json_encode }}" itemscope itemtype="http://schema.org/Product">

Depois, há a estrutura com 2 colunas com os chamados snipplets mencionados acima:

• product-image.tpl → que contém as imagens do produto, com o zoom e o navegador do swiper para telefones celulares.
• product-form.tpl → composto de breadcrumbs, título, preço, formas de pagamento, variantes, quantidade, botão de adicionar ao carrinho, calculadora de envio e compartilhar nas redes sociais, sendo este um dos mais importantes snipplets na loja e crítica no fluxo de compra.

Dentro desta estrutura você encontra os comentários do Facebook, para que os usuários possam deixar suas opiniões sobre o produto, o que claro, pode ser desativado no Administrador Nuvem na seção de customização de layout.

<div class="container">
        <div class="row section-single-product">
            <div class="col-12 col-md-7 px-0 px-sm-3">
                {% include 'snipplets/product/product-image.tpl' %}
            </div>
            <div class="col">
                {% include 'snipplets/product/product-form.tpl' %}
            </div>
        </div>
        {% if settings.show_product_fb_comment_box %}
            <div class="fb-comments section-fb-comments" data-href="{{ product.social_url }}" data-num-posts="5" data-width="100%"></div>
        {% endif %}
        <div id="reviewsapp"></div>
    </div> 

Para fechar o arquivo, incluímos o snipplet de produtos relacionados:

{% include 'snipplets/product/product-related.tpl' %}