update

.vscode/ftp-kr.sync.cache.json

@@ -1745,20 +1745,20 @@
               },
               "custom.css": {
                 "type": "-",
-                "size": 62894,
-                "lmtime": 1737288116536,
+                "size": 63016,
+                "lmtime": 1737403833173,
                 "modified": false
               },
               "custom.css.map": {
                 "type": "-",
-                "size": 93894,
-                "lmtime": 1737288116536,
+                "size": 94150,
+                "lmtime": 1737403833173,
                 "modified": false
               },
               "custom.scss": {
                 "type": "-",
-                "size": 69453,
-                "lmtime": 1737288116201,
+                "size": 69629,
+                "lmtime": 1737403832675,
                 "modified": false
               },
               "dce0916af972e3040aa191f74b17dd46.woff2": {

modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl

@@ -18,166 +18,162 @@
  *}
 {if $displayedFacets|count}
   <div id="search_filters">
-    {block name='facets_title'}
-      <p class="text-uppercase h6 hidden-sm-down">{l s='Filter By' d='Shop.Theme.Actions'}</p>
-    {/block}
+    <div class="head">
+      {block name='facets_title'}
+        <p class="text-uppercase h6 hidden-sm-down search-toggle">{l s='Filter By' d='Shop.Theme.Actions'} <img src="/themes/classic/assets/img/chevron-up.svg"></p>
+      {/block}
+      {block name='facets_clearall_button'}
+        {if $activeFilters|count}
+          <div id="_desktop_search_filters_clear_all" class="hidden-sm-down clear-all-wrapper">
+            <button data-search-url="{$clear_all_link}" class="btn btn-tertiary js-search-filters-clear-all">
+              <i class="material-icons">&#xE14C;</i>
+              {l s='Clear all' d='Shop.Theme.Actions'}
+            </button>
+          </div>
+        {/if}
+      {/block}
+    </div>
+    <div class="content">
 
-    {block name='facets_clearall_button'}
-      {if $activeFilters|count}
-        <div id="_desktop_search_filters_clear_all" class="hidden-sm-down clear-all-wrapper">
-          <button data-search-url="{$clear_all_link}" class="btn btn-tertiary js-search-filters-clear-all">
-            <i class="material-icons">&#xE14C;</i>
-            {l s='Clear all' d='Shop.Theme.Actions'}
-          </button>
-        </div>
-      {/if}
-    {/block}
+      {foreach from=$displayedFacets item="facet"}
+        <section class="facet clearfix" data-type="{$facet.type}">
+          <p class="h6 facet-title hidden-sm-down">{$facet.label}</p>
+          {assign var=_expand_id value=10|mt_rand:100000}
+          {assign var=_collapse value=true}
+          {foreach from=$facet.filters item="filter"}
+            {if $filter.active}{assign var=_collapse value=false}{/if}
+          {/foreach}
 
-    {foreach from=$displayedFacets item="facet"}
-      <section class="facet clearfix" data-type="{$facet.type}">
-        <p class="h6 facet-title hidden-sm-down">{$facet.label}</p>
-        {assign var=_expand_id value=10|mt_rand:100000}
-        {assign var=_collapse value=true}
-        {foreach from=$facet.filters item="filter"}
-          {if $filter.active}{assign var=_collapse value=false}{/if}
-        {/foreach}
+          <div class="title hidden-md-up" data-target="#facet_{$_expand_id}" data-toggle="collapse"{if !$_collapse} aria-expanded="true"{/if}>
+            <p class="h6 facet-title">{$facet.label}</p>
+            <span class="navbar-toggler collapse-icons">
+              <i class="material-icons add">&#xE313;</i>
+              <i class="material-icons remove">&#xE316;</i>
+            </span>
+          </div>
 
-        <div class="title hidden-md-up" data-target="#facet_{$_expand_id}" data-toggle="collapse"{if !$_collapse} aria-expanded="true"{/if}>
-          <p class="h6 facet-title">{$facet.label}</p>
-          <span class="navbar-toggler collapse-icons">
-            <i class="material-icons add">&#xE313;</i>
-            <i class="material-icons remove">&#xE316;</i>
-          </span>
-        </div>
+          {if in_array($facet.widgetType, ['radio', 'checkbox'])}
+            {block name='facet_item_other'}
+              <ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}">
+                {foreach from=$facet.filters key=filter_key item="filter"}
+                  {if !$filter.displayed}
+                    {continue}
+                  {/if}
 
-        {if in_array($facet.widgetType, ['radio', 'checkbox'])}
-          {block name='facet_item_other'}
-            <ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}">
-              {foreach from=$facet.filters key=filter_key item="filter"}
-                {if !$filter.displayed}
-                  {continue}
-                {/if}
+                  <li>
+                    <label class="facet-label{if $filter.active} active {/if}" for="facet_input_{$_expand_id}_{$filter_key}">
+                      {if $facet.multipleSelectionAllowed}
+                        <span class="custom-checkbox">
+                          <input
+                            id="facet_input_{$_expand_id}_{$filter_key}"
+                            data-search-url="{$filter.nextEncodedFacetsURL}"
+                            type="checkbox"
+                            {if $filter.active }checked{/if}
+                          >
+                        </span>
+                      {else}
+                        <span class="custom-radio">
+                          <input
+                            id="facet_input_{$_expand_id}_{$filter_key}"
+                            data-search-url="{$filter.nextEncodedFacetsURL}"
+                            type="radio"
+                            name="filter {$facet.label}"
+                            {if $filter.active }checked{/if}
+                          >
+                          <span {if !$js_enabled} class="ps-shown-by-js" {/if}></span>
+                        </span>
+                      {/if}
 
+                      <a
+                        href="{$filter.nextEncodedFacetsURL}"
+                        class="_gray-darker search-link js-search-link"
+                        rel="nofollow"
+                      >
+                        {$filter.label}
+                        {if $filter.magnitude and $show_quantities}
+                          <span class="magnitude">({$filter.magnitude})</span>
+                        {/if}
+                      </a>
+                    </label>
+                  </li>
+                {/foreach}
+              </ul>
+            {/block}
+
+          {elseif $facet.widgetType == 'dropdown'}
+            {block name='facet_item_dropdown'}
+              <ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}">
                 <li>
-                  <label class="facet-label{if $filter.active} active {/if}" for="facet_input_{$_expand_id}_{$filter_key}">
-                    {if $facet.multipleSelectionAllowed}
-                      <span class="custom-checkbox">
-                        <input
-                          id="facet_input_{$_expand_id}_{$filter_key}"
-                          data-search-url="{$filter.nextEncodedFacetsURL}"
-                          type="checkbox"
-                          {if $filter.active }checked{/if}
-                        >
-                        {if isset($filter.properties.color)}
-                          <span class="color" style="background-color:{$filter.properties.color}"></span>
-                        {elseif isset($filter.properties.texture)}
-                          <span class="color texture" style="background-image:url({$filter.properties.texture})"></span>
-                        {else}
-                          <span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
+                  <div class="col-sm-12 col-xs-12 col-md-12 facet-dropdown dropdown">
+                    <a class="select-title" rel="nofollow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      {$active_found = false}
+                      <span>
+                        {foreach from=$facet.filters item="filter"}
+                          {if $filter.active}
+                            {$filter.label}
+                            {if $filter.magnitude and $show_quantities}
+                              ({$filter.magnitude})
+                            {/if}
+                            {$active_found = true}
+                          {/if}
+                        {/foreach}
+                        {if !$active_found}
+                          {l s='(no filter)' d='Shop.Theme.Global'}
                         {/if}
                       </span>
-                    {else}
-                      <span class="custom-radio">
-                        <input
-                          id="facet_input_{$_expand_id}_{$filter_key}"
-                          data-search-url="{$filter.nextEncodedFacetsURL}"
-                          type="radio"
-                          name="filter {$facet.label}"
-                          {if $filter.active }checked{/if}
-                        >
-                        <span {if !$js_enabled} class="ps-shown-by-js" {/if}></span>
-                      </span>
-                    {/if}
-
-                    <a
-                      href="{$filter.nextEncodedFacetsURL}"
-                      class="_gray-darker search-link js-search-link"
-                      rel="nofollow"
-                    >
-                      {$filter.label}
-                      {if $filter.magnitude and $show_quantities}
-                        <span class="magnitude">({$filter.magnitude})</span>
-                      {/if}
+                      <i class="material-icons float-xs-right">&#xE5C5;</i>
                     </a>
-                  </label>
-                </li>
-              {/foreach}
-            </ul>
-          {/block}
-
-        {elseif $facet.widgetType == 'dropdown'}
-          {block name='facet_item_dropdown'}
-            <ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}">
-              <li>
-                <div class="col-sm-12 col-xs-12 col-md-12 facet-dropdown dropdown">
-                  <a class="select-title" rel="nofollow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    {$active_found = false}
-                    <span>
+                    <div class="dropdown-menu">
                       {foreach from=$facet.filters item="filter"}
-                        {if $filter.active}
-                          {$filter.label}
-                          {if $filter.magnitude and $show_quantities}
-                            ({$filter.magnitude})
-                          {/if}
-                          {$active_found = true}
+                        {if !$filter.active}
+                          <a
+                            rel="nofollow"
+                            href="{$filter.nextEncodedFacetsURL}"
+                            class="select-list js-search-link"
+                          >
+                            {$filter.label}
+                            {if $filter.magnitude and $show_quantities}
+                              ({$filter.magnitude})
+                            {/if}
+                          </a>
                         {/if}
                       {/foreach}
-                      {if !$active_found}
-                        {l s='(no filter)' d='Shop.Theme.Global'}
-                      {/if}
-                    </span>
-                    <i class="material-icons float-xs-right">&#xE5C5;</i>
-                  </a>
-                  <div class="dropdown-menu">
-                    {foreach from=$facet.filters item="filter"}
-                      {if !$filter.active}
-                        <a
-                          rel="nofollow"
-                          href="{$filter.nextEncodedFacetsURL}"
-                          class="select-list js-search-link"
-                        >
-                          {$filter.label}
-                          {if $filter.magnitude and $show_quantities}
-                            ({$filter.magnitude})
-                          {/if}
-                        </a>
-                      {/if}
-                    {/foreach}
+                    </div>
                   </div>
-                </div>
-              </li>
-            </ul>
-          {/block}
-
-        {elseif $facet.widgetType == 'slider'}
-          {block name='facet_item_slider'}
-            {foreach from=$facet.filters item="filter"}
-              <ul id="facet_{$_expand_id}"
-                class="faceted-slider collapse{if !$_collapse} in{/if}"
-                data-slider-min="{$facet.properties.min}"
-                data-slider-max="{$facet.properties.max}"
-                data-slider-id="{$_expand_id}"
-                data-slider-values="{$filter.value|@json_encode}"
-                data-slider-unit="{$facet.properties.unit}"
-                data-slider-label="{$facet.label}"
-                data-slider-specifications="{$facet.properties.specifications|@json_encode}"
-                data-slider-encoded-url="{$filter.nextEncodedFacetsURL}"
-              >
-                <li>
-                  <p id="facet_label_{$_expand_id}">
-                    {$filter.label}
-                  </p>
-
-                  <div id="slider-range_{$_expand_id}"></div>
                 </li>
               </ul>
-            {/foreach}
-          {/block}
-        {/if}
-      </section>
-    {/foreach}
+            {/block}
+
+          {elseif $facet.widgetType == 'slider'}
+            {block name='facet_item_slider'}
+              {foreach from=$facet.filters item="filter"}
+                <ul id="facet_{$_expand_id}"
+                  class="faceted-slider collapse{if !$_collapse} in{/if}"
+                  data-slider-min="{$facet.properties.min}"
+                  data-slider-max="{$facet.properties.max}"
+                  data-slider-id="{$_expand_id}"
+                  data-slider-values="{$filter.value|@json_encode}"
+                  data-slider-unit="{$facet.properties.unit}"
+                  data-slider-label="{$facet.label}"
+                  data-slider-specifications="{$facet.properties.specifications|@json_encode}"
+                  data-slider-encoded-url="{$filter.nextEncodedFacetsURL}"
+                >
+                  <li>
+                    <p id="facet_label_{$_expand_id}">
+                      {$filter.label}
+                    </p>
+
+                    <div id="slider-range_{$_expand_id}"></div>
+                  </li>
+                </ul>
+              {/foreach}
+            {/block}
+          {/if}
+        </section>
+      {/foreach}
+    </div>
   </div>
 {else}
   <div id="search_filters" style="display:none;">
-  </div>  
+  </div>
 {/if}

themes/classic/assets/css/custom.scss

@@ -3092,6 +3092,18 @@ body#authentication {
       }
     }
   }
+
+  .elementor-field-label {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+
+    .elementor-checkbox-label {
+      font-size: 12px;
+      font-weight: 500;
+      font-family: $fInter;
+    }
+  }
 }
 
 
@@ -3153,6 +3165,7 @@ body#authentication {
       font-family: "Inter", sans-serif;
       font-size: 14px;
       font-weight: 400;
+      white-space: nowrap;
 
       &:hover {
         color: #E79332;
@@ -3181,4 +3194,147 @@ body#authentication {
   img {
     height: 30px;
   }
+}
+
+#popular-products,
+#new-products {
+  h2 {
+    font-family: 'Inter';
+    color: #462D26;
+    font-size: 36px;
+    font-weight: 500;
+  }
+}
+
+#products {
+  .sort-by-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 20px;
+    align-items: center;
+
+    .products-sort-order {
+      .dropdown-menu {
+        background: #FFF;
+        width: 100%;
+
+        a {
+          white-space: nowrap;
+          font-size: 14px;
+          font-family: 'Inter';
+          font-weight: 400;
+
+          &:hover {
+            background: #FFF;
+            font-weight: 700;
+            color: #462D26;
+          }
+        }
+      }
+
+      button {
+        background: none;
+        border: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #462D26;
+        font-family: 'Inter';
+        font-size: 16px;
+        font-weight: 700;
+        width: 350px;
+      }
+    }
+  }
+}
+
+#search_filters {
+  background: none;
+  border-top: 1px solid #110E0C1A;
+  border-bottom: 1px solid #110E0C1A;
+  border-radius: 0 !important;
+
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .h6 {
+      font-size: 16px;
+      font-weight: 700;
+      font-family: 'Inter';
+      text-transform: uppercase;
+      color: #462D26;
+      cursor: pointer;
+      margin-bottom: 0;
+    }
+
+    .js-search-filters-clear-all {
+      background: #462D26;
+      color: #FFF;
+    }
+  }
+
+  &.active {
+    background: #FFF;
+    border: 0;
+    border-radius: 10px !important;
+
+    .content {
+      display: grid;
+    }
+  }
+
+  .content {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 20px;
+    background: #FFF;
+    padding: 25px;
+    display: none;
+
+    .h6 {
+      font-weight: 700;
+      font-size: 16px;
+      font-family: 'Inter';
+      margin-bottom: 25px;
+    }
+
+    .custom-checkbox {
+      top: 0;
+      position: static;
+    }
+
+    .facet-label {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      margin-bottom: 10px;
+
+      a {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+#js-product-list-top {
+  padding: 0 20px;
+}
+
+.active_filters {
+  background: #FFF;
+  border-radius: 10px;
+  color: #462D26;
+
+  .filter-block {
+    background: #462D26;
+    color: #FFF;
+    padding: 3px 10px;
+
+    i {
+      text-shadow: none;
+      color: #FFF !important;
+    }
+  }
 }

themes/classic/assets/img/chevron-up.svg

@@ -0,0 +1,4 @@
+<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5.19336C2.46159 5.11643 5.38478 4.13178 5.38478 0.80858" stroke="#462D26" stroke-width="1.3"/>
+<path d="M10 5.19336C8.53841 5.11643 5.61522 4.13178 5.61522 0.808579" stroke="#462D26" stroke-width="1.3"/>
+</svg>

themes/classic/assets/js/custom.js

@@ -99,7 +99,7 @@ jQuery(document).ready(function ($) {
         $(".accordion-item-header").click(function(){
             $(".accordion-item-body").slideUp();
             $(".accordion-item").removeClass("active");
-            
+
             if ($(this).next(".accordion-item-body").is(":hidden")) {
                 $(this).next(".accordion-item-body").slideDown();
                 $(this).parent().addClass("active");
@@ -111,6 +111,30 @@ jQuery(document).ready(function ($) {
             "top",
             $("#header-panel-box").height() + 64
         )
-        
+
     }
-})
+})
+
+document.addEventListener("click", (event) => {
+  const toggleButton = event.target.closest(".search-toggle");
+
+  if (toggleButton) {
+      const filtersContainer = document.querySelector("#search_filters");
+      const filtersContent = filtersContainer?.querySelector(".content");
+
+      if (filtersContainer && filtersContent) {
+          // Pokaż/ukryj zawartość
+          const isContentVisible = filtersContent.style.display === "grid";
+          filtersContent.style.display = isContentVisible ? "none" : "grid";
+
+          // Obróć obrazek w przycisku
+          const img = toggleButton.querySelector("img");
+          if (img && img.src.includes("chevron-up.svg")) {
+              img.style.transform = isContentVisible ? "rotate(0deg)" : "rotate(180deg)";
+          }
+
+          // Dodaj/usuń klasę active na kontenerze
+          filtersContainer.classList.toggle("active", !isContentVisible);
+      }
+  }
+});

themes/classic/templates/catalog/_partials/sort-orders.tpl

@@ -23,8 +23,8 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  *}
 
-<span class="col-sm-3 col-md-3 hidden-sm-down sort-by">{l s='Sort by:' d='Shop.Theme.Global'}</span>
-<div class="{if !empty($listing.rendered_facets)}col-sm-9 col-xs-8{else}col-sm-12 col-xs-12{/if} col-md-9 products-sort-order dropdown">
+<span class="hidden-sm-down sort-by">{l s='Sort by:' d='Shop.Theme.Global'}</span>
+<div class="products-sort-order dropdown">
   <button
     class="btn-unstyle select-title"
     rel="nofollow"

themes/classic/templates/catalog/_partials/subcategories.tpl

@@ -31,8 +31,8 @@
         {foreach from=$subcategories item=subcategory}
           <li>
             <a class="subcategory-item" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">
-            
-              {if !empty($subcategory.image.large.url)}  
+
+              {if !empty($subcategory.image.large.url)}
                 <div class="subcategory-image">
                   <img class="replace-2x" src="{$subcategory.image.large.url}" alt="{$subcategory.name|escape:'html':'UTF-8'}" loading="lazy" width="141" height="180"/>
                 </div>