En el template del detalle de producto vamos a encontrarnos con la estructura que contiene principalmente a 2 snipplets:
- product/product-image.tpl
- product/product-form.tpl
Pero el archivo comienza con un contenedor con varias clases .js- que recibe todos los comportamientos JavaScript que tiene esta sección. Por lo que estas clases se deben conservar.
<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">Luego se encuentra la estructura a 2 columnas con los llamados a los snipplets antes mencionados:
- product-image.tpl → que contiene las imágenes de producto, con el zoom y navegador swiper para celulares.
- product-form.tpl → conformado por los breadcrumbs, título, precio, formas de pago, variantes, cantidad, botón de agregar al carrito, calculadora de envío y compartir en redes sociales, siendo uno de los snipplets más importantes de la tienda y crítico en el flujo de compra.
Dentro de esta estructura vas a encontrar los comentarios de Facebook, para que los usuarios puedan dejar sus opiniones acerca de los producto. Claro que se puede deshabilitar desde el Administrador nube en la sección de personalización del diseño.
<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 cerrar el archivo incluimos el snipplet de productos relacionados:
{% include 'snipplets/product/product-related.tpl' %}