Project-Pro/newwalls.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Save

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/ayon/assets/css/custom.css
View File

File diff suppressed because one or more lines are too long

2
themes/ayon/assets/css/custom.css.map
View File

File diff suppressed because one or more lines are too long

141
themes/ayon/assets/css/custom.scss
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,17 +3595,16 @@ body#product {
padding: 17px 0; padding: 17px 0;
border-bottom: 1px solid #8c8c8c; border-bottom: 1px solid #8c8c8c;
.block-title { &.product-box-acc {
font-family: 'Inter'; &.active {
font-weight: 700;
font-size: 18px;
line-height: 1.7;
color: #3c3c3c;
margin-bottom: 0;
}
.product-box--head { .product-box--head {
position: relative; &::after {
height: 1px;
}
}
}
.product-box--head {
cursor: pointer;
&::before { &::before {
content: ''; content: '';
@@ -3637,6 +3633,23 @@ body#product {
} }
} }
.block-title {
font-family: 'Inter';
font-weight: 700;
font-size: 18px;
line-height: 1.7;
color: #3c3c3c;
margin-bottom: 0;
}
.product-box--head {
position: relative;
}
.product-box--data {
display: none;
}
}
.block-description-data { .block-description-data {
.block-title { .block-title {
margin-bottom: 10px; margin-bottom: 10px;
@@ -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;
}
}
}
} }
} }

9
themes/ayon/assets/js/custom.js
View File

@@ -1327,3 +1327,12 @@ if (!window.__p02p04Bound) {
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();
});
})

48
themes/ayon/templates/catalog/_partials/product-variants.tpl
View File

@@ -26,12 +26,12 @@
<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">
</div> {/if}
<div class="product-bar-icon material-icon" > <div class="product-bar-icon material-icon">
<img src="/themes/ayon/assets/images/struktura-materialu.png" alt=""> <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"> {* <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="M0 0h24v24H0V0z" fill="none"/>
@@ -44,39 +44,45 @@
{else} {else}
<span class="control-label 2">{$group.name}:</span> <span class="control-label 2">{$group.name}:</span>
{/if} {/if}
<select <select class="form-control form-control-select {if $id_attribute_group == 5}hidden{/if}"
class="form-control form-control-select {if $id_attribute_group == 5}hidden{/if}" id="group_{$id_attribute_group}" data-product-attribute="{$id_attribute_group}"
id="group_{$id_attribute_group}"
data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]"> name="group[{$id_attribute_group}]">
{foreach from=$group.attributes key=id_attribute item=group_attribute} {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> <option value="{$id_attribute}" title="{$group_attribute.name}" {if $group_attribute.selected}
selected="selected" {/if}>{$group_attribute.name}</option>
{/foreach} {/foreach}
</select> </select>
</div> </div>
{if $id_attribute_group == 5}
</div>
{/if}
{elseif $group.group_type == 'color' && $product_variant_mode == 2} {elseif $group.group_type == 'color' && $product_variant_mode == 2}
<span class="control-label 3">{$group.name}</span> <span class="control-label 3">{$group.name}</span>
<ul id="group_{$id_attribute_group}"> <ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute} {foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="float-xs-left input-container wariant_kolorystyczny"> <li class="float-xs-left input-container wariant_kolorystyczny">
<label> <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:;"> <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)} {if isset($combinationImages)}
{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'} {foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
{if Product::getIdProductAttributeByIdAttributes($product.id_product, $id_attribute) == $combinationId} {if Product::getIdProductAttributeByIdAttributes($product.id_product, $id_attribute) == $combinationId}
{foreach from=$combination item='image' name='f_combinationImage'} {foreach from=$combination item='image' name='f_combinationImage'}
<img src="{$link->getImageLink($product->link_rewrite, $image.id_image, 'wariant_kolorystyczny')|escape:'html':'UTF-8'}"/> <img
src="{$link->getImageLink($product->link_rewrite, $image.id_image, 'wariant_kolorystyczny')|escape:'html':'UTF-8'}" />
{/foreach} {/foreach}
{/if} {/if}
{/foreach} {/foreach}
{/if} {/if}
<span <span {if $group_attribute.html_color_code}class="color tip_inside"
{if $group_attribute.html_color_code}class="color tip_inside" style="background-color: {$group_attribute.html_color_code}" {/if} 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} {if $group_attribute.texture}class="color texture tip_inside"
><span class="sr-only tip">{$group_attribute.name}</span></span> style="background-image: url({$group_attribute.texture})" {/if}><span
class="sr-only tip">{$group_attribute.name}</span></span>
</label> </label>
</li> </li>
{/foreach} {/foreach}
@@ -87,7 +93,9 @@
{foreach from=$group.attributes key=id_attribute item=group_attribute} {foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="input-container float-xs-left"> <li class="input-container float-xs-left">
<label> <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}> <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> <span class="radio-label">{$group_attribute.name}</span>
</label> </label>
</li> </li>
@@ -95,6 +103,8 @@
</ul> </ul>
{/if} {/if}
</div> </div>
{if $id_attribute_group == 5}</a>{/if} {if $id_attribute_group == 5}
{/foreach} </a>
{/if}
{/foreach}
</div> </div>

47
themes/ayon/templates/catalog/product.tpl
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,19 +623,33 @@
{/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="variant-action-btn">
<div class="product-bar-icon rotate-icon"> <div class="product-bar-icon rotate-icon">
<img src="/themes/ayon/assets/images/odbicie-iustrzane.png" alt=""> <img src="/themes/ayon/assets/images/odbicie-iustrzane.png" alt="">
</div> </div>
@@ -643,6 +657,7 @@
<p class="button-mirror-reflection-label">Odbicie lustrzane</p> <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. *}
<input type="checkbox" id="checkbox-piece" checked style="display:none;"> <input type="checkbox" id="checkbox-piece" checked style="display:none;">
<input type="number" min="50" max="500" value="100" id="piece-width" style="display:none;"> <input type="number" min="50" max="500" value="100" id="piece-width" style="display:none;">
@@ -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">
<div class="product-size-data--new">
{$product_variant_mode = 1} {$product_variant_mode = 1}
{block name='product_variants'} {block name='product_variants'}
{include file='catalog/_partials/product-variants.tpl'} {include file='catalog/_partials/product-variants.tpl'}
{/block} {/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}