Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Produtos Relacionados

A seção de Produtos Relacionados é mostrada na página do produto.

Dentro do arquivo template/product.tpl, localize a tag <div id="related products"> e substitua todo o seu conteúdo pelo seguinte código:

Esse exemplo é do tema Style

<div id="related-products">
	{% set related_products_ids = product.metafields.related_products.related_products_ids %}
	{% if related_products_ids %}
	{% set related_products = related_products_ids | get_products %}
	{% set show = (related_products | length > 0) %}
	{% endif %}
	{% if not show %}
	{% set related_products = category.products | shuffle | take(4) %}
	{% set show = (related_products | length > 1) %}
	{% endif %}
	{% if show %}

	<div class="row">
		<div class="col-md-12">
			<div class="section-title section-title-large">
				<fieldset><legend><h2>{{"Productos Relacionados" | translate}}</h2></legend></fieldset>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<section id="grid" class="grid clearfix">
				{% for related in related_products %}
				{% if product.id != related.id %}
				{% include 'snipplets/single_product.tpl' with {product : related} %}
				{% endif %}
				{% endfor %}
			</section>
		</div>
	</div>

	{% endif %}
</div>

No código acima, localize a variável twig {% if show %}E No código HTML que se segue você vai perceber o título da seção  <h2>{{ "Productos Relacionados" | translate }}</h2> e também mais abaixo há uma referência a snipplets/single_product.tpl.

Isso significa que a seção de Produtos Relacionados vai utilizar esse template para mostrar os produtos, tal como se mostra o grid de produtos geral.


Visualização dos produtos na página de categoria (utilizando single_product.tpl).
 


Visualização dos produtos em "Produtos Relacionados" (também utilizando single_product.tpl)


Nota: Não é requisito ter instalada o Aplicativo Nuvem de Produtos Relacionados para que se mostrem na página, mas é altamente recomendado fazer isso!