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">

Em seguida, encontraremos metatags, que registrarão todos os dados variáveis dos produtos. Isto é para as funcionalidades da loja, para a plataforma, para SEO e redes sociais.

<meta itemprop="image" content="{{ 'http:' ~ product.featured_image | product_image_url('large') }}" />
    <meta itemprop="url" content="{{ product.social_url }}" />
    {% if page_description %}
        <meta itemprop="description" content="{{ page_description }}" />
    {% endif %}
    {% if product.sku %}
        <meta itemprop="sku" content="{{ product.sku }}" />
    {% endif %}
    {% if product.weight %}
        <div itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue" style="display:none;">
            <meta itemprop="unitCode" content="{{ product.weight_unit | iso_to_uncefact}}" />
            <meta itemprop="value" content="{{ product.weight}}" />
        </div>
    {% endif %}

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' %}