Merge pull request #627 from tblivet/issue-340

Fix: issue-340
PrestaShop · Jun 6, 2024 · 9674ff6 · 9674ff6
2 parents 60d1e51 + b3752eb
commit 9674ff6
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 43 deletions.
diff --git a/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl b/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl
@@ -5,7 +5,7 @@
 <section class="best-sellers-products mt-3">
     <div class="container">
         {include file='components/section-title.tpl' title={l s='Best Sellers' d='Shop.Theme.Catalog'}}
-        {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'}
+        {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
         <div class="best-sellers-products-footer text-center">
             <a class="all-product-link btn btn-outline-primary" href="{$allBestSellers}">
                 {l s='All best sellers' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>

diff --git a/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl b/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl
@@ -10,6 +10,6 @@
       {include file='components/section-title.tpl' title={l s='%s other products in the same category' sprintf=[$products|@count] d='Shop.Theme.Catalog'}}
     {/if}
 
-    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'}
+    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
   </div>
 </section>
diff --git a/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl b/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl
@@ -6,6 +6,6 @@
 <section class="featured-products mt-3">
   <div class="container">
     {include file='components/section-title.tpl' title={l s='Customers who bought this product also bought:' d='Shop.Theme.Catalog'}}
-    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'}
+    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
   </div>
 </section>
diff --git a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
@@ -5,7 +5,7 @@
 <section class="featured-products">
   <div class="container">
     {include file='components/section-title.tpl' title={l s='Popular Products' d='Shop.Theme.Catalog'}}
-    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'}
+    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
   </div>
 
   <div class="featured-products-footer text-center">

diff --git a/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl b/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl
@@ -6,7 +6,7 @@
 <section class="new-products mt-3">
     <div class="container">
         {include file='components/section-title.tpl' title={l s='New products' d='Shop.Theme.Catalog'}}
-        {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'}
+        {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
         <div class="new-products-footer text-center">
             <a class="all-product-link btn btn-outline-primary" href="{$allNewProductsLink}">
                 {l s='All new products' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>

diff --git a/modules/ps_specials/views/templates/hook/ps_specials.tpl b/modules/ps_specials/views/templates/hook/ps_specials.tpl
@@ -6,7 +6,7 @@
 <section class="sale-products mt-3">
     <div class="container">
         {include file='components/section-title.tpl' title={l s='On sale' d='Shop.Theme.Catalog'}}
-        {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'}
+        {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
         <div class="sale-products-footer text-center">
             <a class="all-product-link btn btn-outline-primary" href="{$allSpecialProductsLink}">
                 {l s='All sale products' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>

diff --git a/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl b/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl
@@ -5,6 +5,6 @@
 <section class="viewed-products mt-3">
   <div class="container">
     {include file='components/section-title.tpl' title={l s='Viewed products' d='Shop.Theme.Catalog'}}
-    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'}
+    {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
   </div>
 </section>
diff --git a/src/scss/abstract/variables/overrides/_overrides.scss b/src/scss/abstract/variables/overrides/_overrides.scss
@@ -1,22 +1,15 @@
-// IT IS FORBIDDEN TO USE REFERENCES TO BS5 VARIABLES BECAUSE THEY ARE NOT YET DECLARED.
-//$primary: #16181c;
-//secondary: #f39d72;
-//success: #21834d;
-//warning: #ff9a52;
-//danger: #ff4c4c;
+// Bootstrap variables, maps overrides
 
-//gray-100: #f6f6f6;
-//gray-200: #eaebec;
-//gray-300: #b3c7cd;
-//gray-600: #7a7a7a;
-//gray-700: #697180;
-//gray-800: #363a41;
-//gray-900: #232323;
-
-// THESE ARE FINE BECAUSE WE ARE REDEFINING THEM IN THIS SHEET
-//text-muted: $gray-600;
-
-//body-color: $gray-800;
+// Breakpoints
+$grid-breakpoints: (
+  "xxs": 0,
+  "xs": 360px, // Add breakpoint to give us flexibility on small devices
+  "sm": 576px,
+  "md": 768px,
+  "lg": 992px,
+  "xl": 1200px,
+  "xxl": 1400px
+);
 
 // Toasts
 $toast-border-width: 0;

diff --git a/src/scss/custom/components/category/_pagination.scss b/src/scss/custom/components/category/_pagination.scss
@@ -7,4 +7,58 @@ $component-name: pagination;
     font-size: 1rem;
     color: var(--bs-gray-600);
   }
+
+  @include media-breakpoint-down(sm) {
+    position: relative;
+    margin-bottom: 3.5rem;
+
+    .page-item {
+      &:nth-child(2) {
+        .page-link {
+          border-top-left-radius: var(--bs-pagination-border-radius);
+          border-bottom-left-radius: var(--bs-pagination-border-radius);
+        }
+      }
+
+      &:nth-last-child(2) {
+        .page-link {
+          border-top-right-radius: var(--bs-pagination-border-radius);
+          border-bottom-right-radius: var(--bs-pagination-border-radius);
+        }
+      }
+
+      &.disabled {
+        .page-link {
+          padding-inline: 0.375rem;
+        }
+      }
+
+      &:has(.previous),
+      &:has(.next) {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        transform-origin: center;
+      }
+
+      &:has(.previous) {
+        left: 50%;
+        transform: translateX(calc(-100% - 0.25rem));
+      }
+
+      &:has(.next) {
+        right: 50%;
+        transform: translateX(calc(100% + 0.25rem));
+      }
+    }
+
+    .page-link {
+      padding-inline: 0.625rem;
+
+      &.previous,
+      &.next {
+        padding: 0.5rem;
+        border-radius: 50%;
+      }
+    }
+  }
 }
diff --git a/templates/_partials/pagination.tpl b/templates/_partials/pagination.tpl
@@ -16,25 +16,40 @@
       <nav aria-label="{l s='Products pagination' d='Shop.Theme.Catalog'}">
         {if $pagination.should_be_displayed}
           <ul class="pagination">
-            {foreach from=$pagination.pages item="page"}
+            {foreach from=$pagination.pages item="page" name="paginationLoop"}
+              {if $page@iteration === 1}
+                <li class="page-item">
+                  <a rel="prev" href="{$page.url}"
+                    class="page-link btn-with-icon previous {['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
+                    <i class="material-icons rtl-flip" aria-hidden="true">&#xE314;</i>
+                    <span class="d-none d-xl-flex">{l s='Previous' d='Shop.Theme.Actions'}</span>
+                  </a>
+                </li>
+
+                {if $page.type === 'previous'}
+                  {continue}
+                {/if}
+              {/if}
+
               {if $page.type === 'spacer'}
                 <li class="page-item disabled">
                   <span class="page-link">&hellip;</span>
                 </li>
-              {else}
+              {else if $page.type != "prev" && $page.type != "next"}
                 <li class="page-item{if $page.current} active{/if}" {if $page.current}aria-current="page" {/if}>
-                  <a rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-                    href="{$page.url}"
-                    class="page-link btn-with-icon {if $page.type === 'previous'}previous {elseif $page.type === 'next'}next {/if}{['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
-                    {if $page.type === 'previous'}
-                      <i class="material-icons rtl-flip" aria-hidden="true">&#xE314;</i>
-                      <span class="d-none d-md-flex">{l s='Previous' d='Shop.Theme.Actions'}</span>
-                    {elseif $page.type === 'next'}
-                      <span class="d-none d-md-flex">{l s='Next' d='Shop.Theme.Actions'}</span>
-                      <i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
-                    {else}
-                      {$page.page}
-                    {/if}
+                  <a rel="nofollow" href="{$page.url}"
+                    class="page-link btn-with-icon {['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
+                    {$page.page}
+                  </a>
+                </li>
+              {/if}
+
+              {if $smarty.foreach.paginationLoop.last}
+                <li class="page-item">
+                  <a rel="next" href="{$page.url}"
+                    class="page-link btn-with-icon next {['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
+                    <span class="d-none d-xl-flex">{l s='Next' d='Shop.Theme.Actions'}</span>
+                    <i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
                   </a>
                 </li>
               {/if}

diff --git a/templates/catalog/_partials/product-accessories.tpl b/templates/catalog/_partials/product-accessories.tpl
@@ -4,5 +4,5 @@
  *}
  <section class="product-accessories mt-3">
   {include file='components/section-title.tpl' title={l s='You might also like' d='Shop.Theme.Catalog'}}
-  {include file='catalog/_partials/productlist.tpl' products=$accessories productClass='col-6 col-lg-4 col-xl-3'}
+  {include file='catalog/_partials/productlist.tpl' products=$accessories productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
 </section>
diff --git a/templates/catalog/_partials/productlist.tpl b/templates/catalog/_partials/productlist.tpl
@@ -2,7 +2,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
-{capture assign="productClasses"}{if !empty($productClass)}{$productClass}{else}col-6 col-xl-4{/if}{/capture}
+{capture assign="productClasses"}{if !empty($productClass)}{$productClass}{else}col-12 col-xs-6 col-xl-4{/if}{/capture}
 
 <div class="products{if !empty($cssClass)} {$cssClass}{else} row{/if}">
   {foreach from=$products item='product' key='position'}

diff --git a/templates/catalog/listing/product-list.tpl b/templates/catalog/listing/product-list.tpl
@@ -28,7 +28,16 @@
         {/block}
 
         {block name='product_list'}
-          {include file='catalog/_partials/products.tpl' listing=$listing productClass='col-6 col-xl-4'}
+          {if isset($page.body_classes['layout-full-width'])}
+            {assign var="classes" value="col-12 col-xs-6 col-lg-4 col-xl-3"}
+          {elseif isset($page.body_classes['layout-left-column']) || isset($page.body_classes['layout-right-column'])}
+            {assign var="classes" value="col-12 col-xs-6 col-xl-4"}
+          {elseif isset($page.body_classes['layout-both-columns'])}
+            {assign var="classes" value="col-12 col-xs-6 col-md-12 col-lg-6"}
+          {else}
+            {assign var="classes" value="col-12 col-xs-6 col-lg-4 col-xl-3"}
+          {/if}
+          {include file='catalog/_partials/products.tpl' listing=$listing productClass=$classes}
         {/block}
 
         {block name='product_list_bottom'}

diff --git a/templates/catalog/listing/search.tpl b/templates/catalog/listing/search.tpl
@@ -5,7 +5,7 @@
 {extends file='catalog/listing/product-list.tpl'}
 
 {block name='product_list'}
-  {include file='catalog/_partials/products.tpl' listing=$listing productClass='col-6 col-md-4 col-xl-3'}
+  {include file='catalog/_partials/products.tpl' listing=$listing productClass='col-12 col-xs-6 col-md-4 col-xl-3'}
 {/block}
 
 {block name='error_content'}