Merge remote-tracking branch 'upstream/main'

_dev/elegance.css

@@ -4,8 +4,8 @@
 
 body {
   @apply bg-white;
-  @apply text-gray-700;
+  @apply text-gray-500;
-  @apply font-medium;
+  @apply font-normal;
 }
 
 .icon-tabler {

assets/css/theme.css

@@ -600,6 +600,10 @@ video {
   bottom: 50%;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .left-\[100\%\] {
   left: 100%;
 }
@@ -620,6 +624,10 @@ video {
   top: 0px;
 }
 
+.top-1 {
+  top: 0.25rem;
+}
+
 .top-1\/2 {
   top: 50%;
 }
@@ -677,6 +685,10 @@ video {
   margin-top: 0.75rem;
 }
 
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .block {
   display: block;
 }
@@ -814,6 +826,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -822,6 +838,10 @@ video {
   gap: 2rem;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -847,14 +867,6 @@ video {
      object-fit: cover;
 }
 
-.p-16 {
-  padding: 4rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
 .p-3 {
   padding: 0.75rem;
 }
@@ -864,11 +876,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -899,11 +906,6 @@ video {
   padding-bottom: 2rem;
 }
 
-.py-\[6px\] {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -916,14 +918,18 @@ video {
   padding-right: 2rem;
 }
 
-.pt-24 {
-  padding-top: 6rem;
-}
-
 .pt-20 {
   padding-top: 5rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
 .text-justify {
   text-align: justify;
 }
@@ -948,6 +954,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -956,6 +967,32 @@ video {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+.text-red-700\/50 {
+  color: rgb(185 28 28 / 0.5);
+}
+
+.line-through {
+  text-decoration-line: line-through;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -970,8 +1007,8 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
-  font-weight: 500;
+  font-weight: 400;
 }
 
 .icon-tabler {
@@ -982,12 +1019,36 @@ body {
   stroke: #374151;
 }
 
+.hover\:text-yellow-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(161 98 7 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-950:hover {
+  --tw-text-opacity: 1;
+  color: rgb(3 7 18 / var(--tw-text-opacity));
+}
+
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.group:hover .group-hover\:flex {
+  display: flex;
+}
+
+.group:hover .group-hover\:text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-gray-950 {
+  --tw-text-opacity: 1;
+  color: rgb(3 7 18 / var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;

modules/ps_mainmenu/ps_mainmenu.tpl

@@ -3,7 +3,7 @@
     {if $nodes|count}
       <ul class="flex flex-1 items-center justify-center top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
         {foreach from=$nodes item=node}
-            <li class="{$node.type}{if $node.current} current {/if} px-2 py-2" id="{$node.page_identifier}">
+            <li class="{$node.type}{if $node.current} current {/if} px-2 py-2 font-medium hover:text-gray-950" id="{$node.page_identifier}">
             {assign var=_counter value=$_counter+1}
               <a
                 class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"

templates/_partials/pagination.tpl

@@ -22,7 +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
  *}
-<nav class="pagination flex justify-between">
+<nav class="pagination flex justify-between mt-16">
   <div class="flex">
     {block name='pagination_summary'}
       {l s='Showing %from%-%to% of %total% item(s)' d='Shop.Theme.Catalog' sprintf=['%from%' => $pagination.items_shown_from ,'%to%' => $pagination.items_shown_to, '%total%' => $pagination.total_items]}

templates/catalog/_partials/miniatures/product.tpl

@@ -23,6 +23,43 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 {block name='product_miniature_item'}
+<a href="{$product.url}"  class="group w-full flex flex-col">
+  {block name='product_thumbnail'}
+    {if $product.cover}
+      <div class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100">
+        <img
+          src="{$product.cover.bySize.home_default.url}"
+          alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
+          data-full-size-image-url="{$product.cover.large.url}"
+          class="object-cover w-full h-full"
+        />
+      </div>
+    {else}
+      <div class="thumbnail product-thumbnail w-full aspect-[342/513]">
+        <img class="object-fit w-full h-full" src="{$urls.no_picture_image.bySize.home_default.url}" />
+      </div>
+    {/if}
+  {/block}
+  <div class="product-description flex flex-col pt-4 group-hover:text-gray-950 gap-1">
+    {block name='product_price_and_shipping'}
+      <div class="flex w-full justify-between items-center">
+        {if $product.has_discount}
+          <span class="regular-price line-through text-red-700/50 leading-none">{$product.regular_price}</span>
+        {/if}
+        <div class="font-semibold text-lg">
+          <span>{$product.price}</span>
+        </div>
+      </div>
+    {/block}
+    {block name='product_name'}
+        <span class="text-xl" itemprop="name">{$product.name|truncate:30:'...'}</span>
+    {/block}
+  </div>
+</a>
+{/block}
+
+{**
+
   <article class="product-miniature js-product-miniature flex flex-col shrink-0" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" itemscope itemtype="http://schema.org/Product">
     <div class="thumbnail-container flex flex-col gap-4">
       {block name='product_thumbnail'}
@@ -89,4 +126,4 @@
       </div>
     </div>
   </article>
-{/block}
+*}

templates/catalog/_partials/products-top.tpl

@@ -22,35 +22,19 @@
  * @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="row products-selection">
+<div id="js-product-list-top" class="flex w-full justify-between">
-  <div class="col-md-6 hidden-sm-down total-products">
-    {if $listing.pagination.total_items > 1}
-      <p>{l s='There are %product_count% products.' d='Shop.Theme.Catalog' sprintf=['%product_count%' => $listing.pagination.total_items]}</p>
-    {elseif $listing.pagination.total_items > 0}
-      <p>{l s='There is 1 product.' d='Shop.Theme.Catalog'}</p>
-    {/if}
-  </div>
-  <div class="col-md-6">
-    <div class="row sort-by-row">
-
-      {block name='sort_by'}
-        {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
-      {/block}
-
   {if !empty($listing.rendered_facets)}
     <div class="col-sm-3 col-xs-4 hidden-md-up filter-button">
       <button id="search_filter_toggler" class="btn btn-secondary">
         {l s='Filter' d='Shop.Theme.Actions'}
       </button>
     </div>
+  {else}
+    <div></div>
   {/if}
-    </div>
+  <div class="relative flex gap-4">
-  </div>
+    {block name='sort_by'}
-  <div class="col-sm-12 hidden-md-up text-sm-center showing">
+      {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
-    {l s='Showing %from%-%to% of %total% item(s)' d='Shop.Theme.Catalog' sprintf=[
+    {/block}
-    '%from%' => $listing.pagination.items_shown_from ,
-    '%to%' => $listing.pagination.items_shown_to,
-    '%total%' => $listing.pagination.total_items
-    ]}
   </div>
 </div>

templates/catalog/_partials/products.tpl

@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 <div id="js-product-list flex flex-col">
-  <div class="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+  <div class="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
     {foreach from=$listing.products item="product"}
       {block name='product_miniature'}
         {include file='catalog/_partials/miniatures/product.tpl' product=$product}

templates/catalog/_partials/sort-orders.tpl

@@ -22,26 +22,31 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<span class="col-sm-3 col-md-3 hidden-sm-down sort-by">{l s='Sort by:' d='Shop.Theme.Global'}</span>
+<div class="relative flex gap-2 items-center">
-<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="text-base">{l s='Sort by:' d='Shop.Theme.Global'}</span>
+  <div class="relative w-48 dropdown group">
     <button
-    class="btn-unstyle select-title"
+      class="w-full px-4 pr-8 py-1 gap-4 relative text-left h-8 hover:text-yellow-700 dropdown-toggle"
+      type="button"
       rel="nofollow"
-    data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false">
       {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
-    <i class="material-icons float-xs-right">&#xE5C5;</i>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="24" height="24" 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">
+    <div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white">
       {foreach from=$listing.sort_orders item=sort_order}
         <a
           rel="nofollow"
           href="{$sort_order.url}"
-        class="select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
+          class="px-4 py-1 hover:text-yellow-700 select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
         >
           {$sort_order.label}
         </a>
       {/foreach}
     </div>
+  </div>
 </div>

templates/catalog/listing/product-list.tpl

@@ -31,7 +31,7 @@
       <h2 id="js-product-list-header" class="h2">{$listing.label}</h2>
     {/block}
 
-    <section id="products" class="flex flex-col gap-4">
+    <section id="products" class="flex flex-col gap-8">
       {if $listing.products|count}
 
         {block name='product_list_top'}