# exemplo de uso
{% set vitrines = store.showcaseProduct() %}

{% if global.vitrine_visitados_posicao == '1' %}
	<component data-modulo="produtos-visitados" loading="false" data-shimmer="4"></component>
{% endif %}

{% for vitrine in vitrines %}
	{% if loop.index0 == 0 %}
		{{ storeGoogleTags.dataLayerImpressions(vitrine.produtos)|raw }}
	{% endif %}
	<div id="vitrine_{{ vitrine.vitrine.id }}" class="block px-5">
		{% if vitrine.vitrine.banner_superior %}
		<div class="b_large text-center">
			{{ vitrine.vitrine.banner_superior|raw }}
		</div>
		{% endif %}
		<h2 class="titulo my-0 mb-3">{{ vitrine.vitrine.titulo }}</h2>
		<div class="produtos mb-4">
			<div class="row justify-content-center {{ vitrine.vitrine.tipo == '1' ? 'owlCarousel owl-carousel owl-theme mx-0 px-0' : '' }}">
				{% for produto in vitrine.produtos %}
				<div class="prod {{ vitrine.vitrine.tipo == '1' ? 'block' : 'col-md-3' }}">
					{{ store.productBoxDefault(produto) }}
				</div>
				{% endfor %}
			</div>
		</div>
		{% if vitrine.vitrine.banner_inferior %}
		<div class="b_large text-center">
			{{ vitrine.vitrine.banner_inferior|raw }}
		</div>
		{% endif %}
	</div>
	{% if vitrine.vitrine.tipo == '1' %}
		<script>
			$(function(){
				$('#vitrine_{{ vitrine.vitrine.id }} .owlCarousel').owlCarousel({
					dots: true,
					nav: false,
					loop: false,
					responsiveClass: true,
					autoHeight: true,
					responsive: {
						0: {
							items: '2',
							loop: true,
							margin: 5,
							slideBy: '2',
						},
						598: {
							items: '2',
							margin: 5,
							slideBy: '2',
						},
						800: {
							items: 3,
							margin: 15,
							slideBy: 3,
						},
						1024:{
							items: 4,
							margin: 15,
							slideBy: 4,
						}
					}
				});
			});
		</script>
	{% endif %}
{% endfor %}

{% if global.vitrine_visitados_posicao == '2' %}
    <component data-modulo="produtos-visitados" loading="false" data-shimmer="4"></component>
{% endif %}