Refactor product detail layout and styles

- Adjusted column sizes in the product detail template for better responsiveness.
- Updated CSS to hide the short ID tab and modify margins for product attributes list.
- Commented out conditional blocks for product customization and additional info to streamline the template.
This commit is contained in:
2025-06-10 00:33:01 +02:00
parent c26eb99b18
commit 271a674f6a
8 changed files with 68 additions and 46 deletions

View File

@@ -449,7 +449,7 @@ class PdProductAttributesList extends Module
$return[$r['id_product_attribute']]['id_product'] = $id_product;
$return[$r['id_product_attribute']]['id_product_attribute'] = $r['id_product_attribute'];
$return[$r['id_product_attribute']]['attribute_name'] .= rtrim(Tools::ucfirst($r['group_name']).': '.Tools::ucfirst($r['attribute_name']).', ', ',');
$return[$r['id_product_attribute']]['attribute_name_html'] .= $r['group_name'].': <b>'.$r['attribute_name'].'</b><br />';
$return[$r['id_product_attribute']]['attribute_name_html'] .= '<b>'.$r['attribute_name'].'</b><br />';
$return[$r['id_product_attribute']]['reference'] = $r['reference'] ? $r['reference'] : '';
$return[$r['id_product_attribute']]['ean13'] = $r['ean13'] ? $r['ean13'] : '';
$return[$r['id_product_attribute']]['mpn'] = $r['mpn'] ? $r['mpn'] : '';

View File

@@ -68,8 +68,8 @@ let PdProductAttributesList = {
step: 1,
decimals: 0,
verticalbuttons: true,
verticaldownclass: 'fa fa-angle-down touchspin-down bootstrap-touchspin-down material-icons touchspin-down',
verticalupclass: 'fa fa-angle-up touchspin-up bootstrap-touchspin-up material-icons touchspin-up',
verticaldownclass: 'fa fa-minus touchspin-down bootstrap-touchspin-down material-icons touchspin-down',
verticalupclass: 'fa fa-plus touchspin-up bootstrap-touchspin-up material-icons touchspin-up',
buttondown_class: 'btn btn-touchspin js-touchspin ',
buttonup_class: 'btn btn-touchspin js-touchspin '
});
@@ -80,8 +80,8 @@ let PdProductAttributesList = {
step: 1,
decimals: 0,
verticalbuttons: true,
verticaldownclass: 'fa fa-angle-down touchspin-down bootstrap-touchspin-down material-icons touchspin-down',
verticalupclass: 'fa fa-angle-up touchspin-up bootstrap-touchspin-up material-icons touchspin-up',
verticaldownclass: 'fa fa-minus touchspin-down bootstrap-touchspin-down material-icons touchspin-down',
verticalupclass: 'fa fa-plus touchspin-up bootstrap-touchspin-up material-icons touchspin-up',
buttondown_class: 'btn btn-touchspin js-touchspin ',
buttonup_class: 'btn btn-touchspin js-touchspin '
});

View File

@@ -8,13 +8,13 @@
<thead>
<tr>
<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_infos sorter-false filter-false">{l s='Product informations' mod='pdproductattributeslist'}</th>
{if $show_prices}
<th class="product_price">{l s='Price (tax incl.)' mod='pdproductattributeslist'}</th>
<th class="product_price">{l s='Price (tax excl.)' mod='pdproductattributeslist'}</th>
{/if}
<th class="product_qty">{l s='Quantity in stock' mod='pdproductattributeslist'}</th>
<th class="product_variant">{l s='Variant' mod='pdproductattributeslist'}</th>
{if !$is_catalog}
<th class="product_btn sorter-false filter-false">{l s='Select quantity' mod='pdproductattributeslist'}</th>
{/if}
@@ -34,18 +34,13 @@
</td>
<td data-column="{l s='Product variant' mod='pdproductattributeslist'}" class="option_variant">
{$combination.attribute_name_html nofilter}
</td>
<td data-column="{l s='Informations' mod='pdproductattributeslist'}" class="option_infos text-xs-left">
{if isset($combination.reference) AND $combination.reference}
{l s='Reference' mod='pdproductattributeslist'}: <b>{$combination.reference}</b>
<b>{$combination.reference}</b>
{/if}
{if !empty($combination.ean13)}
<br />{l s='Ean' mod='pdproductattributeslist'}: <b>{$combination.ean13}</b>
<br /><b>{$combination.ean13}</b>
{/if}
</td>
@@ -80,6 +75,11 @@
<b>{if $combination.quantity <= 10 }{$combination.quantity}{else}>10{/if}</b> {l s='pcs' mod='pdproductattributeslist'}
</td>
<td data-column="{l s='Product variant' mod='pdproductattributeslist'}" class="option_variant">
{$combination.attribute_name_html nofilter}
</td>
{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">
<div class="row extra-small-gutters product-quantity">