From 479f98e30ebf76c7dac4745208e845a01e10cd84 Mon Sep 17 00:00:00 2001 From: tblivet Date: Fri, 17 May 2024 17:56:43 +0200 Subject: [PATCH 1/3] feat: improve product list display Enhance product list display for various layouts and introduce breakpoints for improved mobile display. --- .../views/templates/hook/ps_bestsellers.tpl | 2 +- .../templates/hook/ps_categoryproducts.tpl | 2 +- .../views/templates/hook/ps_crossselling.tpl | 2 +- .../templates/hook/ps_featuredproducts.tpl | 2 +- .../views/templates/hook/ps_newproducts.tpl | 2 +- .../views/templates/hook/ps_specials.tpl | 2 +- .../views/templates/hook/ps_viewedproduct.tpl | 2 +- .../variables/overrides/_overrides.scss | 29 +++++++------------ .../catalog/_partials/product-accessories.tpl | 2 +- templates/catalog/_partials/productlist.tpl | 2 +- templates/catalog/listing/product-list.tpl | 11 ++++++- templates/catalog/listing/search.tpl | 2 +- 12 files changed, 31 insertions(+), 29 deletions(-) diff --git a/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl b/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl index b6d80ae50..e2098e97d 100644 --- a/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl +++ b/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl @@ -5,7 +5,7 @@
{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'}
{l s='All best sellers' d='Shop.Theme.Catalog'} diff --git a/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl b/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl index 140f7000a..251ea9b02 100644 --- 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'}
diff --git a/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl b/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl index 7f65074e9..1c005f422 100644 --- a/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl +++ b/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl @@ -6,6 +6,6 @@
{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'}
diff --git a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl index 822b44943..796b01b65 100644 --- a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl +++ b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl @@ -5,7 +5,7 @@
{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'}
diff --git a/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl b/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl index 09c242283..a3e706dc9 100644 --- a/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl +++ b/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl @@ -6,7 +6,7 @@
{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'}
{l s='All new products' d='Shop.Theme.Catalog'} diff --git a/modules/ps_specials/views/templates/hook/ps_specials.tpl b/modules/ps_specials/views/templates/hook/ps_specials.tpl index e21832b73..871dc9e64 100644 --- a/modules/ps_specials/views/templates/hook/ps_specials.tpl +++ b/modules/ps_specials/views/templates/hook/ps_specials.tpl @@ -6,7 +6,7 @@
{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'}
{l s='All sale products' d='Shop.Theme.Catalog'} diff --git a/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl b/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl index 094ea9670..eb84ac445 100644 --- a/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl +++ b/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl @@ -5,6 +5,6 @@
{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'}
diff --git a/src/scss/abstract/variables/overrides/_overrides.scss b/src/scss/abstract/variables/overrides/_overrides.scss index 010e3c466..bfac107bd 100644 --- 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": 375px, // 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/templates/catalog/_partials/product-accessories.tpl b/templates/catalog/_partials/product-accessories.tpl index 4889b6417..a1c7cd51c 100644 --- a/templates/catalog/_partials/product-accessories.tpl +++ b/templates/catalog/_partials/product-accessories.tpl @@ -4,5 +4,5 @@ *}
{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'}
diff --git a/templates/catalog/_partials/productlist.tpl b/templates/catalog/_partials/productlist.tpl index e947336a6..064cedc12 100644 --- 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}
{foreach from=$products item='product' key='position'} diff --git a/templates/catalog/listing/product-list.tpl b/templates/catalog/listing/product-list.tpl index 929532cad..dcd190d8b 100644 --- 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 index 9d52e8de7..fdefa895f 100644 --- 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'} From 5ede008504a149d4b78b701e5aa40cd9c56bdaef Mon Sep 17 00:00:00 2001 From: tblivet Date: Fri, 17 May 2024 18:10:38 +0200 Subject: [PATCH 2/3] feat: improve pagination Enhanced pagination and added mobile optimizations. --- .../components/category/_pagination.scss | 54 +++++++++++++++++++ templates/_partials/pagination.tpl | 43 ++++++++++----- 2 files changed, 83 insertions(+), 14 deletions(-) diff --git a/src/scss/custom/components/category/_pagination.scss b/src/scss/custom/components/category/_pagination.scss index d0769ce57..296e723c8 100644 --- 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 index 16bda5e95..ef99b5891 100644 --- a/templates/_partials/pagination.tpl +++ b/templates/_partials/pagination.tpl @@ -16,25 +16,40 @@