From c932bed1e91df8b62b452039b0eea3efdbb595e9 Mon Sep 17 00:00:00 2001 From: Grzegorz Zawadzki Date: Thu, 9 Apr 2020 01:34:41 +0200 Subject: [PATCH 1/4] Improved product list and split into 2 Made some code global to be available for left column all time --- css/global.css | 53 +++++++++++++++++++++++++ product-list-column.tpl | 22 ++++++++++ sass/_theme_variables.scss | 4 +- sass/global.scss | 1 + sass/partials/_product_list_column.scss | 45 +++++++++++++++++++++ sass/product_list.scss | 14 ------- 6 files changed, 124 insertions(+), 15 deletions(-) create mode 100644 product-list-column.tpl create mode 100644 sass/partials/_product_list_column.scss diff --git a/css/global.css b/css/global.css index e86d889..2ffbf48 100644 --- a/css/global.css +++ b/css/global.css @@ -9804,6 +9804,59 @@ ul.address { font-size: 17px; } +.product_list_column { + text-align: center; +} + +.product_list_column article { + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #eee; +} + +.product_list_column article .product-price-button-wrapper, .product_list_column article .button-container { + margin: 10px 0; +} + +.product_list_column article .product-container { + margin: 0; +} + +.product_list_column .product-image-container { + position: relative; +} + +.product_list_column .product-image-container .quick-view { + position: absolute; + right: 0; + bottom: 0; +} + +.product_list_column .functional-buttons { + text-align: left; +} + +.product_list_column .price.product-price { + color: #ff6f61; + font-size: 1.3em; +} + +.quick-view { + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + display: block; + background: rgba(255, 255, 255, 0.7); + font-size: 16px; +} + +@media (max-width: 991px) { + .quick-view { + display: none; + } +} + .instant_search .productsSortForm { display: none; } diff --git a/product-list-column.tpl b/product-list-column.tpl new file mode 100644 index 0000000..0f80bdd --- /dev/null +++ b/product-list-column.tpl @@ -0,0 +1,22 @@ +{if !empty($products)} + + + {$show_functional_buttons = $page_name != 'index'} + + {strip} + + + {foreach from=$products item=product} +
  • + {include file='./product-list-item.tpl' product=$product show_functional_buttons=false} +
    • + {/foreach} + + + {/strip} + + {addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL} + {addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL} + {addJsDef comparator_max_item=$comparator_max_item} + {addJsDef comparedProductsIds=$compared_products} +{/if} diff --git a/sass/_theme_variables.scss b/sass/_theme_variables.scss index 8d9e98a..63c8dba 100644 --- a/sass/_theme_variables.scss +++ b/sass/_theme_variables.scss @@ -896,7 +896,9 @@ $dl-horizontal-breakpoint: $grid-float-breakpoint !default; $hr-border: $gray-lighter !default; - +//** Product List +$quick-view-btn-size: 50px; +$product-grid-item-hover-bg: #fff; diff --git a/sass/global.scss b/sass/global.scss index ee5313c..757070c 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -27,6 +27,7 @@ @import "partials/products"; @import "partials/boxes"; @import "partials/blocks"; +@import "partials/product_list_column"; @import "partials/sortbar"; @import "partials/pagination"; @import "partials/utilities"; diff --git a/sass/partials/_product_list_column.scss b/sass/partials/_product_list_column.scss new file mode 100644 index 0000000..f7f7a92 --- /dev/null +++ b/sass/partials/_product_list_column.scss @@ -0,0 +1,45 @@ +.product_list_column { + text-align: center; + article { + + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid $ps-border-color; + .product-price-button-wrapper, .button-container { + margin: 10px 0; + } + .product-container { + margin: 0; + } + } + .product-image-container { + position: relative; + .quick-view { + position: absolute; + right: 0; + bottom: 0; + } + } + .functional-buttons { + text-align: left; + } + .price.product-price { + color: $brand-primary; + font-size: 1.3em; + } + .img-responsive { + //border: 1px solid #0a86bf; + } +} +.quick-view { + width: $quick-view-btn-size; + height: $quick-view-btn-size; + line-height: $quick-view-btn-size; + text-align: center; + display: block; + background: rgba(255, 255, 255, 0.7); + font-size: 16px; + @media (max-width: $screen-sm-max) { + display: none; + } +} diff --git a/sass/product_list.scss b/sass/product_list.scss index 4ca4801..08cecca 100644 --- a/sass/product_list.scss +++ b/sass/product_list.scss @@ -2,8 +2,6 @@ @import "theme_variables"; @import "vendor_variables"; -$quick-view-btn-size: 50px; -$product-grid-item-hover-bg: #fff; h1.product-listing{ text-transform: uppercase; @@ -68,18 +66,6 @@ h1.product-listing{ // // Component classes // -.quick-view { - width: $quick-view-btn-size; - height: $quick-view-btn-size; - line-height: $quick-view-btn-size; - text-align: center; - display: block; - background: rgba(255, 255, 255, 0.7); - font-size: 16px; - @media (max-width: $screen-sm-max) { - display: none; - } -} .color-list-container { display: none; From 442c4d7aa1e10f9c4b7b1d88c523ca3e80f40658 Mon Sep 17 00:00:00 2001 From: Grzegorz Zawadzki Date: Thu, 9 Apr 2020 01:35:57 +0200 Subject: [PATCH 2/4] blockbestsellers and blocknewproducts now use new left column tpl --- modules/blockbestsellers/blockbestsellers.tpl | 2 +- .../views/templates/hook/blocknewproducts.tpl | 17 ++--------------- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/modules/blockbestsellers/blockbestsellers.tpl b/modules/blockbestsellers/blockbestsellers.tpl index 20e52f0..527cd8e 100644 --- a/modules/blockbestsellers/blockbestsellers.tpl +++ b/modules/blockbestsellers/blockbestsellers.tpl @@ -23,7 +23,7 @@

    {l s='What others' mod='blockbestsellers'} {l s='love' mod='blockbestsellers'} {l s='most' mod='blockbestsellers'}

    {l s='Browse our top selling products.' mod='blockbestsellers'}

    - {include file="$tpl_dir./product-list.tpl" products=$best_sellers class='blockbestsellers' id='blockbestsellers'} + {include file="$tpl_dir./product-list-column.tpl" products=$best_sellers class='blockbestsellers' id='blockbestsellers'} {else}
    • {l s='No best sellers at this time.' mod='blockbestsellers'}
      • diff --git a/modules/blocknewproducts/views/templates/hook/blocknewproducts.tpl b/modules/blocknewproducts/views/templates/hook/blocknewproducts.tpl index 70c5fd0..cfacd1f 100644 --- a/modules/blocknewproducts/views/templates/hook/blocknewproducts.tpl +++ b/modules/blocknewproducts/views/templates/hook/blocknewproducts.tpl @@ -21,21 +21,8 @@

      {l s='New products' mod='blocknewproducts'}

      {if $new_products !== false} -
        - {$imageSize=Image::getSize('medium')} - {foreach from=$new_products item='product' name='newProducts'} - {if $smarty.foreach.newProducts.index < 2} - {$product.legend|escape:html:'UTF-8'} - {/if} - {/foreach} -
      -
      - {foreach from=$new_products item=newproduct name=myLoop} -
      {$newproduct.name|strip_tags|escape:html:'UTF-8'}
      - {if $newproduct.description_short}
      {$newproduct.description_short|strip_tags:'UTF-8'|truncate:75:'...'}
      {l s='Read more' mod='blocknewproducts'}
      {/if} - {/foreach} -
      -

      » {l s='All new products' mod='blocknewproducts'}

      + {include file="$tpl_dir./product-list-column.tpl" products=$new_products class='blocknewproducts' id='blocknewproducts'} +

      » {l s='All new products' mod='blocknewproducts'}

      {else}

      » {l s='Do not allow new products at this time.' mod='blocknewproducts'}

      {/if} From 76a1af53b9d69187ade9619bbdca1d3af9e4a88a Mon Sep 17 00:00:00 2001 From: Grzegorz Zawadzki Date: Thu, 9 Apr 2020 11:26:03 +0200 Subject: [PATCH 3/4] Added missing CSS for product list --- css/product_list.css | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/css/product_list.css b/css/product_list.css index 5119a60..1758e00 100644 --- a/css/product_list.css +++ b/css/product_list.css @@ -56,22 +56,6 @@ h1.product-listing { transition: opacity .5s linear; } -.quick-view { - width: 50px; - height: 50px; - line-height: 50px; - text-align: center; - display: block; - background: rgba(255, 255, 255, 0.7); - font-size: 16px; -} - -@media (max-width: 991px) { - .quick-view { - display: none; - } -} - .color-list-container { display: none; margin-bottom: 10px; From 009ffb3eea9a2bdec758ebb44321fed71f6df107 Mon Sep 17 00:00:00 2001 From: Grzegorz Zawadzki Date: Thu, 9 Apr 2020 11:36:06 +0200 Subject: [PATCH 4/4] Mobile css fixes - 2 columns and adaptable buttons --- css/global.css | 14 ++++++++++++++ sass/partials/_product_list_column.scss | 12 ++++++++++++ 2 files changed, 26 insertions(+) diff --git a/css/global.css b/css/global.css index 2ffbf48..75b2fbb 100644 --- a/css/global.css +++ b/css/global.css @@ -9841,6 +9841,20 @@ ul.address { font-size: 1.3em; } +@media (min-width: 480px) and (max-width: 767px) { + .product_list_column > li { + width: 50%; + float: left; + } + .product_list_column > li:nth-child(odd) { + clear: left; + } +} + +.product_list_column .btn { + white-space: initial; +} + .quick-view { width: 50px; height: 50px; diff --git a/sass/partials/_product_list_column.scss b/sass/partials/_product_list_column.scss index f7f7a92..ca58b24 100644 --- a/sass/partials/_product_list_column.scss +++ b/sass/partials/_product_list_column.scss @@ -30,6 +30,18 @@ .img-responsive { //border: 1px solid #0a86bf; } + > li { + @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) { + width: 50%; + float: left; + &:nth-child(odd) { + clear: left; + } + } + } + .btn { + white-space: initial; + } } .quick-view { width: $quick-view-btn-size;