Merge remote-tracking branch 'upstream/main'

assets/css/theme.css

@@ -665,6 +665,16 @@ video {
   margin-bottom: 2rem;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -689,6 +699,10 @@ video {
   margin-top: 4rem;
 }
 
+.mt-24 {
+  margin-top: 6rem;
+}
+
 .block {
   display: block;
 }
@@ -777,6 +791,24 @@ video {
   width: 100%;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-28 {
+  width: 7rem;
+}
+
+.min-w-fit {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+
+.min-w-min {
+  min-width: -moz-min-content;
+  min-width: min-content;
+}
+
 .max-w-\[200px\] {
   max-width: 200px;
 }
@@ -789,6 +821,18 @@ video {
   max-width: 100%;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-\[112px\] {
+  max-width: 112px;
+}
+
+.max-w-\[140px\] {
+  max-width: 140px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -802,14 +846,36 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
 .flex-col {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
   align-items: center;
 }
@@ -826,6 +892,10 @@ video {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -842,6 +912,10 @@ video {
   gap: 0.25rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -852,6 +926,15 @@ video {
   border-radius: 0.5rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
+.border-blue-950 {
+  --tw-border-opacity: 1;
+  border-color: rgb(23 37 84 / var(--tw-border-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -862,6 +945,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-blue-950 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 37 84 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -926,6 +1014,10 @@ video {
   padding-top: 1rem;
 }
 
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -971,6 +1063,14 @@ video {
   font-weight: 600;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -989,6 +1089,21 @@ video {
   color: rgb(185 28 28 / 0.5);
 }
 
+.text-blue-950 {
+  --tw-text-opacity: 1;
+  color: rgb(23 37 84 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .line-through {
   text-decoration-line: line-through;
 }
@@ -1019,6 +1134,10 @@ body {
   stroke: #374151;
 }
 
+.hover\:stroke-2:hover {
+  stroke-width: 2;
+}
+
 .hover\:text-yellow-700:hover {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity));
@@ -1064,6 +1183,10 @@ body {
     display: none;
   }
 
+  .md\:w-24 {
+    width: 6rem;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1082,6 +1205,10 @@ body {
     right: 0px;
   }
 
+  .lg\:mt-36 {
+    margin-top: 9rem;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -1102,6 +1229,26 @@ body {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:flex-col {
+    flex-direction: column;
+  }
+
+  .lg\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .lg\:items-center {
+    align-items: center;
+  }
+
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }

templates/_partials/breadcrumb.tpl

@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 <nav data-depth="{$breadcrumb.count}" class="breadcrumb hidden md:flex my-8 w-full">
-  <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="hidden md:flex w-full gap-4">
+  <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="hidden md:flex w-full ">
     {block name='breadcrumb'}
       {foreach from=$breadcrumb.links item=path name=breadcrumb}
         {block name='breadcrumb_item'}
@@ -31,6 +31,9 @@
             <a itemprop="item" href="{$path.url}">
               <span itemprop="name">{$path.title}</span>
             </a>
+            <span class="mx-4">
+            /
+            </span>
             <meta itemprop="position" content="{$smarty.foreach.breadcrumb.iteration}">
           </li>
         {/block}

templates/catalog/_partials/facets.tpl

@@ -23,23 +23,71 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 {if $facets|count}
-  <div id="search_filters">
+  <div id="search_filters" class="flex gap-4 flex-1 flex-col lg:flex-row lg:items-center">
-    {block name='facets_title'}
-      <p class="text-uppercase h6 hidden-sm-down">{l s='Filter By' d='Shop.Theme.Actions'}</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 id="_desktop_search_filters_clear_all"  data-search-url="{$clear_all_link}"  class="flex w-6 h-6 flex items-center justify-center select-none js-search-filters-clear-all">
-          <button data-search-url="{$clear_all_link}" class="btn btn-tertiary js-search-filters-clear-all">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter-off hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
-            <i class="material-icons">&#xE14C;</i>
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            {l s='Clear all' d='Shop.Theme.Actions'}
+            <path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227"></path>
-          </button>
+            <path d="M3 3l18 18"></path>
+          </svg>
+        </button>
+      {else}
+        <div class="flex w-6 h-6 items-center justify-center select-none">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path>
+          </svg>
         </div>
       {/if}
     {/block}
     
-    {foreach from=$facets item="facet"}
+    <div class="flex gap-4 flex-1 flex-col lg:flex-row">
+      {foreach from=$facets item="facet"}
+        {if !$facet.displayed}
+          {continue}
+        {/if}
+        {if $facet.widgetType === 'dropdown'}
+          <div class="dropdown relative flex-1 max-w-[140px] group">
+            <button class="dropdown-toggle relative px-4 pr-6 leading-1 w-full text-left">
+              {$active_found = false}
+              {foreach from=$facet.filters item="filter"}
+                {if $filter.active}
+                  {$filter.label}
+                  {$active_found = true}
+                {/if}
+              {/foreach}
+              {if !$active_found}
+                {$facet.label}
+              {/if}
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M6 9l6 6l6 -6"></path>
+              </svg>
+            </button>
+            <div class="dropdown-menu hidden group-hover:flex flex-col position absolute left-0 top-full w-full bg-white">
+              {foreach from=$facet.filters item="filter"}
+                {if !$filter.active}
+                  <a
+                    rel="nofollow"
+                    href="{$filter.nextEncodedFacetsURL}"
+                    class="select-list px-4 py-1"
+                  >
+                    {$filter.label}
+                  </a>
+                {/if}
+              {/foreach}
+            </div>
+          </div>
+        {/if}
+      {/foreach}
+    </div>
+  </div>
+{/if}
+
+{**
+
       {if !$facet.displayed}
         {continue}
       {/if}
@@ -163,6 +211,4 @@
           {/block}
         {/if}
       </section>
-    {/foreach}
+*}
-  </div>
-{/if}

templates/catalog/_partials/products-top.tpl

@@ -22,19 +22,13 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div id="js-product-list-top" class="flex w-full justify-between">
+<div id="js-product-list-top" class="flex w-full flex-col lg:flex-row lg:justify-between">
   {if !empty($listing.rendered_facets)}
-    <div class="col-sm-3 col-xs-4 hidden-md-up filter-button">
+    {include file='catalog/_partials/facets.tpl'}
-      <button id="search_filter_toggler" class="btn btn-secondary">
-        {l s='Filter' d='Shop.Theme.Actions'}
-      </button>
-    </div>
   {else}
     <div></div>
   {/if}
-  <div class="relative flex gap-4">
+  {block name='sort_by'}
-    {block name='sort_by'}
+    {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
-      {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
+  {/block}
-    {/block}
-  </div>
 </div>

templates/catalog/_partials/sort-orders.tpl

@@ -22,8 +22,7 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div class="relative flex gap-2 items-center">
+<div class="relative flex gap-2 lg:items-center">
-  <span class="text-base">{l s='Sort by:' d='Shop.Theme.Global'}</span>
   <div class="relative w-48 dropdown group">
     <button
       class="w-full px-4 pr-8 py-1 gap-4 relative text-left h-8 hover:text-yellow-700 dropdown-toggle"