Página de detalhes do produto

Modelo completo da página de detalhes do produto 

{% set produto = store.productDetail(extra.id) %}
{% set session = store.getSession() %}
{% set relacionados = store.productToBox({cl1:produto.category.cl1.id, limit:'4', order:'random'}) %}
{{ include('widgets/alertas-destaque.html') }}
<main class="block">
	<section id="produto" class="block">
		<div class="central">
			<nav class="mb-4" arial-label="breadcrumb">
				<ol class="breadcrumb" itemprop="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
					{% for bread in produto.breadcrumbs %}
						<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
							<a href="{{ bread.url }}" itemprop="item">{{ bread.page }}</a>
							<meta itemprop="position" content="{{ loop.index }}" />
						</li>
					{% endfor %}
				</ol>
			</nav>
		</div>
		<div class="central" itemtype="http://schema.org/Product" itemscope>
			<div class="cln">
				{% if produto.photos|length >= 1 %}
					{% if produto.photos_type == '1' %}
						<div class="fotos">
							<div class="mini">
								{% for foto in produto.photos %}
									<div class="item foto_{{ foto.cor_count ?? 0 }}{{ foto.video_raw ? ' video' : ''}}" data-cor="{{ foto.cor_id }}">
										<img src="{{ foto.foto_mini }}" alt="{{ produto.product }}" class="img-cover" />
									</div>
								{% endfor %}
							</div>
							<div class="big">
								{% for foto in produto.photos %}
									{% if foto.video_raw %}
										<div class="item video" data-cor="">
											{{ foto.video_raw }}
										</div>
									{% else %}
										<div class="item easyzoom easyzoom--overlay" data-cor="{{ foto.cor_id }}">
											<a href="{{ foto.foto }}" data-standard="{{ foto.foto }}" class="fresco">
												{% if foto.legenda %}
													<span class="legenda">{{ foto.legenda }}</span>
												{% endif %}
												<img src="{{ foto.foto }}" alt="{{ produto.product }}" class="img-cover" />
											</a>
										</div>
									{% endif %}
								{% endfor %}
							</div>
							<div class="setas">
								<span class="seta prev"><i class="fa fa-chevron-left"></i></span>				    
								<span class="seta next"><i class="fa fa-chevron-right"></i></span>				    
							</div>
						</div>
					{% elseif produto.photos_type == '2' %}
						<div class="fotos-carousel">
							<div class="setas">
								<span class="prev"><i class="fa fa-angle-left"></i></span>
								<span class="next"><i class="fa fa-angle-right"></i></span>
							</div>
							<div class="carousel">
								{% for foto in produto.photos %}
									{% if foto.video_raw %}
										<div class="item" data-cor="">
											{{ foto.video_raw }}
										</div>
									{% else %}
										<div class="item easyzoom easyzoom--overlay" data-cor="{{ foto.cor_id }}">
											<a href="{{ foto.foto }}" data-standard="{{ foto.foto }}" class="fresco">
												{% if foto.legenda %}
													<span class="legenda">{{ foto.legenda }}</span>
												{% endif %}
												<img src="{{ foto.foto }}" alt="{{ produto.product }}" class="img-cover" />
											</a>
										</div>
									{% endif %}
								{% endfor %}
							</div>
						</div>
					{% endif %}
				{% endif %}
				
				<div class="descricao">
					<h2 class="t">DESCRIÇÃO</h2>
					<div class="texto">
						{{ produto.description|raw }}
					</div>
				</div>
				
				{% if produto.video.video_raw %}
					<div class="block mb-3" style="height: 350px;">
						{{ produto.video.video_raw }}
					</div>
				{% endif %}
				
				{% if produto.specification|raw %}
					<div class="descricao hidden">
						<h2 class="t">ESPECIFICAÇÕES</h2>
						<div class="texto">
							{{ produto.specification|raw }}
						</div>
					</div>
				{% endif %}
				
				{% if produto.attributes %}
					<div class="descricao hidden">
						<h2 class="t">ATRIBUTOS</h2>
						<div class="texto">
							<div class="table">
								{% for attr in produto.attributes %}
									{% set valores = {} %}
									{% for valor in attr.valores %}
										{% set valores = valores|merge({(loop.index):valor.nome}) %}
									{% endfor %}
									<div class="item no-hover">
										<div class="tb40">
											{{ attr.nome }}
										</div>
										<div class="tb60">
											<p>{{ valores|join(", ") }}</p>
										</div>
									</div>
								{% endfor %}
							</div>
						</div>
					</div>
				{% endif %}
				
				{% if produto.items|raw %}
					<div class="descricao hidden">
						<h2 class="t">ÍTENS INCLUSOS</h2>
						<div class="texto">
							{{ produto.items|raw }}
						</div>
					</div>
				{% endif %}
				
				{% if produto.warranty|raw %}
					<div class="descricao hidden">
						<h2 class="t">GARANTIA</h2>
						<div class="texto">
							<p>{{ produto.warranty }}</p>
						</div>
					</div>
				{% endif %}
			</div>
			
			<div class="cln">
				{% for foto in produto.photos if not foto.video_raw %}
					<link itemprop="image" href="{{ foto.foto }}" />
				{% endfor %}
				<meta itemprop="mpn" content="{{ produto.code }}" />
				<meta itemprop="description" content="{{ produto.description|striptags }}" />
				{% if produto.product.brand.nome %}
					<div itemprop="brand" itemtype="http://schema.org/Thing" itemscope>
						<meta itemprop="name" content="{{ produto.brand.nome }}" />
					</div>
				{% endif %}
				<div class="mobile-fotos">
					<div class="carrossel">
						{% for foto in produto.photos %}
							{% if foto.video_raw %}
								<div class="item video" data-cor="{{ foto.cor_id }}">
									{{ foto.video_raw }}
								</div>
							{% else %}
								<div class="item fresco" data-cor="{{ foto.cor_id }}">
									{% if foto.legenda %}
									<span class="legenda">{{ foto.legenda }}</span>
									{% endif %}
									<img src="{{ foto.foto }}" alt="{{ produto.product }}" class="img-fluid" />
								</div>
							{% endif %}
						{% endfor %}
					</div>
					<span class="setas prev"><i class="fa fa-chevron-left"></i></span>
                    <span class="setas next"><i class="fa fa-chevron-right"></i></span>
				</div>
				<div class="detalhes">
                    {{ produto.badge }}
					<h3 class="nome_produto" itemprop="name">{{ produto.product }}</h3>
					<p class="codigo_produto">
						<span itemprop="identifier" content="mpn:{{ produto.code }}">Cód.: {{ produto.code }}</span>
						{% if produto.brand.nome %}
							<span itemprop="brand">Marca: <a href="{{ produto.brand.url }}" class="text-dark"><span itemprop="name">{{ produto.brand.nome }}</span></a></span>
						{% endif %}
					</p>
					<div class="block d-flex align-items-center mb-3">
						<span class="mr-3" style="font-size: 13px; color: #666;"><i class="fa fa-heart fa-fw text-danger" style="font-size: 18px; line-height: 24px;"></i> (<span class="curtidas">{{ produto.likes }}</span>)</span>
						{% if produto.rating.votes.total >= 1 %}
						<div class="rating stars" itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope>
							<meta itemprop="reviewCount" content="{{ produto.rating.votes.total }}" />
							<meta itemprop="ratingValue" content="{{ produto.rating.votes.pontos }}" />
							<span class="vote" style="width:{{ produto.rating.percent }}%">({{ produto.rating.votes.total }})</span>
						</div>
						{% endif %}
					</div>
					{% set sku = extra.sku ? extra.sku : produto.sku %}
					<div id="inc_sku">
						{{ include('widgets/produto-sku-html.html') }}
					</div>
					{#{ dynamic_include|raw }#}
					{% if geral.hasOpolen %}
					<opolen></opolen>
					{% endif %}
					
					{% if produto.store.isFilial %}
						<div class="block mb-2 fornecedor">
							<p><strong>Vendido e entregue por:</strong> <a href="{{ produto.store.url_interna_matriz }}">{{ produto.store.nome }}</a></p>
						</div>
					{% endif %}
					{% if produto.allow_comments %}
						<div class="comentarios mb-4">
							<div class="mt-3">
								{% if extra.id not in session.curtidos %}
									<a href="" class="btn btn-light curtir"><i class="fa fa-fw fa-heart-o text-danger"></i> Curtir</a>
								{% else %}
									<span class="btn btn-light disabled"><i class="fa fa-fw fa-heart text-success"></i> Curtiu!</span>
								{% endif %}
								<a href="" class="btn btn-light mymodal" data-include="inc.php?meio=produtos_det_comentar&id={{ extra.id }}" data-width="400" data-title="Avaliar"><i class="fa fa-fw fa-comment text-info"></i> Avaliar</a>
							</div>
							{{ include('includes/product_comments.html') }}
						</div>
					{% endif %}
					{% if produto.attachments|length >= 1 %}
						<div class="row">
							<div class="col">
								<p class="text-muted mb-1">ANEXOS</p>
								{% for anexo in produto.attachments %}
								<p><a href="{{ anexo.arquivo }}" download="{{ anexo.filename_download }}" class="text-info"><i class="fa fa-paperclip fa-fw"></i> {{ anexo.titulo }}</a></p>
								{% endfor %}
							</div>
						</div>
					{% endif %}
					<div class="row">
						<div class="col">
							<p class="text-muted mb-1">Compartilhe</p>
							{{ include('includes/share.html') }}
						</div>
					</div>
				</div>
				<div class="description">
					<div class="descricao">
						<h2 class="t">DESCRIÇÃO</h2>
						<div class="texto">
							{{ produto.description|raw }}
						</div>
					</div>
					{% if produto.video.video_raw %}
						<div class="block mb-3" style="height: 350px;">
							{{ produto.video.video_raw }}
						</div>
					{% endif %}
					{% if produto.specification|raw %}
						<div class="descricao hidden">
							<h2 class="t">ESPECIFICAÇÕES</h2>
							<div class="texto">
								{{ produto.specification|raw }}
							</div>
						</div>
					{% endif %}
					{% if produto.attributes %}
						<div class="descricao hidden">
							<h2 class="t">ATRIBUTOS</h2>
							<div class="texto">
								<div class="table">
									{% for attr in produto.attributes %}
										{% set valores = {} %}
										{% for valor in attr.valores %}
											{% set valores = valores|merge({(loop.index):valor.nome}) %}
										{% endfor %}
										<div class="item no-hover">
											<div class="tb40">
												{{ attr.nome }}
											</div>
											<div class="tb60">
												<p>{{ valores|join(", ") }}</p>
											</div>
										</div>
									{% endfor %}
								</div>
							</div>
						</div>
					{% endif %}
					{% if produto.items|raw %}
						<div class="descricao hidden">
							<h2 class="t">ÍTENS INCLUSOS</h2>
							<div class="texto">
								{{ produto.items|raw }}
							</div>
						</div>
					{% endif %}
					{% if produto.warranty|raw %}
						<div class="descricao hidden">
							<h2 class="t">GARANTIA</h2>
							<div class="texto">
								<p>{{ produto.warranty }}</p>
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</section>
	
	{% set compreJunto = html.buyTogether(produto.id) %}
	{{ compreJunto ? compreJunto|raw : '' }}

	{% if geral.hasPerformaAI %}
	<performa></performa>
	{% endif %}
	<section class="block">
		<div class="central">
			<h2 class="titulo mb-3">PRODUTOS RELACIONADOS</h2>
			<div class="produtos">
				<div class="row justify-content-center">
					{% for produto in relacionados.data %}
					<div class="col-md-3">
						{{ include('widgets/box-do-produto.html') }}
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</section>
</main>
{% if geral.hasSmartHint %}
<div id="smarthint-position-1"></div>
<div id="smarthint-position-2"></div>
<div id="smarthint-position-3"></div>
<div id="smarthint-position-4"></div>
<div id="smarthint-position-5"></div>
{% endif %}
<script>
$(function(){
	$('.mobile-fotos .carrossel').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
        arrows: false,
        speed: 100,
    });
    setTimeout(function(){
        $('.mobile-fotos .carrossel').slick('slickSetOption', "adaptiveHeight", true, true);
    }, 200);
    $('.mobile-fotos .setas.prev').click(function(){
        $('.mobile-fotos .carrossel').slick('slickPrev');
    });
    $('.mobile-fotos .setas.next').click(function(){
        $('.mobile-fotos .carrossel').slick('slickNext');
    });
    $('.easyzoom').easyZoom({
        loadingNotice: 'carregando...',
        errorNotice: 'erro ao carregar zoom da imagem'
    });
    $('#geral').on('click', '.fotos .big .item, .fotos-carousel .item', function(e){
        e.preventDefault();
        let href = $('a.fresco', this).attr('href');
        Fresco.show({
            url: href,
            options: {
                overflow: true,
                onClick: 'close',
            }
        })
    });
    $('#geral').on('click', '.mobile-fotos .item.fresco', function(e){
        e.preventDefault();
        let href = $('img', this).attr('src');
        if(href){
            Fresco.show({
                url: href,
                options: {
                    overflow: true,
                    onClick: 'close',
                }
            });
        }
    });
	
	{% if produto.photos_type == '1' %}
		$('.fotos .big').slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			draggable: true,
			//fade: true,
			asNavFor: '.fotos .mini',
			infinite: false,
			speed: 100,
			dots: true,
			adaptiveHeight: true,
		});
		setTimeout(function(){
			$('.fotos .big').slick('slickSetOption', "adaptiveHeight", true, true);
		}, 200);
		$('.fotos .mini').slick({
			slidesToShow: 4,
			slidesToScroll: 1,
			asNavFor: '.fotos .big',
			dots: false,
			focusOnSelect: true,
			vertical: true,
			verticalSwiping: true,
			infinite: false,
			centerMode: false,
			speed: 100,
		});
		$('.fotos .mini').slick('slickSetOption', 'initialSlide', 1);
		$('.fotos .setas .prev').click(function(){
			let currentSlide = $('.fotos .mini').slick('slickCurrentSlide');
			let newCurrent = currentSlide - 1;
			if(newCurrent < 0)
				newCurrent = 0;
			$('.fotos .mini').slick('slickGoTo', newCurrent, true);
		});
		$('.fotos .setas .next').click(function(){
			let currentSlide = $('.fotos .mini').slick('slickCurrentSlide');
			let total = $('.fotos .mini .item').length;
			let newCurrent = currentSlide + 1;
			if(newCurrent > total)
				newCurrent = total;
			$('.fotos .mini').slick('slickGoTo', newCurrent, true);
		});
	 {% elseif produto.photos_type == '2' %}
		 $('.fotos-carousel .carousel').slick({
			slidesToShow: 2,
			slidesToScroll: 1,
			infinite: true,
			dots: false,
			arrows: false,
			speed: 100,
		});
		$('.fotos-carousel .setas .prev').click(function(){
			$('.fotos-carousel .carousel').slick('slickPrev');
		});
		$('.fotos-carousel .setas .next').click(function(){
			$('.fotos-carousel .carousel').slick('slickNext');
		});
	 {% endif %}
	 
	 $('#produto .descricao .t').click(function(e){
		 if($(this).parents('.descricao').hasClass('hidden')){
			 $(this).next('.texto').show(100);
			 $(this).parents('.descricao').removeClass('hidden');
		 }else{
			 $(this).next('.texto').hide(100);
			 $(this).parents('.descricao').addClass('hidden');
		 }
	 });
	  {% if geral.hasSmartHint %}
	  	SmartHint.Call('setPage',{type:'product', data: {} });
	  {% endif %}
	  
	  $('.curtir').click(function(e){
		  e.preventDefault();
		  var _th = $(this);
		  _th.html('Curtindo...');
		  $.post('produtos_func.php', {funcao:'c2220d356b3fa223ef2a63f869875313', id:'{{ extra.id }}'}, function(d){
			  $('#response').html(d);
			  _th.removeClass('curtir').addClass('disabled').html('<i class="fa fa-fw fa-heart text-success"></i> Curtiu!');
		  });
	  });
});
</script>