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

@@ -84,7 +84,7 @@
},
".htaccess": {
"type": "-",
"size": 7187,
"size": 8650,
"lmtime": 0,
"modified": true
},
@@ -165,8 +165,8 @@
"hook": {
"hookDisplayCustomAttributesListTable.tpl": {
"type": "-",
"size": 4389,
"lmtime": 1748606574370,
"size": 4955,
"lmtime": 1748644085323,
"modified": false
},
"hookDisplayProductTabContentGrid.tpl": {
@@ -177,8 +177,8 @@
},
"hookDisplayProductTabContent.tpl": {
"type": "-",
"size": 4376,
"lmtime": 1748606552626,
"size": 4370,
"lmtime": 1748644044682,
"modified": false
},
"hookDisplayProductTab.tpl": {
@@ -241,6 +241,14 @@
"modified": false
},
"widgets": {}
},
"css": {
"pdproductattributeslist.css": {
"type": "-",
"size": 7566,
"lmtime": 1748643402935,
"modified": false
}
}
}
}
@@ -523,20 +531,20 @@
},
"custom.css": {
"type": "-",
"size": 8197,
"lmtime": 1748608302643,
"size": 8419,
"lmtime": 1748644195810,
"modified": false
},
"custom.css.map": {
"type": "-",
"size": 20557,
"lmtime": 1748608302643,
"size": 21048,
"lmtime": 1748644195810,
"modified": false
},
"custom.scss": {
"type": "-",
"size": 8976,
"lmtime": 1748608302472,
"size": 9169,
"lmtime": 1748644195710,
"modified": false
},
"error.css": {
@@ -560,13 +568,13 @@
"theme.css": {
"type": "-",
"size": 446074,
"lmtime": 1748607016213,
"lmtime": 1748643406903,
"modified": false
},
"theme.css.map": {
"type": "-",
"size": 1353289,
"lmtime": 1748607016213,
"lmtime": 1748643406903,
"modified": false
},
"theme.rtlfix": {
@@ -6279,13 +6287,13 @@
"styles.css": {
"type": "-",
"size": 155697,
"lmtime": 1748607016213,
"lmtime": 1748643406903,
"modified": false
},
"styles.css.map": {
"type": "-",
"size": 449510,
"lmtime": 1748607016213,
"lmtime": 1748643406903,
"modified": false
},
"styles.scss": {
@@ -6384,8 +6392,8 @@
},
"detail3382420090.tpl": {
"type": "-",
"size": 10985,
"lmtime": 1748606866880,
"size": 11704,
"lmtime": 1748643991780,
"modified": false
},
"product_accessories.tpl": {
@@ -8685,7 +8693,7 @@
"product.tpl": {
"type": "-",
"size": 9929,
"lmtime": 1748606889649,
"lmtime": 1748643879387,
"modified": false
},
"suppliers.tpl": {

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">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -615,4 +615,18 @@ a[href="https://redline.com.pl/pl/zamówienie?newAddress=invoice"] {
content: '' !important;
}
}
}
.idTabHrefShort.page-product-heading {
display: none;
}
#pdproductattributeslist {
margin: 10px 0 20px !important;
.footer_actions {
.pull-right {
float: none !important;
}
}
}

View File

@@ -9,7 +9,7 @@
<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-5 col-lg-5 col-xl-5 col-sm-12 col-xs-12 col-sp-12">
<div class="col-md-4 col-lg-4 col-xl-4 col-sm-12 col-xs-12 col-sp-12">
{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">
@@ -83,7 +83,7 @@
{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">
<div class="col-md-8 col-lg-8 col-xl-8 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>
@@ -93,12 +93,12 @@
{include file='catalog/_partials/product-prices.tpl'}
{/block}
{if $product.is_customizable && count($product.customizations.fields)}
{* {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">
{/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}">
@@ -135,21 +135,21 @@
{/block}
</form>
{/block}
</div>
</div> *}
{hook h='displayCustomAttributesListTable' product=$product}
{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'}
{* {block name='product_after_cart_button'}
{include file='catalog/_partials/product-after-cart-button.tpl'}
{/block}
{block name='product_additional_info'}
{/block} *}
{* {block name='product_additional_info'}
{include file='catalog/_partials/product-additional-info.tpl'}
{/block}
{hook h='displayLeoProductReviewExtra' product=$product}
{/block} *}
{* {hook h='displayLeoProductReviewExtra' product=$product}
{block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/block}
{hook h='displayCustomAttributesListTable' product=$product}
{/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"}