Enhance product display and styling
- Updated custom.scss to improve carousel navigation and hide dots for home products. - Incremented version of custom.css in head.tpl to reflect recent changes. - Refined product.tpl structure for better readability and maintainability, including adjustments to meta tags and product information layout. - Improved tab structure for product details, ensuring proper display of descriptions, attachments, and additional content. - Enhanced accessory display section for better user experience.
This commit is contained in:
@@ -26,8 +26,8 @@
|
||||
<meta property="product:price:amount" content="{$product.price_amount}">
|
||||
<meta property="product:price:currency" content="{$currency.iso_code}">
|
||||
{if isset($product.weight) && ($product.weight != 0)}
|
||||
<meta property="product:weight:value" content="{$product.weight}">
|
||||
<meta property="product:weight:units" content="{$product.weight_unit}">
|
||||
<meta property="product:weight:value" content="{$product.weight}">
|
||||
<meta property="product:weight:units" content="{$product.weight_unit}">
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
@@ -36,12 +36,12 @@
|
||||
<section id="main" itemscope itemtype="https://schema.org/Product">
|
||||
<meta itemprop="url" content="{$product.url}">
|
||||
{if $product.id_manufacturer}
|
||||
<div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
|
||||
<div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
|
||||
<meta itemprop="name" content="{Manufacturer::getnamebyid($product.id_manufacturer)}">
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="row product-mainblock {if Module::getInstanceByName('an_theme')->getParam('productslider_stickyProduct')}sticky-product-row{/if}">
|
||||
<div class="col-md-6 productblock-image">
|
||||
<div class="col-md-6 productblock-image">
|
||||
{block name='page_content_container'}
|
||||
<section class="page-content {if Module::getInstanceByName('an_theme')->getParam('productslider_stickyProduct')}sticky-product{/if}" id="content">
|
||||
{block name='page_content'}
|
||||
@@ -57,169 +57,170 @@
|
||||
{hook h='displayProductAdditionalInfo2' product=$product}
|
||||
</section>
|
||||
{/block}
|
||||
</div>
|
||||
<div class="col-md-6 productblock-content">
|
||||
{block name='page_header_container'}
|
||||
{block name='page_header'}
|
||||
<h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
|
||||
{/block}
|
||||
</div>
|
||||
<div class="col-md-6 productblock-content">
|
||||
{block name='page_header_container'}
|
||||
{block name='page_header'}
|
||||
<h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
|
||||
{/block}
|
||||
|
||||
{block name='product_prices'}
|
||||
{include file='catalog/_partials/product-prices.tpl'}
|
||||
{/block}
|
||||
|
||||
{hook h='displayProductVisitors' product=$product}
|
||||
<div class="product-information">
|
||||
|
||||
{if $product.is_customizable && count($product.customizations.fields)}
|
||||
{block name='product_customization'}
|
||||
{include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
|
||||
{/block}
|
||||
{/if}
|
||||
|
||||
{block name='product_additional_info'}
|
||||
{include file='catalog/_partials/product-additional-info.tpl'}
|
||||
{/block}
|
||||
|
||||
<div class="product-actions">
|
||||
{block name='product_buy'}
|
||||
<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
|
||||
<input type="hidden" name="token" value="{$static_token}">
|
||||
<input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
|
||||
<input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">
|
||||
{block name='product_prices'}
|
||||
{include file='catalog/_partials/product-prices.tpl'}
|
||||
{/block}
|
||||
|
||||
{block name='product_variants'}
|
||||
{include file='catalog/_partials/product-variants.tpl'}
|
||||
{hook h='displayProductVisitors' product=$product}
|
||||
<div class="product-information">
|
||||
|
||||
{if $product.is_customizable && count($product.customizations.fields)}
|
||||
{block name='product_customization'}
|
||||
{include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
|
||||
{/block}
|
||||
{/if}
|
||||
|
||||
{block name='product_pack'}
|
||||
{if $packItems}
|
||||
<section class="product-pack">
|
||||
<h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3>
|
||||
{foreach from=$packItems item="product_pack"}
|
||||
{block name='product_miniature'}
|
||||
{include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack}
|
||||
{/block}
|
||||
{/foreach}
|
||||
</section>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name='product_discounts'}
|
||||
{include file='catalog/_partials/product-discounts.tpl'}
|
||||
{/block}
|
||||
|
||||
{block name='product_add_to_cart'}
|
||||
{include file='catalog/_partials/product-add-to-cart.tpl'}
|
||||
{/block}
|
||||
|
||||
{block name='product_refresh'}
|
||||
<input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}">
|
||||
{/block}
|
||||
</form>
|
||||
{block name='product_additional_info'}
|
||||
{include file='catalog/_partials/product-additional-info.tpl'}
|
||||
{/block}
|
||||
|
||||
<div class="product-actions">
|
||||
{block name='product_buy'}
|
||||
<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
|
||||
<input type="hidden" name="token" value="{$static_token}">
|
||||
<input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
|
||||
<input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">
|
||||
|
||||
{block name='product_variants'}
|
||||
{include file='catalog/_partials/product-variants.tpl'}
|
||||
{/block}
|
||||
|
||||
{block name='product_pack'}
|
||||
{if $packItems}
|
||||
<section class="product-pack">
|
||||
<h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3>
|
||||
{foreach from=$packItems item="product_pack"}
|
||||
{block name='product_miniature'}
|
||||
{include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack}
|
||||
{/block}
|
||||
{/foreach}
|
||||
</section>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name='product_discounts'}
|
||||
{include file='catalog/_partials/product-discounts.tpl'}
|
||||
{/block}
|
||||
|
||||
{block name='product_add_to_cart'}
|
||||
{include file='catalog/_partials/product-add-to-cart.tpl'}
|
||||
{/block}
|
||||
|
||||
{block name='product_refresh'}
|
||||
<input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}">
|
||||
{/block}
|
||||
</form>
|
||||
{/block}
|
||||
{hook h='displayProductGuarantee' product=$product}
|
||||
{hook h='displayProductSocials' product=$product}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{block name='product_tabs'}
|
||||
<div class="tabs an-product-page-description">
|
||||
<ul class="nav nav-tabs">
|
||||
{if $product.description}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
|
||||
{l s='Description' d='Shop.Theme.Catalog'}
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
{if Module::isEnabled('an_theme') and Module::getInstanceByName('an_theme')->getParam('productinfo_detailstab')}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{if !Module::isEnabled('anproductextratabs') and !$product.description} active{/if}" data-toggle="tab" href="#product-details">
|
||||
{l s='Product Details' d='Shop.Theme.Catalog'}
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
{if $product.attachments}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#attachments">
|
||||
{l s='Attachments' d='Shop.Theme.Catalog'}
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
{foreach from=$product.extraContent item=extra key=extraKey}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="tab-content">
|
||||
<div class="tab-pane fade in{if $product.description} active{/if}" id="description">
|
||||
{block name='product_description'}
|
||||
<div class="product-description">{$product.description nofilter}</div>
|
||||
{/block}
|
||||
</div>
|
||||
{if Module::isEnabled('an_theme') and Module::getInstanceByName('an_theme')->getParam('productinfo_detailstab')}
|
||||
{block name='product_details'}
|
||||
{include file='catalog/_partials/product-details.tpl'}
|
||||
{/block}
|
||||
{/if}
|
||||
{block name='product_attachments'}
|
||||
{if $product.attachments}
|
||||
<div class="tab-pane fade in" id="attachments">
|
||||
<section class="product-attachments">
|
||||
<h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
|
||||
{foreach from=$product.attachments item=attachment}
|
||||
<div class="attachment">
|
||||
<h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
|
||||
<p>{$attachment.description}</p
|
||||
<a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
|
||||
{l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
|
||||
</a>
|
||||
</div>
|
||||
{/foreach}
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{foreach from=$product.extraContent item=extra key=extraKey}
|
||||
<div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
|
||||
{$extra.content nofilter}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name='product_footer'}
|
||||
{hook h='displayFooterProduct' product=$product category=$category}
|
||||
{/block}
|
||||
|
||||
{block name='product_accessories'}
|
||||
{if $accessories}
|
||||
<section class="product-accessories clearfix">
|
||||
<h2 class="product-accessories-title">{l s='You might also like' d='Shop.Theme.Catalog'}</h2>
|
||||
<div class="products">
|
||||
{foreach from=$accessories item="product_accessory" name=accessories}
|
||||
{if $smarty.foreach.accessories.index < 4}
|
||||
{block name='product_miniature'}
|
||||
{include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
|
||||
{/block}
|
||||
{block name='product_tabs'}
|
||||
<div class="tabs an-product-page-description">
|
||||
<ul class="nav nav-tabs">
|
||||
{if $product.description}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
|
||||
{l s='Description' d='Shop.Theme.Catalog'}
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
<!--{if Module::isEnabled('an_theme') and Module::getInstanceByName('an_theme')->getParam('productinfo_detailstab')}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{if !Module::isEnabled('anproductextratabs') and !$product.description} active{/if}" data-toggle="tab" href="#product-details">
|
||||
{l s='Product Details' d='Shop.Theme.Catalog'}
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
{if $product.attachments}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#attachments">
|
||||
{l s='Attachments' d='Shop.Theme.Catalog'}
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
{foreach from=$product.extraContent item=extra key=extraKey}
|
||||
{if $extraKey!=2}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}-->
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="tab-content">
|
||||
<div class="tab-pane fade in{if $product.description} active{/if}" id="description">
|
||||
{block name='product_description'}
|
||||
<div class="product-description">{$product.description nofilter}</div>
|
||||
{/block}
|
||||
</div>
|
||||
{if Module::isEnabled('an_theme') and Module::getInstanceByName('an_theme')->getParam('productinfo_detailstab')}
|
||||
{block name='product_details'}
|
||||
{include file='catalog/_partials/product-details.tpl'}
|
||||
{/block}
|
||||
{/if}
|
||||
{block name='product_attachments'}
|
||||
{if $product.attachments}
|
||||
<div class="tab-pane fade in" id="attachments">
|
||||
<section class="product-attachments">
|
||||
<h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
|
||||
{foreach from=$product.attachments item=attachment}
|
||||
<div class="attachment">
|
||||
<h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
|
||||
<p>{$attachment.description}</p <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
|
||||
{l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
|
||||
</a>
|
||||
</div>
|
||||
{/foreach}
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{foreach from=$product.extraContent item=extra key=extraKey}
|
||||
<div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}" {/foreach}>
|
||||
{$extra.content nofilter}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name='product_accessories'}
|
||||
{if $accessories}
|
||||
<section class="product-accessories clearfix">
|
||||
<h2 class="product-accessories-title">{l s='You might also like' d='Shop.Theme.Catalog'}</h2>
|
||||
<div class="products">
|
||||
{foreach from=$accessories item="product_accessory" name=accessories}
|
||||
{if $smarty.foreach.accessories.index < 4}
|
||||
{block name='product_miniature'}
|
||||
{include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
|
||||
{/block}
|
||||
{/if}
|
||||
{/foreach}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="pswp__bg"></div>
|
||||
@@ -241,15 +242,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -270,4 +271,4 @@
|
||||
{/block}
|
||||
</section>
|
||||
|
||||
{/block}
|
||||
{/block}
|
||||
Reference in New Issue
Block a user