Refactor code structure for improved readability and maintainability

This commit is contained in:
2025-05-31 00:31:24 +02:00
parent 326a834e98
commit c26eb99b18
10 changed files with 11015 additions and 441 deletions

10539
.vscode/ftp-kr.sync.cache.json vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,5 @@
#pdproductattributeslist { #pdproductattributeslist {
width:100%; width: 100%;
margin-top: 15px; margin-top: 15px;
margin-right: 9px; margin-right: 9px;
margin-left: 9px; margin-left: 9px;
@@ -8,71 +7,94 @@
#pdproductattributeslist table {} #pdproductattributeslist table {}
#pdproductattributeslist input.quantity { #pdproductattributeslist input.quantity {}
}
#pdproductattributeslist .old_price { #pdproductattributeslist .old_price {
font-size: 12px; font-size: 12px;
text-decoration: line-through; text-decoration: line-through;
display: inline-block; display: inline-block;
} }
#pdproductattributeslist .price { #pdproductattributeslist .price {
font-weight: bold; font-weight: bold;
} }
#pdproductattributeslist .bootstrap-touchspin .input-group-btn-vertical i { #pdproductattributeslist .bootstrap-touchspin .input-group-btn-vertical i {
left: 4px; left: 4px;
} }
#pdproductattributeslist table td.option_infos .product-title { #pdproductattributeslist table td.option_infos .product-title {
text-transform: capitalize; text-transform: capitalize;
margin: .5rem 0; margin: .5rem 0;
text-align: unset; text-align: unset;
} }
/** RESPOINSIVE TABLE **/ /** RESPOINSIVE TABLE **/
#pdproductattributeslist td, #pdproductattributeslist th { #pdproductattributeslist td,
vertical-align: middle; #pdproductattributeslist th {
text-align: center; vertical-align: middle;
padding-top: .75rem; text-align: center;
padding-bottom: .75rem; padding-top: .75rem;
padding-bottom: .75rem;
} }
#pdproductattributeslist th { #pdproductattributeslist th {
font-size: 13px; font-size: 13px;
} }
#pdproductattributeslist td img {max-width: 100%;} #pdproductattributeslist .option_image a.hidden {
display: none;
#pdproductattributeslist .option_image a.hidden {display:none;} }
#pdproductattributeslist th.product_image {width:10%;} #pdproductattributeslist th.product_image {
width: 10%;
}
#pdproductattributeslist th.product_infos {} #pdproductattributeslist th.product_infos {}
#pdproductattributeslist th.product_price {width:12%;}
#pdproductattributeslist th.product_variant {width:10%;} #pdproductattributeslist th.product_price {
#pdproductattributeslist th.product_qty {width:10%;} width: 12%;
#pdproductattributeslist th.product_btn {width:12%;} }
#pdproductattributeslist th.product_variant {
width: 10%;
}
#pdproductattributeslist th.product_qty {
width: 10%;
}
#pdproductattributeslist th.product_btn {
width: 12%;
}
#pdproductattributeslist .footer_actions { background:#ddd; } #pdproductattributeslist .footer_actions {
background: #ddd;
}
#pdproductattributeslist b, #pdproductattributeslist strong { #pdproductattributeslist b,
#pdproductattributeslist strong {
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
display: inline-block; display: inline-block;
} }
#category .product-quantity > .col { #category .product-quantity>.col {
margin-bottom: .0rem; margin-bottom: .0rem;
} }
#pdproductattributeslist .option_gty .product-quantity {max-width:200px; } #pdproductattributeslist .option_gty .product-quantity {
max-width: 200px;
}
#pdproductattributeslist .product-quantity .qty {width:100%} #pdproductattributeslist .product-quantity .qty {
width: 100%
}
#pdproductattributeslist .add-to-cart-pdproductattributeslist { #pdproductattributeslist .add-to-cart-pdproductattributeslist {
width: 100%; width: 100%;
@@ -97,57 +119,58 @@ Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px This query will take effect for any screen smaller than 760px
and also iPads specifically. and also iPads specifically.
*/ */
@media @media only screen and (max-width: 760px),
only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
(min-device-width: 768px) and (max-device-width: 1024px) {
#pdproductattributeslist table { #pdproductattributeslist table {
width: 100%; width: 100%;
} }
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */
#pdproductattributeslist table, #pdproductattributeslist table,
#pdproductattributeslist thead, #pdproductattributeslist thead,
#pdproductattributeslist tbody, #pdproductattributeslist tbody,
#pdproductattributeslist th, #pdproductattributeslist th,
#pdproductattributeslist td, #pdproductattributeslist td,
#pdproductattributeslist tr { #pdproductattributeslist tr {
display: block; display: block;
} }
/* Hide table headers (but not display: none;, for accessibility) */ /* Hide table headers (but not display: none;, for accessibility) */
#pdproductattributeslist thead tr { #pdproductattributeslist thead tr {
position: absolute; position: absolute;
top: -9999px; top: -9999px;
left: -9999px; left: -9999px;
} }
#pdproductattributeslist tr { border: 1px solid #ccc; } #pdproductattributeslist tr {
border: 1px solid #ccc;
}
#pdproductattributeslist td { #pdproductattributeslist td {
/* Behave like a "row" */ /* Behave like a "row" */
border: none; border: none;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
position: relative; position: relative;
padding-left: 50%; padding-left: 50%;
} }
#pdproductattributeslist td:before { #pdproductattributeslist td:before {
/* Now like a table header */ /* Now like a table header */
position: absolute; position: absolute;
/* Top/left values mimic padding */ /* Top/left values mimic padding */
top: 6px; top: 6px;
left: 6px; left: 6px;
width: 45%; width: 45%;
padding-right: 10px; padding-right: 10px;
white-space: nowrap; white-space: nowrap;
/* Label the data */ /* Label the data */
content: attr(data-column); content: attr(data-column);
color: #000; color: #000;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
} }
#pdproductattributeslist .grid .product-description { #pdproductattributeslist .grid .product-description {
@@ -171,14 +194,16 @@ only screen and (max-width: 760px),
bottom: 6.375rem; bottom: 6.375rem;
} }
#pdproductattributeslist .grid .add-to-cart-or-refresh {text-align: center;} #pdproductattributeslist .grid .add-to-cart-or-refresh {
text-align: center;
}
#pdproductattributeslist .grid input.qtyfield { #pdproductattributeslist .grid input.qtyfield {
padding: 0 6px; padding: 0 6px;
margin: 0 5px 0 5px; margin: 0 5px 0 5px;
vertical-align: bottom; vertical-align: bottom;
display: inline; display: inline;
float: unset; float: unset;
} }
#pdproductattributeslist .grid .product-quantity input.qtyfield { #pdproductattributeslist .grid .product-quantity input.qtyfield {
@@ -189,7 +214,7 @@ only screen and (max-width: 760px),
border-radius: 5px; border-radius: 5px;
} }
#pdproductattributeslist .grid .product-quantity .qty { #pdproductattributeslist .grid .product-quantity .qty {
margin-right: 10px; margin-right: 10px;
} }
@@ -200,48 +225,66 @@ only screen and (max-width: 760px),
margin-bottom: 15px; margin-bottom: 15px;
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
border: 1px solid #d6d4d4; } border: 1px solid #d6d4d4;
#pdproductattributeslist .table-responsive > .table { }
margin-bottom: 0;
background-color: #fff; }
#pdproductattributeslist .table-responsive > .table > thead > tr > th,
#pdproductattributeslist .table-responsive > .table > thead > tr > td,
#pdproductattributeslist .table-responsive > .table > tbody > tr > th,
#pdproductattributeslist .table-responsive > .table > tbody > tr > td,
#pdproductattributeslist .table-responsive > .table > tfoot > tr > th,
#pdproductattributeslist .table-responsive > .table > tfoot > tr > td {
white-space: nowrap; }
#pdproductattributeslist .table-responsive > .table-bordered {
border: 0; }
#pdproductattributeslist .table-responsive > .table-bordered > thead > tr > th:first-child,
#pdproductattributeslist .table-responsive > .table-bordered > thead > tr > td:first-child,
#pdproductattributeslist .table-responsive > .table-bordered > tbody > tr > th:first-child,
#pdproductattributeslist .table-responsive > .table-bordered > tbody > tr > td:first-child,
#pdproductattributeslist .table-responsive > .table-bordered > tfoot > tr > th:first-child,
#pdproductattributeslist .table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0; }
#pdproductattributeslist .table-responsive > .table-bordered > thead > tr > th:last-child,
#pdproductattributeslist .table-responsive > .table-bordered > thead > tr > td:last-child,
#pdproductattributeslist .table-responsive > .table-bordered > tbody > tr > th:last-child,
#pdproductattributeslist .table-responsive > .table-bordered > tbody > tr > td:last-child,
#pdproductattributeslist .table-responsive > .table-bordered > tfoot > tr > th:last-child,
#pdproductattributeslist .table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0; }
#pdproductattributeslist .table-responsive > .table-bordered > thead > tr:last-child > th,
#pdproductattributeslist .table-responsive > .table-bordered > thead > tr:last-child > td,
#pdproductattributeslist .table-responsive > .table-bordered > tbody > tr:last-child > th,
#pdproductattributeslist .table-responsive > .table-bordered > tbody > tr:last-child > td,
#pdproductattributeslist .table-responsive > .table-bordered > tfoot > tr:last-child > th,
#pdproductattributeslist .table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0; }
#pdproductattributeslist tr.footer_actions td {height:50px;} #pdproductattributeslist .table-responsive>.table {
margin-bottom: 0;
background-color: #fff;
}
#pdproductattributeslist .table-responsive>.table>thead>tr>th,
#pdproductattributeslist .table-responsive>.table>thead>tr>td,
#pdproductattributeslist .table-responsive>.table>tbody>tr>th,
#pdproductattributeslist .table-responsive>.table>tbody>tr>td,
#pdproductattributeslist .table-responsive>.table>tfoot>tr>th,
#pdproductattributeslist .table-responsive>.table>tfoot>tr>td {
white-space: nowrap;
}
#pdproductattributeslist .table-responsive>.table-bordered {
border: 0;
}
#pdproductattributeslist .table-responsive>.table-bordered>thead>tr>th:first-child,
#pdproductattributeslist .table-responsive>.table-bordered>thead>tr>td:first-child,
#pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>th:first-child,
#pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>td:first-child,
#pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>th:first-child,
#pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>td:first-child {
border-left: 0;
}
#pdproductattributeslist .table-responsive>.table-bordered>thead>tr>th:last-child,
#pdproductattributeslist .table-responsive>.table-bordered>thead>tr>td:last-child,
#pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>th:last-child,
#pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>td:last-child,
#pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>th:last-child,
#pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>td:last-child {
border-right: 0;
}
#pdproductattributeslist .table-responsive>.table-bordered>thead>tr:last-child>th,
#pdproductattributeslist .table-responsive>.table-bordered>thead>tr:last-child>td,
#pdproductattributeslist .table-responsive>.table-bordered>tbody>tr:last-child>th,
#pdproductattributeslist .table-responsive>.table-bordered>tbody>tr:last-child>td,
#pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr:last-child>th,
#pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr:last-child>td {
border-bottom: 0;
}
#pdproductattributeslist tr.footer_actions td {
height: 50px;
}
} }
#pdproductattributeslist_grid .product-quantity, #pdproductattributeslist_grid .product-quantity,
#pdproductattributeslist_grid button.add-to-cart {width:100%;margin-top:10px;} #pdproductattributeslist_grid button.add-to-cart {
width: 100%;
margin-top: 10px;
}
#pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.form-control, #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.form-control,
#pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.input-group { #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.input-group {
@@ -249,5 +292,6 @@ only screen and (max-width: 760px),
height: 2.75rem; height: 2.75rem;
} }
#pdproductattributeslist_grid .product-quantity .bootstrap-touchspin {margin:0 auto;} #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin {
margin: 0 auto;
}

View File

@@ -1,107 +1,104 @@
{if $product_combinations} {if $product_combinations}
<div id="pdproductattributeslist" class="products"> <div id="pdproductattributeslist" class="products">
{if $block_heading} {if $block_heading}
<h3 class="idTabHrefShort page-product-heading">{l s='Select product combination' mod='pdproductattributeslist'}</h3> <h3 class="idTabHrefShort page-product-heading">{l s='Select product combination' mod='pdproductattributeslist'}</h3>
{/if} {/if}
<table id="pdproductattributeslist_table" class="table table-striped table-bordered table-labeled tablesorter" width="100%"> <table id="pdproductattributeslist_table" class="table table-striped table-bordered table-labeled tablesorter" width="100%">
<thead> <thead>
<tr> <tr>
<th class="product_image sorter-false filter-false">{l s='Image' mod='pdproductattributeslist'}</th> <th class="product_image sorter-false filter-false">{l s='Image' mod='pdproductattributeslist'}</th>
<th class="product_variant">{l s='Variant' mod='pdproductattributeslist'}</th> <th class="product_variant">{l s='Variant' mod='pdproductattributeslist'}</th>
<th class="product_infos sorter-false filter-false">{l s='Product informations' mod='pdproductattributeslist'}</th> <th class="product_infos sorter-false filter-false">{l s='Product informations' mod='pdproductattributeslist'}</th>
{if $show_prices} {if $show_prices}
<th class="product_price">{l s='Price (tax incl.)' mod='pdproductattributeslist'}</th> <th class="product_price">{l s='Price (tax incl.)' mod='pdproductattributeslist'}</th>
<th class="product_price">{l s='Price (tax excl.)' mod='pdproductattributeslist'}</th> <th class="product_price">{l s='Price (tax excl.)' mod='pdproductattributeslist'}</th>
{/if} {/if}
<th class="product_qty">{l s='Quantity in stock' mod='pdproductattributeslist'}</th> <th class="product_qty">{l s='Quantity in stock' mod='pdproductattributeslist'}</th>
{if !$is_catalog} {if !$is_catalog}
<th class="product_btn sorter-false filter-false">{l s='Select quantity' mod='pdproductattributeslist'}</th> <th class="product_btn sorter-false filter-false">{l s='Select quantity' mod='pdproductattributeslist'}</th>
{/if} {/if}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{foreach from=$product_combinations item=$combination} {foreach from=$product_combinations item=$combination}
<tr class="product_combination_{if ($combination@index % 2)}alternate_{/if}item"> <tr class="product_combination_{if ($combination@index % 2)}alternate_{/if}item">
<td data-column="{l s='Image' mod='pdproductattributeslist'}" class="option_image"> <td data-column="{l s='Image' mod='pdproductattributeslist'}" class="option_image">
{foreach from=$combination.images item=$img} {foreach from=$combination.images item=$img}
<a href="{$img.large_default}" rel="group_{$combination.id_product_attribute}" class="{if ($img@index > 0)}hidden {/if}fancybox"> <a href="{$img.large_default}" rel="group_{$combination.id_product_attribute}" class="{if ($img@index > 0)}hidden {/if}fancybox">
<img width="{$cartSize.width}" height="{$cartSize.height}" class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" /> <img class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" />
</a> </a>
{/foreach} {/foreach}
</td> </td>
<td data-column="{l s='Product variant' mod='pdproductattributeslist'}" class="option_variant"> <td data-column="{l s='Product variant' mod='pdproductattributeslist'}" class="option_variant">
{$combination.attribute_name_html nofilter} {$combination.attribute_name_html nofilter}
</td> </td>
<td data-column="{l s='Informations' mod='pdproductattributeslist'}" class="option_infos text-xs-left"> <td data-column="{l s='Informations' mod='pdproductattributeslist'}" class="option_infos text-xs-left">
{if isset($combination.reference) AND $combination.reference} {if isset($combination.reference) AND $combination.reference}
{l s='Reference' mod='pdproductattributeslist'}: <b>{$combination.reference}</b> {l s='Reference' mod='pdproductattributeslist'}: <b>{$combination.reference}</b>
{/if} {/if}
{if !empty($combination.ean13)} {if !empty($combination.ean13)}
<br />{l s='Ean' mod='pdproductattributeslist'}: <b>{$combination.ean13}</b> <br />{l s='Ean' mod='pdproductattributeslist'}: <b>{$combination.ean13}</b>
{/if} {/if}
</td> </td>
{if $show_prices} {if $show_prices}
<td data-column="{l s='Price tax incl.' mod='pdproductattributeslist'}" class="option_price"> <td data-column="{l s='Price tax incl.' mod='pdproductattributeslist'}" class="option_price">
<span class="price product-price"> <span class="price product-price">
{Tools::displayPrice($combination.price)} {Tools::displayPrice($combination.price)}
</span> </span>
{if $combination.price != $combination.price_old} {if $combination.price != $combination.price_old}
<br /> <br />
<span class="old_price"> <span class="old_price">
{Tools::displayPrice($combination.price_old)} {Tools::displayPrice($combination.price_old)}
</span> </span>
{/if} {/if}
</td> </td>
<td data-column="{l s='Price tax excl.' mod='pdproductattributeslist'}" class="option_price"> <td data-column="{l s='Price tax excl.' mod='pdproductattributeslist'}" class="option_price">
<span class="price product-price"> <span class="price product-price">
{Tools::displayPrice($combination.price_tax_excl)} {Tools::displayPrice($combination.price_tax_excl)}
</span> </span>
<br /> <br />
{if $combination.price_tax_excl != $combination.price_old_tax_excl} {if $combination.price_tax_excl != $combination.price_old_tax_excl}
<span class="old_price"> <span class="old_price">
{Tools::displayPrice($combination.price_old_tax_excl)} {Tools::displayPrice($combination.price_old_tax_excl)}
</span> </span>
{/if} {/if}
</td> </td>
{/if} {/if}
<td data-column="{l s='Quantity on stock' mod='pdproductattributeslist'}" class="option_price"> <td data-column="{l s='Quantity on stock' mod='pdproductattributeslist'}" class="option_price">
<b>{$combination.quantity}</b> {l s='pcs' mod='pdproductattributeslist'} <b>{if $combination.quantity <= 10 }{$combination.quantity}{else}>10{/if}</b> {l s='pcs' mod='pdproductattributeslist'}
</td> </td>
{if !$is_catalog} {if !$is_catalog}
<td data-id-product="{$combination.id_product|intval}" data-id-product-attribute="{$combination.id_product_attribute|intval}" data-column="{l s='Select quantity' mod='pdproductattributeslist'}" class="option_gty"> <td data-id-product="{$combination.id_product|intval}" data-id-product-attribute="{$combination.id_product_attribute|intval}" data-column="{l s='Select quantity' mod='pdproductattributeslist'}" class="option_gty">
<div class="row extra-small-gutters product-quantity"> <div class="row extra-small-gutters product-quantity">
<input type="number" name="qty" inputmode="numeric" pattern="[0-9]*" class="quantity input-group form-control" min="0" value="0"/> <input type="number" name="qty" inputmode="numeric" pattern="[0-9]*" class="quantity input-group form-control" min="0" value="0" />
</div> </div>
</td> </td>
{/if} {/if}
</tr> </tr>
{/foreach} {/foreach}
</tbody> </tbody>
</table> </table>
<div class="footer_actions"> <div class="footer_actions">
<button <button class="btn btn-lg btn-primary add-to-cart-pdproductattributeslist pull-right" type="button">
class="btn btn-lg btn-primary add-to-cart-pdproductattributeslist pull-right" {l s='Add selected to cart' mod='pdproductattributeslist'}
type="button"> </button>
{l s='Add selected to cart' mod='pdproductattributeslist'}
</button>
</div> </div>
</div> </div>
{/if} {/if}

View File

@@ -26,11 +26,9 @@
{foreach from=$product_combinations item=$combination} {foreach from=$product_combinations item=$combination}
<tr class="product_combination_{if ($combination@index % 2)}alternate_{/if}item"> <tr class="product_combination_{if ($combination@index % 2)}alternate_{/if}item">
<td data-column="{l s='Image' mod='pdproductattributeslist'}" class="option_image"> <td data-column="{l s='Image' mod='pdproductattributeslist'}" class="option_image">
{foreach from=$combination.images item=$img} {foreach from=$combination.images item=$img}
<a href="{$img.large_default}" rel="group_{$combination.id_product_attribute}" class="{if ($img@index > 0)}hidden {/if}fancybox"> <a href="{$img.large_default}" rel="group_{$combination.id_product_attribute}" class="{if ($img@index > 0)}hidden {/if}fancybox">
<img width="{$cartSize.width}" height="{$cartSize.height}" class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" /> <img class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" />
</a> </a>
{/foreach} {/foreach}
@@ -79,7 +77,7 @@
{/if} {/if}
<td data-column="{l s='Quantity on stock' mod='pdproductattributeslist'}" class="option_price"> <td data-column="{l s='Quantity on stock' mod='pdproductattributeslist'}" class="option_price">
<b>{$combination.quantity}</b> {l s='pcs' mod='pdproductattributeslist'} <b>{if $combination.quantity <= 10 }{$combination.quantity}{else}>10{/if}</b> {l s='pcs' mod='pdproductattributeslist'}
</td> </td>
{if !$is_catalog} {if !$is_catalog}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -553,12 +553,29 @@ a[href="https://redline.com.pl/pl/zamówienie?newAddress=invoice"] {
} }
} }
#pdproductattributeslist {
th {
white-space: nowrap;
&:last-child {
width: 130px;
}
}
}
.product_combination_item, .product_combination_item,
.product_combination_alternate_item { .product_combination_alternate_item {
.option_image {
img {
width: 100%;
max-width: 75px;
}
}
.input-group { .input-group {
border: 0 !important; border: 0 !important;
display: flex !important; display: flex !important;
width: 140px; width: 110px;
gap: 5px; gap: 5px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -566,7 +583,7 @@ a[href="https://redline.com.pl/pl/zamówienie?newAddress=invoice"] {
button.bootstrap-touchspin-down, button.bootstrap-touchspin-down,
button.bootstrap-touchspin-up { button.bootstrap-touchspin-up {
border: 1px solid #eee; border: 1px solid #eee;
width: 40px; width: 30px;
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@@ -7,250 +7,229 @@
*} *}
<section id="main" class="product-detail detail-3382420090 product-image-thumbs product-thumbs-bottom" itemscope itemtype="https://schema.org/Product"> <section id="main" class="product-detail detail-3382420090 product-image-thumbs product-thumbs-bottom" itemscope itemtype="https://schema.org/Product">
<meta itemprop="url" content="{$product.url}"><div class="row"><div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12 col-sp-12"> <meta itemprop="url" content="{$product.url}">
<div class="row">
<div class="col-md-5 col-lg-5 col-xl-5 col-sm-12 col-xs-12 col-sp-12">
{block name='page_content_container'} {block name='page_content_container'}
<section class="page-content" id="content" data-templateview="bottom" data-numberimage="5" data-numberimage1200="4" data-numberimage992="4" data-numberimage768="3" data-numberimage576="3" data-numberimage480="2" data-numberimage360="2" data-templatemodal="1" data-templatezoomtype="in" data-zoomposition="right" data-zoomwindowwidth="400" data-zoomwindowheight="400"> <section class="page-content" id="content" data-templateview="bottom" data-numberimage="5" data-numberimage1200="4" data-numberimage992="4" data-numberimage768="3" data-numberimage576="3" data-numberimage480="2" data-numberimage360="2" data-templatemodal="1" data-templatezoomtype="in" data-zoomposition="right" data-zoomwindowwidth="400" data-zoomwindowheight="400">
{block name='page_content'} {block name='page_content'}
<div class="images-container"> <div class="images-container">
{block name='product_cover_thumbnails'} {block name='product_cover_thumbnails'}
{if $isMobile && $dmobile_swipe} {if $isMobile && $dmobile_swipe}
<div class="list-images-mobile"> <div class="list-images-mobile">
{foreach from=$product.images item=image} {foreach from=$product.images item=image}
<div> <div>
<img <img class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}" data-image-medium-src="{$image.bySize.medium_default.url}" data-image-large-src="{$image.bySize.large_default.url}" src="{$image.bySize.large_default.url}" alt="{$image.legend}" title="{$image.legend}" itemprop="image">
class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}" </div>
data-image-medium-src="{$image.bySize.medium_default.url}" {/foreach}
data-image-large-src="{$image.bySize.large_default.url}"
src="{$image.bySize.large_default.url}"
alt="{$image.legend}"
title="{$image.legend}"
itemprop="image"
>
</div>
{/foreach}
</div>
{else}
{block name='product_cover'}
<div class="product-cover">
{block name='product_flags'}
<ul class="product-flags">
{foreach from=$product.flags item=flag}
<li class="product-flag {$flag.type}">{$flag.label}</li>
{/foreach}
</ul>
{/block}
{if $product.cover}
<img id="zoom_product" data-type-zoom="" class="js-qv-product-cover img-fluid" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" itemprop="image">
<div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
<i class="material-icons zoom-in">&#xE8FF;</i>
</div>
{else}
<img id="zoom_product" data-type-zoom="" class="js-qv-product-cover img-fluid" src="{$urls.no_picture_image.bySize.large_default.url}" alt="{$product.name}" title="{$product.name}" itemprop="image">
{/if}
</div>
{/block}
{block name='product_images'}
<div id="thumb-gallery" class="product-thumb-images">
{if $product.cover}
{foreach from=$product.images item=image}
<div class="thumb-container {if $image.id_image == $product.cover.id_image} active {/if}">
<a href="javascript:void(0)" data-image="{$image.bySize.large_default.url}" data-zoom-image="{$image.bySize.large_default.url}">
<img
class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
data-image-medium-src="{$image.bySize.medium_default.url}"
data-image-large-src="{$image.bySize.large_default.url}"
src="{$image.bySize.home_default.url}"
alt="{$image.legend}"
title="{$image.legend}"
itemprop="image"
>
</a>
</div> </div>
{/foreach} {else}
{else} {block name='product_cover'}
<div class="thumb-container"> <div class="product-cover">
<a href="javascript:void(0)" data-image="{$urls.no_picture_image.bySize.large_default.url}" data-zoom-image="{$urls.no_picture_image.bySize.large_default.url}"> {block name='product_flags'}
<img <ul class="product-flags">
class="thumb js-thumb img-fluid" {foreach from=$product.flags item=flag}
data-image-medium-src="{$urls.no_picture_image.bySize.medium_default.url}" <li class="product-flag {$flag.type}">{$flag.label}</li>
data-image-large-src="{$urls.no_picture_image.bySize.large_default.url}" {/foreach}
src="{$urls.no_picture_image.bySize.home_default.url}" </ul>
alt="{$product.name}" {/block}
title="{$product.name}" {if $product.cover}
itemprop="image" <img id="zoom_product" data-type-zoom="" class="js-qv-product-cover img-fluid" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" itemprop="image">
> <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
</a> <i class="material-icons zoom-in">&#xE8FF;</i>
</div> </div>
{/if} {else}
</div> <img id="zoom_product" data-type-zoom="" class="js-qv-product-cover img-fluid" src="{$urls.no_picture_image.bySize.large_default.url}" alt="{$product.name}" title="{$product.name}" itemprop="image">
{/if}
</div>
{/block}
{if $product.images|@count > 1} {block name='product_images'}
<div class="arrows-product-fake slick-arrows"> <div id="thumb-gallery" class="product-thumb-images">
<button class="slick-prev slick-arrow" aria-label="Previous" type="button" >{l s='Previous' d='Shop.Theme.Catalog'}</button> {if $product.cover}
<button class="slick-next slick-arrow" aria-label="Next" type="button">{l s='Next' d='Shop.Theme.Catalog'}</button> {foreach from=$product.images item=image}
</div> <div class="thumb-container {if $image.id_image == $product.cover.id_image} active {/if}">
{/if} <a href="javascript:void(0)" data-image="{$image.bySize.large_default.url}" data-zoom-image="{$image.bySize.large_default.url}">
{/block} <img class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}" data-image-medium-src="{$image.bySize.medium_default.url}" data-image-large-src="{$image.bySize.large_default.url}" src="{$image.bySize.home_default.url}" alt="{$image.legend}" title="{$image.legend}" itemprop="image">
{/if} </a>
{/block} </div>
{hook h='displayAfterProductThumbs'} {/foreach}
</div> {else}
{/block} <div class="thumb-container">
</section> <a href="javascript:void(0)" data-image="{$urls.no_picture_image.bySize.large_default.url}" data-zoom-image="{$urls.no_picture_image.bySize.large_default.url}">
{/block} <img class="thumb js-thumb img-fluid" data-image-medium-src="{$urls.no_picture_image.bySize.medium_default.url}" data-image-large-src="{$urls.no_picture_image.bySize.large_default.url}" src="{$urls.no_picture_image.bySize.home_default.url}" alt="{$product.name}" title="{$product.name}" itemprop="image">
</a>
</div>
{/if}
</div>
{block name='product_images_modal'} {if $product.images|@count > 1}
{include file='catalog/_partials/product-images-modal.tpl'} <div class="arrows-product-fake slick-arrows">
{/block} <button class="slick-prev slick-arrow" aria-label="Previous" type="button">{l s='Previous' d='Shop.Theme.Catalog'}</button>
</div><div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12 col-sp-12"> <button class="slick-next slick-arrow" aria-label="Next" type="button">{l s='Next' d='Shop.Theme.Catalog'}</button>
{block name='page_header_container'} </div>
{block name='page_header'} {/if}
<h1 class="h1 product-detail-name" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> {/block}
{/block} {/if}
{/block}
{block name='product_prices'}
{include file='catalog/_partials/product-prices.tpl'}
{/block}
{if $product.is_customizable && count($product.customizations.fields)}
{block name='product_customization'}
{include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
{/block}
{/if}
<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} {/block}
{/foreach} {hook h='displayAfterProductThumbs'}
</div>
{/block}
</section> </section>
{/if}
{/block} {/block}
{block name='product_discounts'} {block name='product_images_modal'}
{include file='catalog/_partials/product-discounts.tpl'} {include file='catalog/_partials/product-images-modal.tpl'}
{/block}
</div>
<div class="col-md-7 col-lg-7 col-xl-7 col-sm-12 col-xs-12 col-sp-12">
{block name='page_header_container'}
{block name='page_header'}
<h1 class="h1 product-detail-name" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
{/block}
{/block}
{block name='product_prices'}
{include file='catalog/_partials/product-prices.tpl'}
{/block} {/block}
{block name='product_add_to_cart'} {if $product.is_customizable && count($product.customizations.fields)}
{include file='catalog/_partials/product-add-to-cart.tpl'} {block name='product_customization'}
{/block} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
{/block}
{/if}
<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_refresh'} {block name='product_variants'}
<input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}"> {include file='catalog/_partials/product-variants.tpl'}
{/block} {/block}
</form>
{/block}
</div>
{block name='product_description_short'}
<div id="product-description-short-{$product.id}" class="description-short" itemprop="description">{$product.description_short nofilter}</div>
{/block}
{block name='product_after_cart_button'}
{include file='catalog/_partials/product-after-cart-button.tpl'}
{/block}
{block name='product_additional_info'}
{include file='catalog/_partials/product-additional-info.tpl'}
{/block}
{hook h='displayLeoProductReviewExtra' product=$product}
{block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/block}
</div><div class="col-md-12 col-lg-12 col-xl-12 col-sm-12 col-xs-12 col-sp-12">
{include file="sub/product_info/tab.tpl"}
{block name='product_accessories'}
{if $accessories}
<section class="product-accessories clearfix">
<h3 class="h5 products-section-title">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
<div class="products">
<div class="owl-row {if isset($productClassWidget)} {$productClassWidget}{/if}">
<div id="category-products2">
{foreach from=$accessories item="product_accessory"}
<div class="item{if $smarty.foreach.mypLoop.index == 0} first{/if}">
{block name='product_miniature'}
{if isset($productProfileDefault) && $productProfileDefault}
{hook h='displayLeoProfileProduct' product=$product_accessory profile=$productProfileDefault} {block name='product_pack'}
{else} {if $packItems}
{include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory} <section class="product-pack">
{/if} <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3>
{/block} {foreach from=$packItems item="product_pack"}
</div> {block name='product_miniature'}
{/foreach} {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack}
</div> {/block}
</div> {/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}
</div> </div>
</section> {block name='product_description_short'}
{/if} <div id="product-description-short-{$product.id}" class="description-short" itemprop="description">{$product.description_short nofilter}</div>
{/block} {/block}
{block name='product_after_cart_button'}
{include file='catalog/_partials/product-after-cart-button.tpl'}
{/block}
{block name='product_additional_info'}
{include file='catalog/_partials/product-additional-info.tpl'}
{/block}
{hook h='displayLeoProductReviewExtra' product=$product}
{block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/block}
{hook h='displayCustomAttributesListTable' product=$product}
</div>
<div class="col-md-12 col-lg-12 col-xl-12 col-sm-12 col-xs-12 col-sp-12">
{include file="sub/product_info/tab.tpl"}
{block name='product_accessories'}
{if $accessories}
<section class="product-accessories clearfix">
<h3 class="h5 products-section-title">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
<div class="products">
<div class="owl-row {if isset($productClassWidget)} {$productClassWidget}{/if}">
<div id="category-products2">
{foreach from=$accessories item="product_accessory"}
<div class="item{if $smarty.foreach.mypLoop.index == 0} first{/if}">
{block name='product_miniature'}
{if isset($productProfileDefault) && $productProfileDefault}
<script type="text/javascript"> {hook h='displayLeoProfileProduct' product=$product_accessory profile=$productProfileDefault}
{else}
products_list_functions.push( {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
function(){ {/if}
$('#category-products2').owlCarousel({ {/block}
{if isset($IS_RTL) && $IS_RTL} </div>
direction:'rtl', {/foreach}
{else} </div>
direction:'ltr', </div>
</div>
</section>
{/if} {/if}
items : 4, {/block}
itemsCustom : false,
itemsDesktop : [1200, 4],
itemsDesktopSmall : [992, 3],
itemsTablet : [768, 2],
itemsTabletSmall : false,
itemsMobile : [480, 1],
singleItem : false, // true : show only 1 item
itemsScaleUp : false,
slideSpeed : 200, // change speed when drag and drop a item
paginationSpeed :800, // change speed when go next page
autoPlay : false, // time to show each item <script type="text/javascript">
stopOnHover : false, products_list_functions.push(
navigation : true, function() {
navigationText : ["&lsaquo;", "&rsaquo;"], $('#category-products2').owlCarousel({
{if isset($IS_RTL) && $IS_RTL}
direction: 'rtl',
{else}
direction: 'ltr',
{/if}
items: 4,
itemsCustom: false,
itemsDesktop: [1200, 4],
itemsDesktopSmall: [992, 3],
itemsTablet: [768, 2],
itemsTabletSmall: false,
itemsMobile: [480, 1],
singleItem: false, // true : show only 1 item
itemsScaleUp: false,
slideSpeed: 200, // change speed when drag and drop a item
paginationSpeed: 800, // change speed when go next page
scrollPerPage :true, autoPlay: false, // time to show each item
responsive :true, stopOnHover: false,
navigation: true,
navigationText: ["&lsaquo;", "&rsaquo;"],
pagination : false, scrollPerPage: true,
paginationNumbers : false, responsive: true,
addClassActive : true, pagination: false,
paginationNumbers: false,
mouseDrag : true, addClassActive: true,
touchDrag : true,
}); mouseDrag: true,
} touchDrag: true,
);
</script>
{block name='product_footer'}
{hook h='displayFooterProduct' product=$product category=$category}
{/block}
</div></div>
{block name='page_footer_container'}
<footer class="page-footer">
{block name='page_footer'}
<!-- Footer content -->
{/block}
</footer>
{/block}
</section>
});
}
);
</script>
{block name='product_footer'}
{hook h='displayFooterProduct' product=$product category=$category}
{/block}
</div>
</div>
{block name='page_footer_container'}
<footer class="page-footer">
{block name='page_footer'}
<!-- Footer content -->
{/block}
</footer>
{/block}
</section>