refactor: add the subcatogeies section on the category page

_dev/js/theme.js

@@ -24,6 +24,7 @@
  */
 /* eslint-disable */
 // import 'bootstrap/dist/js/bootstrap.min';
+import  'jquery-modal'
 import "jquery-offcanvas/dist/jquery.offcanvas.min.css";
 import touchspin from "bootstrap-touchspin";
 import "jquery-touchswipe";

_dev/package.json

@@ -20,6 +20,7 @@
     "bootstrap-touchspin": "^4.7.3",
     "events": "^3.3.0",
     "jquery": "3.5.1",
+    "jquery-modal": "^0.9.2",
     "jquery-offcanvas": "^3.4.7",
     "jquery-touchswipe": "^1.6.19",
     "postcss-import": "^15.1.0",

_dev/yarn.lock

@@ -425,6 +425,11 @@ jiti@^1.19.1:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+jquery-modal@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/jquery-modal/-/jquery-modal-0.9.2.tgz#dbc046ec93440c46466fa8e21a6fc38c102a3ded"
+  integrity sha512-Bx6jTBuiUbdywriWd0UAZK9v7FKEDCOD5uRh47qd4coGvx+dG4w8cOGe4TG2OoR1dNrXn6Aqaeu8MAA+Oz7vOw==
+
 jquery-offcanvas@^3.4.7:
   version "3.4.7"
   resolved "https://registry.yarnpkg.com/jquery-offcanvas/-/jquery-offcanvas-3.4.7.tgz#dde1f492f5904ff76bdd98ba42f1e514fa52ed70"

assets/css/theme.css

@@ -779,10 +779,6 @@ select {
   bottom: 50%;
 }
 
-.left-0 {
-  left: 0px;
-}
-
 .left-16 {
   left: 4rem;
 }
@@ -819,6 +815,10 @@ select {
   top: 100%;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -848,6 +848,16 @@ select {
   margin-right: auto;
 }
 
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.my-0\.5 {
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -871,10 +881,18 @@ select {
   margin-bottom: 4rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1019,10 +1037,6 @@ select {
   width: 3.5rem;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -1055,18 +1069,14 @@ select {
   width: 100%;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
-}
-
-.max-w-\[140px\] {
-  max-width: 140px;
-}
-
 .max-w-\[200px\] {
   max-width: 200px;
 }
 
+.max-w-\[240px\] {
+  max-width: 240px;
+}
+
 .max-w-\[250px\] {
   max-width: 250px;
 }
@@ -1075,12 +1085,20 @@ select {
   max-width: 100%;
 }
 
-.flex-1 {
+.max-w-\[342px\] {
-  flex: 1 1 0%;
+  max-width: 342px;
 }
 
-.shrink-0 {
+.max-w-\[171px\] {
-  flex-shrink: 0;
+  max-width: 171px;
+}
+
+.max-w-\[324px\] {
+  max-width: 324px;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
 }
 
 .-translate-y-1\/2 {
@@ -1088,16 +1106,6 @@ select {
   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;
-}
-
 .list-\[square\] {
   list-style-type: square;
 }
@@ -1186,6 +1194,10 @@ select {
   white-space: nowrap;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1198,6 +1210,11 @@ select {
   border-top-width: 1px;
 }
 
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+
 .border-blue-950 {
   --tw-border-opacity: 1;
   border-color: rgb(23 37 84 / var(--tw-border-opacity));
@@ -1213,6 +1230,16 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
 .border-gray-900 {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
@@ -1223,14 +1250,14 @@ select {
   border-color: rgb(254 226 226 / var(--tw-border-opacity));
 }
 
-.border-gray-800 {
+.border-red-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
-.bg-blue-900 {
+.bg-blue-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
 .bg-blue-950 {
@@ -1248,6 +1275,11 @@ select {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
 .bg-red-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
@@ -1258,6 +1290,22 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-blue-950\/50 {
+  background-color: rgb(23 37 84 / 0.5);
+}
+
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+
+.bg-black\/70 {
+  background-color: rgb(0 0 0 / 0.7);
+}
+
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1295,6 +1343,11 @@ select {
   padding-right: 1.5rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1325,11 +1378,6 @@ select {
   padding-bottom: 2rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -1461,11 +1509,21 @@ select {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-gray-950 {
+  --tw-text-opacity: 1;
+  color: rgb(3 7 18 / var(--tw-text-opacity));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-red-900 {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
@@ -1542,9 +1600,9 @@ ul {
   list-style-position: inside !important;
 }
 
-.hover\:bg-blue-800:hover {
+.even\:bg-gray-200:nth-child(even) {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-blue-900:hover {
@@ -1552,15 +1610,16 @@ ul {
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
 }
 
-.hover\:stroke-2:hover {
-  stroke-width: 2;
-}
-
 .hover\:text-blue-900:hover {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-50:hover {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -1571,6 +1630,11 @@ ul {
   color: rgb(3 7 18 / var(--tw-text-opacity));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .hover\:text-yellow-700:hover {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity));
@@ -1580,12 +1644,25 @@ ul {
   text-decoration-line: underline;
 }
 
+.hover\:no-underline:hover {
+  text-decoration-line: none;
+}
+
+.focus\:border-0:focus {
+  border-width: 0px;
+}
+
 .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);
 }
 
+.disabled\:bg-gray-600:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .disabled\:bg-gray-700:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1600,6 +1677,17 @@ ul {
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
+@media not all and (min-width: 768px) {
+  .max-md\:hidden {
+    display: none;
+  }
+
+  .max-md\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;
@@ -1607,10 +1695,18 @@ ul {
 }
 
 @media (min-width: 768px) {
+  .md\:absolute {
+    position: absolute;
+  }
+
   .md\:left-1\/2 {
     left: 50%;
   }
 
+  .md\:block {
+    display: block;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -1631,6 +1727,10 @@ ul {
     width: 6rem;
   }
 
+  .md\:w-\[25\%\] {
+    width: 25%;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1651,6 +1751,22 @@ ul {
     align-items: flex-start;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:justify-center {
+    justify-content: center;
+  }
+
+  .md\:justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  .md\:gap-0 {
+    gap: 0px;
+  }
+
   .md\:object-cover {
     -o-object-fit: cover;
        object-fit: cover;
@@ -1665,6 +1781,11 @@ ul {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -1688,6 +1809,14 @@ ul {
     width: 33.333333%;
   }
 
+  .lg\:w-1\/4 {
+    width: 25%;
+  }
+
+  .lg\:w-1\/5 {
+    width: 20%;
+  }
+
   .lg\:w-2\/5 {
     width: 40%;
   }

templates/catalog/_partials/category-footer.tpl

@@ -0,0 +1,9 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+<div id="js-product-list-footer">
+    {if !empty($category.additional_description) && $listing.pagination.items_shown_from == 1}
+      {$category.additional_description nofilter}
+    {/if}
+</div>

templates/catalog/_partials/category-header.tpl

@@ -22,20 +22,11 @@
  * @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-header">
+<div id="js-product-list-header" class="mb-8 flex flex-col gap-4">
-    {if $listing.pagination.items_shown_from == 1}
+  {if isset($subcategories) && $subcategories|@count> 0}
-        <div class="block-category card card-block">
+    <div class="flex">
-            <h1 class="h1">{$category.name}</h1>
+      <h2 class="tex-4xl font-bold">Categories</h2>
-            <div class="block-category-inner">
+    </div>
-                {if $category.description}
+    {include file='catalog/_partials/subcategories.tpl' subcategories=$subcategories}
-                    <div id="category-description" class="text-muted">{$category.description nofilter}</div>
+  {/if}
-                {/if}
-                {if $category.image.large.url}
-                    <div class="category-cover">
-                        <img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}">
-                    </div>
-                {/if}
-            </div>
-        </div>
-    {/if}
 </div>

templates/catalog/_partials/products-top.tpl

@@ -38,7 +38,7 @@
       </button>
     </div>
     <!-- Sort By Dropdown -->
-    <div class="flex">
+    <div class="flex max-w-[240px]">
       {block name='sort_by'}
         {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
       {/block}

templates/catalog/_partials/subcategories.tpl

@@ -0,0 +1,52 @@
+{**
+ * 2007-2019 PrestaShop and Contributors
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.txt.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2019 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *}
+{$componentName = 'subcategories'}
+{if !empty($subcategories)}
+  {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
+    <div id="subcategories" class="{$componentName} flex flex-col gap-2 md:flex-row">
+      {foreach from=$subcategories item=subcategory}
+        <div class="subcategory__wrapper flex-1 bg-gray-100">
+          <a class="subcategory relative" href="{$subcategory.url}" title="{$subcategory.name|escape:'html':'UTF-8'}">
+            <div class="subcategory__image w-full">
+              {if !empty($subcategory.image.large.url)}
+                <img
+                  class="img-fluid hidden md:block mx-auto w-full max-w-[171px] aspect-[342/513]"
+                  src="{$subcategory.image.large.url}"
+                  width="{$subcategory.image.large.width}"
+                  height="{$subcategory.image.large.height}"
+                  alt="{$subcategory.name|escape:'html':'UTF-8'}"
+                  loading="lazy"
+                >
+              {/if}
+            </div>
+            <div class="p-2 flex items-center w-full relative md:absolute left-0 bottom-0 right-0 top-0 bg-black/70 flex items-center justify-center">
+              <p class="subcategory__name font-bold text-center w-full text-gray-50">{$subcategory.name|escape:'html':'UTF-8'}</p>
+            </div>
+          </a>
+        </div>
+      {/foreach}
+    </div>
+  {/if}
+{/if}

templates/catalog/listing/category.tpl

@@ -25,4 +25,9 @@
 {extends file='catalog/listing/product-list.tpl'}
 
 {block name='product_list_header'}
+  {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
+{/block}
+
+{block name='product_list_footer'}
+  {include file='catalog/_partials/category-footer.tpl' listing=$listing category=$category}
 {/block}