This commit is contained in:
Roman Pyrih
2026-05-05 16:01:40 +02:00
parent 59410b9825
commit 4bbd4973b9
6 changed files with 244 additions and 165 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -289,9 +289,9 @@ body#product .product-minimal-quantity {
margin-left: 22px; margin-left: 22px;
} }
body#product .product-variants { // body#product .product-variants {
margin-top: 40px; // margin-top: 40px;
} // }
body:not(#index) #top_column { body:not(#index) #top_column {
display: none; display: none;
@@ -712,9 +712,6 @@ h6 a {
} }
#button-mirror-reflection { #button-mirror-reflection {
margin-top: 20px;
display: inline-block;
float: left;
// margin-left: 30px; // margin-left: 30px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@@ -3598,6 +3595,44 @@ body#product {
padding: 17px 0; padding: 17px 0;
border-bottom: 1px solid #8c8c8c; border-bottom: 1px solid #8c8c8c;
&.product-box-acc {
&.active {
.product-box--head {
&::after {
height: 1px;
}
}
}
.product-box--head {
cursor: pointer;
&::before {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 23px;
height: 1px;
background: #3c3c3c;
border-radius: 3px;
}
&::after {
content: '';
position: absolute;
top: 50%;
right: 11px;
transform: translateY(-50%);
width: 1px;
height: 23px;
background: #3c3c3c;
border-radius: 3px;
transition: all 0.3s ease-in-out;
}
}
}
.block-title { .block-title {
font-family: 'Inter'; font-family: 'Inter';
font-weight: 700; font-weight: 700;
@@ -3609,31 +3644,9 @@ body#product {
.product-box--head { .product-box--head {
position: relative; position: relative;
}
&::before { .product-box--data {
content: ''; display: none;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 23px;
height: 1px;
background: #3c3c3c;
border-radius: 3px;
}
&::after {
content: '';
position: absolute;
top: 50%;
right: 11px;
transform: translateY(-50%);
width: 1px;
height: 23px;
background: #3c3c3c;
border-radius: 3px;
transition: all 0.3s ease-in-out;
}
} }
} }
@@ -3923,7 +3936,7 @@ body#product .product-size-data .product-size-data--new {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
gap: 16px; gap: 16px;
padding: 12px 0; padding: 12px 0;
@@ -3952,37 +3965,6 @@ body#product .product-size-data .product-size-data--new {
text-decoration: underline; text-decoration: underline;
} }
} }
#button-mirror-reflection {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 4px;
transition:
border-color 0.15s,
background 0.15s;
&:hover {
border-color: #7d6e4f;
background: rgba(125, 110, 79, 0.05);
}
.product-bar-icon img {
width: 24px;
height: auto;
display: block;
}
.button-mirror-reflection-label {
margin: 0;
font-family: Inter, sans-serif;
font-size: 14px;
color: #333;
}
}
} }
// ============================================================================ // ============================================================================
@@ -4042,5 +4024,68 @@ body#product {
} }
} }
} }
.product-variants {
width: 100%;
background: transparent !important;
.product-variants-item {
&.variant-item-id-4 {
margin-top: 25px;
ul#group_4 {
display: flex;
flex-direction: row;
}
.control-label {
display: none !important;
}
.wariant_kolorystyczny {
width: 100%;
max-width: 130px;
}
}
}
}
.variant-action-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 4px;
transition: border-color 0.15s, background 0.15s;
&:hover {
border-color: #7d6e4f;
background: rgba(125, 110, 79, 0.05);
}
.product-bar-icon {
width: 30px;
height: 30px;
margin: 0 !important;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.product-bar-box {
font-size: 14px;
font-weight: 400;
p {
width: max-content;
font-size: 14px;
}
}
}
} }
} }

View File

@@ -1326,4 +1326,13 @@ if (!window.__p02p04Bound) {
$(document).on('updatedProduct', function() { $(document).on('updatedProduct', function() {
setTimeout(window.__p02p04RecalcPrice, 50); setTimeout(window.__p02p04RecalcPrice, 50);
}); });
} }
// product custom accordion for variants
$(function() {
$('body').on('click', '.product-box.product-box-acc .product-box--head', function() {
$(this).parent().toggleClass('active');
$(this).parent().find('.product-box--data').slideToggle();
});
})

View File

@@ -25,76 +25,86 @@
<div class="product-variants"> <div class="product-variants">
{foreach from=$groups key=id_attribute_group item=group} {foreach from=$groups key=id_attribute_group item=group}
{if $id_attribute_group == 5}<a rel="nofollow" href="javascript:void(0);" class="fancybox-material-controls">{/if} {if $id_attribute_group == 5}<a rel="nofollow" href="javascript:void(0);" class="fancybox-material-controls">{/if}
<div class="clearfix product-variants-item"> <div class="clearfix product-variants-item variant-item-id-{$id_attribute_group}">
{if $group.group_type == 'select' && $product_variant_mode == 1} {if $group.group_type == 'select' && $product_variant_mode == 1}
<div class="product-bar-label"> {if $id_attribute_group == 5}
<p>2.</p> <div class="variant-action-btn">
{/if}
<div class="product-bar-icon material-icon">
<img src="/themes/ayon/assets/images/struktura-materialu.png" alt="">
{* <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19.51 3.08L3.08 19.51c.09.34.27.65.51.9.25.24.56.42.9.51L20.93 4.49c-.19-.69-.73-1.23-1.42-1.41zM11.88 3L3 11.88v2.83L14.71 3h-2.83zM5 3c-1.1 0-2 .9-2 2v2l4-4H5zm14 18c.55 0 1.05-.22 1.41-.59.37-.36.59-.86.59-1.41v-2l-4 4h2zm-9.71 0h2.83L21 12.12V9.29L9.29 21z"/>
</svg> *}
</div>
<div class="product-bar-box">
{if $id_attribute_group == 5}
<span class="control-label 1">Struktura materiału</span>
{else}
<span class="control-label 2">{$group.name}:</span>
{/if}
<select class="form-control form-control-select {if $id_attribute_group == 5}hidden{/if}"
id="group_{$id_attribute_group}" data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute}" title="{$group_attribute.name}" {if $group_attribute.selected}
selected="selected" {/if}>{$group_attribute.name}</option>
{/foreach}
</select>
</div>
{if $id_attribute_group == 5}
</div>
{/if}
{elseif $group.group_type == 'color' && $product_variant_mode == 2}
<span class="control-label 3">{$group.name}</span>
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="float-xs-left input-container wariant_kolorystyczny">
<label>
<input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]" value="{$id_attribute}" {if $group_attribute.selected}
checked="checked" {/if} style="background-image:;">
{if isset($combinationImages)}
{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
{if Product::getIdProductAttributeByIdAttributes($product.id_product, $id_attribute) == $combinationId}
{foreach from=$combination item='image' name='f_combinationImage'}
<img
src="{$link->getImageLink($product->link_rewrite, $image.id_image, 'wariant_kolorystyczny')|escape:'html':'UTF-8'}" />
{/foreach}
{/if}
{/foreach}
{/if}
<span {if $group_attribute.html_color_code}class="color tip_inside"
style="background-color: {$group_attribute.html_color_code}" {/if}
{if $group_attribute.texture}class="color texture tip_inside"
style="background-image: url({$group_attribute.texture})" {/if}><span
class="sr-only tip">{$group_attribute.name}</span></span>
</label>
</li>
{/foreach}
</ul>
{elseif $group.group_type == 'radio'}
<span class="control-label 4">{$group.name}</span>
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="input-container float-xs-left">
<label>
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]" value="{$id_attribute}" {if $group_attribute.selected}
checked="checked" {/if}>
<span class="radio-label">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
{/if}
</div> </div>
<div class="product-bar-icon material-icon" > {if $id_attribute_group == 5}
<img src="/themes/ayon/assets/images/struktura-materialu.png" alt=""> </a>
{* <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> {/if}
<path d="M0 0h24v24H0V0z" fill="none"/> {/foreach}
<path d="M19.51 3.08L3.08 19.51c.09.34.27.65.51.9.25.24.56.42.9.51L20.93 4.49c-.19-.69-.73-1.23-1.42-1.41zM11.88 3L3 11.88v2.83L14.71 3h-2.83zM5 3c-1.1 0-2 .9-2 2v2l4-4H5zm14 18c.55 0 1.05-.22 1.41-.59.37-.36.59-.86.59-1.41v-2l-4 4h2zm-9.71 0h2.83L21 12.12V9.29L9.29 21z"/> </div>
</svg> *}
</div>
<div class="product-bar-box">
{if $id_attribute_group == 5}
<span class="control-label 1">Struktura materiału</span>
{else}
<span class="control-label 2">{$group.name}:</span>
{/if}
<select
class="form-control form-control-select {if $id_attribute_group == 5}hidden{/if}"
id="group_{$id_attribute_group}"
data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
{/foreach}
</select>
</div>
{elseif $group.group_type == 'color' && $product_variant_mode == 2}
<span class="control-label 3">{$group.name}</span>
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="float-xs-left input-container wariant_kolorystyczny">
<label>
<input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if} style="background-image:;">
{if isset($combinationImages)}
{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
{if Product::getIdProductAttributeByIdAttributes($product.id_product, $id_attribute) == $combinationId}
{foreach from=$combination item='image' name='f_combinationImage'}
<img src="{$link->getImageLink($product->link_rewrite, $image.id_image, 'wariant_kolorystyczny')|escape:'html':'UTF-8'}"/>
{/foreach}
{/if}
{/foreach}
{/if}
<span
{if $group_attribute.html_color_code}class="color tip_inside" style="background-color: {$group_attribute.html_color_code}" {/if}
{if $group_attribute.texture}class="color texture tip_inside" style="background-image: url({$group_attribute.texture})" {/if}
><span class="sr-only tip">{$group_attribute.name}</span></span>
</label>
</li>
{/foreach}
</ul>
{elseif $group.group_type == 'radio'}
<span class="control-label 4">{$group.name}</span>
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="input-container float-xs-left">
<label>
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
{/if}
</div>
{if $id_attribute_group == 5}</a>{/if}
{/foreach}
</div>

View File

@@ -50,7 +50,7 @@
{if $smarty.server.REMOTE_ADDR != '91.189.216.43'} {if $smarty.server.REMOTE_ADDR != '193.243.155.179'}
{block name='content'} {block name='content'}
<section id="main" t="{$smarty.server.REMOTE_ADDR}" itemscope itemtype="https://schema.org/Product"> <section id="main" t="{$smarty.server.REMOTE_ADDR}" itemscope itemtype="https://schema.org/Product">
@@ -623,24 +623,39 @@
{/block} {/block}
{block name='product_size'} {block name='product_size'}
<div class="product-box product-size-data" > <div class="product-box product-box-acc product-size-data" >
<div class="product-box--head"> <div class="product-box--head">
<a rel="nofollow" href="javascript:void(0);" class="fancybox-size-controls"> <h4 class="block-title">Rozmiar i dostosowanie</h4>
<h4 class="block-title">Rozmiar i dostosowanie</h4>
</a>
</div> </div>
<div class="product-box--data"> <div class="product-box--data">
<div class="product-size-data--new"> <div class="product-size-data--new">
<a rel="nofollow" href="javascript:void(0);" class="fancybox-size-controls piece-summary"> <a rel="nofollow" href="javascript:void(0);" class="fancybox-size-controls">
<span id="piece-size-view" class="strong">Wybierz rozmiar</span> <div class="variant-action-btn">
<span class="piece-hint">&mdash; kliknij aby zmienić</span> <div class="product-bar-icon crop-icon">
<img src="/themes/ayon/assets/images/dopasuj-wymiar.png" alt="">
</div>
<div class="product-bar-box">
<div class="piece-size-controls product-bar-box">
Dopasuj wymiar
</div>
<div class="piece-size-controls hidden">
<input type="checkbox" id="checkbox-piece"><label for="checkbox-piece">Wymiary tapety</label>
</div>
<div class="piece-size-values hidden">
<input type="number" min="50" max="500" value="100" id="piece-width" readonly>
<input type="number" min="50" max="300" value="100" id="piece-height" readonly>
</div>
</div>
</div>
</a> </a>
<div id="button-mirror-reflection"> <div id="button-mirror-reflection">
<div class="product-bar-icon rotate-icon"> <div class="variant-action-btn">
<img src="/themes/ayon/assets/images/odbicie-iustrzane.png" alt=""> <div class="product-bar-icon rotate-icon">
</div> <img src="/themes/ayon/assets/images/odbicie-iustrzane.png" alt="">
<div class="product-bar-box"> </div>
<p class="button-mirror-reflection-label">Odbicie lustrzane</p> <div class="product-bar-box">
<p class="button-mirror-reflection-label">Odbicie lustrzane</p>
</div>
</div> </div>
</div> </div>
{* Hidden state trzymane w DOM — istniejące handlery w custom.js bindują się po ID. *} {* Hidden state trzymane w DOM — istniejące handlery w custom.js bindują się po ID. *}
@@ -655,50 +670,50 @@
{/block} {/block}
{block name='product_texture'} {block name='product_texture'}
<div class="product-box product-texture-data"> <div class="product-box product-box-acc product-texture-data">
<div class="product-box--head"> <div class="product-box--head">
<a rel="nofollow" href="javascript:void(0);" class="fancybox-size-controls"> <h4 class="block-title">Tekstura materiału</h4>
<h4 class="block-title">Tekstura materiału</h4>
</a>
</div> </div>
<div class="product-box--data"> <div class="product-box--data">
{$product_variant_mode = 1} <div class="product-size-data--new">
{block name='product_variants'} {$product_variant_mode = 1}
{include file='catalog/_partials/product-variants.tpl'} {block name='product_variants'}
{/block} {include file='catalog/_partials/product-variants.tpl'}
{/block}
</div>
</div> </div>
</div> </div>
{/block} {/block}
{block name='product_realization_time'} {block name='product_realization_time'}
<div class="product-box product-realization-time"> <div class="product-box product-box-acc product-realization-time">
<div class="product-box--head"> <div class="product-box--head">
<h4 class="block-title">Czas realizacji zamówienia</h4> <h4 class="block-title">Czas realizacji zamówienia</h4>
</div> </div>
<div class="product-box--data"> <div class="product-box--data">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, necessitatibus.
</div> </div>
</div> </div>
{/block} {/block}
{block name='product_protect'} {block name='product_protect'}
<div class="product-box product-protect"> <div class="product-box product-box-acc product-protect">
<div class="product-box--head"> <div class="product-box--head">
<h4 class="block-title">Zabezpiecz tapetę</h4> <h4 class="block-title">Zabezpiecz tapetę</h4>
</div> </div>
<div class="product-box--data"> <div class="product-box--data">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, minus.
</div> </div>
</div> </div>
{/block} {/block}
{block name='product_installation'} {block name='product_installation'}
<div class="product-box product-installation"> <div class="product-box product-box-acc product-installation">
<div class="product-box--head"> <div class="product-box--head">
<h4 class="block-title">Montaż</h4> <h4 class="block-title">Montaż</h4>
</div> </div>
<div class="product-box--data"> <div class="product-box--data">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, minus.
</div> </div>
</div> </div>
{/block} {/block}