From bea08d1cb2bab99cf0296b0435e5bdb573d22b57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Tue, 8 Mar 2016 09:18:58 +0200 Subject: [PATCH 01/50] [*] TPL: Fix product-list.tpl indentation --- themes/community-theme-16/product-list.tpl | 66 ++++++++++------------ 1 file changed, 31 insertions(+), 35 deletions(-) mode change 100644 => 100755 themes/community-theme-16/product-list.tpl diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl old mode 100644 new mode 100755 index 6aa786b4..4ba7b39b --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -1,5 +1,4 @@ {if isset($products) && $products} - {foreach from=$products item=product name=products}
  • @@ -23,30 +22,29 @@
    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - {hook h="displayProductPriceBlock" product=$product type="before_price"} + {hook h="displayProductPriceBlock" product=$product type="before_price"} {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} {hook h="displayProductPriceBlock" product=$product type="old_price"} - {displayWtPrice p=$product.price_without_reduction} - + {displayWtPrice p=$product.price_without_reduction} + {if $product.specific_prices.reduction_type == 'percentage'} -{$product.specific_prices.reduction * 100}% {/if} {/if} {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - {if ($product.allow_oosp || $product.quantity > 0)} - {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} - {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - {l s='Product available with different options'} - - {else} - {l s='Out of stock'} - {/if} - + {if ($product.allow_oosp || $product.quantity > 0)} + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} + {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} + {l s='Product available with different options'} + {else} + {l s='Out of stock'} + {/if} + {/if} {hook h="displayProductPriceBlock" product=$product type="price"} {hook h="displayProductPriceBlock" product=$product type="unit_price"} @@ -88,13 +86,13 @@ {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} {hook h="displayProductPriceBlock" product=$product type='before_price'} - {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} {hook h="displayProductPriceBlock" product=$product type="old_price"} - {displayWtPrice p=$product.price_without_reduction} - + {displayWtPrice p=$product.price_without_reduction} + {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} {if $product.specific_prices.reduction_type == 'percentage'} -{$product.specific_prices.reduction * 100}% @@ -115,8 +113,8 @@ {else} - {l s='Add to cart'} - + {l s='Add to cart'} + {/if} {/if} @@ -140,20 +138,18 @@ {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - {if ($product.allow_oosp || $product.quantity > 0)} - - {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} - - {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - - {l s='Product available with different options'} - - {else} - - {l s='Out of stock'} - - {/if} - + {if ($product.allow_oosp || $product.quantity > 0)} + + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} + + {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} + + {l s='Product available with different options'} + + {else} + {l s='Out of stock'} + {/if} + {/if} {/if}
    @@ -167,7 +163,7 @@ {/if} {/if} - +
    • {/foreach} From 9a2b2d904927ec3f30e47a584b61797e037bad06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Tue, 8 Mar 2016 10:18:02 +0200 Subject: [PATCH 02/50] [*] CSS, HTML: Refactor product label (stickers: new, sale, etc) --- themes/community-theme-16/product-list.tpl | 40 +++--- themes/community-theme-16/product.tpl | 30 ++-- .../products-comparison.tpl | 27 ++-- .../sass/partials/_products.scss | 129 ++++-------------- themes/community-theme-16/sass/product.scss | 14 -- .../community-theme-16/sass/product_list.scss | 6 - themes/community-theme-16/scenes.tpl | 11 +- 7 files changed, 87 insertions(+), 170 deletions(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index 4ba7b39b..0bf130c2 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -4,6 +4,7 @@
  • +
    - {l s='New'} - - {/if} - {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - - {l s='Sale!'} - - {/if} + +
    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.online_only) && $product.online_only} + {l s='Online only'} + {/if} + {/if} + {if isset($product.new) && $product.new == 1} + {l s='New'} + {/if} + {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Sale!'} + {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Reduced price!'} + {/if} +
    +
    + {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} {hook h="displayProductPriceBlock" product=$product type="weight"}
    @@ -124,17 +133,6 @@ {if isset($product.color_list)}
    {$product.color_list}
    {/if} -
    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.online_only) && $product.online_only} - {l s='Online only'} - {/if} - {/if} - {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Reduced price!'} - {/if} -
    {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} diff --git a/themes/community-theme-16/product.tpl b/themes/community-theme-16/product.tpl index e2124aec..83fe53bf 100644 --- a/themes/community-theme-16/product.tpl +++ b/themes/community-theme-16/product.tpl @@ -36,18 +36,21 @@
    - {if $product->new} - - {l s='New'} - - {/if} - {if $product->on_sale} - - {l s='Sale!'} - - {elseif $product->specificPrice && $product->specificPrice.reduction && $productPriceWithoutReduction > $productPrice} - {l s='Reduced price!'} - {/if} + +
    + {if $product->online_only} + {l s='Online only'} + {/if} + {if $product->new} + {l s='New'} + {/if} + {if $product->on_sale} + {l s='Sale!'} + {elseif $product->specificPrice && $product->specificPrice.reduction && $productPriceWithoutReduction > $productPrice} + {l s='Reduced price!'} + {/if} +
    + {if $have_image} {if $jqZoomEnabled && $have_image && !$content_only} @@ -125,9 +128,6 @@
    - {if $product->online_only} -

    {l s='Online only'}

    - {/if}

    {$product->name|escape:'html':'UTF-8'}

    reference) || !$product->reference} style="display: none;"{/if}> diff --git a/themes/community-theme-16/products-comparison.tpl b/themes/community-theme-16/products-comparison.tpl index cf5d49df..f005857b 100644 --- a/themes/community-theme-16/products-comparison.tpl +++ b/themes/community-theme-16/products-comparison.tpl @@ -30,18 +30,23 @@ src="{$link->getImageLink($product->link_rewrite, $product->id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$product->name|escape:'html':'UTF-8'}" /> - {if isset($product->new) && $product->new == 1} - - {l s='New'} - - {/if} - {if isset($product->show_price) && $product->show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE} - {if $product->on_sale} - - {l s='Sale!'} - + +

    + {if (!$PS_CATALOG_MODE AND ((isset($product->show_price) && $product->show_price) || (isset($product->available_for_order) && $product->available_for_order)))} + {if isset($product->online_only) && $product->online_only} + {l s='Online only'} + {/if} {/if} - {/if} + {if isset($product->new) && $product->new == 1} + {l s='New'} + {/if} + {if isset($product->on_sale) && $product->on_sale && isset($product->show_price) && $product->show_price && !$PS_CATALOG_MODE} + {l s='Sale!'} + {elseif isset($product->reduction) && $product->reduction && isset($product->show_price) && $product->show_price && !$PS_CATALOG_MODE} + {l s='Reduced price!'} + {/if} +
    +
    diff --git a/themes/community-theme-16/sass/partials/_products.scss b/themes/community-theme-16/sass/partials/_products.scss index 29a46409..2e30f616 100644 --- a/themes/community-theme-16/sass/partials/_products.scss +++ b/themes/community-theme-16/sass/partials/_products.scss @@ -1,6 +1,4 @@ -//product elements -.product-name { -} +// .product-name {} .price { color: $product-price-color; @@ -44,110 +42,41 @@ } } -//Labels New/Sale -.new-box, -.sale-box { +.product-label-container { position: absolute; - top: -4px; - overflow: hidden; - height: 85px; - width: 85px; - text-align: center; - z-index: 0; -} - -.new-box { - left: -4px; + top: 0; + left: 0; + @include clearfix(); + .product-label { + float: left; + } } -.sale-box { - right: -5px; +.product-label { + font-size: 0.9em; + margin: 4px 0 0 4px; + padding: 2px 5px; + font-weight: bold; + background-color: #ccc; + color: #fff; + @include box-shadow(0 1px 2px rgba(0,0,0,0.15)); + &:last-of-type { + margin-right: 0; + } } -.new-label { - font-weight: 700; - font-size: 14px; - line-height: 12px; - color: #fff; +.product-label-new { background: #6ad4ff; - text-transform: uppercase; - padding: 9px 0 7px; - width: 130px; - text-align: center; - display: block; - position: absolute; - left: -33px; - top: 16px; - z-index: 1; - @include rotate(-45deg); - &:before { - position: absolute; - bottom: -3px; - right: 5px; - width: 0px; - height: 0px; - border-style: solid; - border-width: 4px 4px 0px 4px; - border-color: #21a3d8 transparent transparent transparent; - content: "."; - text-indent: -5000px; - @include rotate(225deg); - } - &:after { - position: absolute; - bottom: -3px; - left: 3px; - width: 0px; - height: 0px; - border-style: solid; - border-width: 4px 4px 0px 4px; - border-color: #21a3d8 transparent transparent transparent; - content: "."; - text-indent: -5000px; - @include rotate(135deg); - } } -.sale-label { - font-weight: 700; - font-size: 14px; - line-height: 12px; - color: #fff; +.product-label-sale { background: #f13340; - text-transform: uppercase; - padding: 9px 0 7px; - width: 130px; - text-align: center; - display: block; - position: absolute; - right: -33px; - top: 16px; - z-index: 1; - @include rotate(45deg); - &:before { - position: absolute; - bottom: -3px; - right: 4px; - width: 0px; - height: 0px; - border-style: solid; - border-width: 4px 4px 0px 4px; - border-color: #ad2b34 transparent transparent transparent; - content: "."; - text-indent: -5000px; - @include rotate(225deg); - } - &:after { - position: absolute; - bottom: -3px; - left: 5px; - width: 0px; - height: 0px; - border-style: solid; - border-width: 4px 4px 0px 4px; - border-color: #ad2b34 transparent transparent transparent; - content: "."; - text-indent: -5000px; - @include rotate(135deg); - } +} + +.product-label-discount { + background-color: #f13340; +} + +.product-label-online { + background-color: orange; } diff --git a/themes/community-theme-16/sass/product.scss b/themes/community-theme-16/sass/product.scss index 30d59fc0..c14f0b8f 100644 --- a/themes/community-theme-16/sass/product.scss +++ b/themes/community-theme-16/sass/product.scss @@ -83,10 +83,6 @@ a.fancybox-nav { .zoomPad { z-index : auto!important; } - .new-box, - .sale-box { - z-index: 5002 - } } } @@ -692,9 +688,6 @@ table.table-product-discounts{ .content_prices { padding: 13px 19px; } -.discount { - display: none; -} .our_price_display { font-weight: 600; font-size: 29px; @@ -740,13 +733,6 @@ table.table-product-discounts{ } } -/* online_only */ -.pb-center-column p.online_only { - font-weight: 700; - font-size: 13px; - color: #f13340; - text-align: left; -} .buttons_bottom_block { clear: both; padding: 13px 19px 0; diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 16716d4f..6d150204 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -359,12 +359,6 @@ ul.product_list.list { display: none !important; } } - .product-flags { - margin: -5px 0 10px 0; - .discount { - color: #f13340; - } - } h5 { padding-bottom: 8px; } diff --git a/themes/community-theme-16/scenes.tpl b/themes/community-theme-16/scenes.tpl index a4cd8b80..7aae49cb 100644 --- a/themes/community-theme-16/scenes.tpl +++ b/themes/community-theme-16/scenes.tpl @@ -20,12 +20,17 @@
    {$product.details->description_short|strip_tags|truncate:170:'...'}
    {if !$PS_CATALOG_MODE AND $product.details->show_price}
    - {if isset($product.details->new) AND $product.details->new}{l s='New'}{/if} + {if isset($product.details->online_only) AND $product.details->online_only} + {l s='Online only'} + {/if} + {if isset($product.details->new) AND $product.details->new} + {l s='New'} + {/if}

    {if $priceDisplay}{convertPrice price=$product.details->getPrice(false, $product.details->getDefaultAttribute($product.id_product))}{else}{convertPrice price=$product.details->getPrice(true, $product.details->getDefaultAttribute($product.id_product))}{/if}

    {if $product.details->on_sale} - {l s='Sale'} + {l s='Sale'} {elseif isset($product.reduction) && $product.reduction} - {l s='Reduced price!'} + {l s='Reduced price!'} {/if}
    {/if} From 09b362c71adec3ca35290e814cc1b9135082f3a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Tue, 8 Mar 2016 13:01:04 +0200 Subject: [PATCH 03/50] [*] CSS, HTML: Trim .quick-view button --- themes/community-theme-16/js/global.js | 2 +- themes/community-theme-16/product-list.tpl | 11 +- .../community-theme-16/sass/product_list.scss | 111 ++---------------- 3 files changed, 18 insertions(+), 106 deletions(-) diff --git a/themes/community-theme-16/js/global.js b/themes/community-theme-16/js/global.js index fded114f..19c109dc 100644 --- a/themes/community-theme-16/js/global.js +++ b/themes/community-theme-16/js/global.js @@ -163,7 +163,7 @@ function blockHover(status) { } function quick_view() { - $(document).on('click', '.quick-view:visible, .quick-view-mobile:visible', function(e) { + $(document).on('click', '.quick-view', function(e) { e.preventDefault(); var url = this.rel; var anchor = ''; diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index 0bf130c2..ff89790d 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -9,16 +9,13 @@     + {if isset($quick_view) && $quick_view} -
    - - - -
    - - {l s='Quick view'} + + {/if} + {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 6d150204..b90e3f31 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -4,17 +4,14 @@ //---------- Product Listing $base-listing-border-color: $ps-border-color; +$quick-view-btn-size: 31px; /******************************************************* Product list Styles ********************************************************/ ul.product_list { - .product-name { - display: inline-block; - width: 100%; - overflow: hidden; - } + // .product-name {} .availability { span { display: inline-block; @@ -51,82 +48,16 @@ ul.product_list { img { margin: 0 auto; } - .quick-view-wrapper-mobile { - display: none; - .quick-view-mobile { - display: none; - @media (max-width: $screen-md-max) { - display: block; - position: relative; - background-color: rgba(208, 208, 211, 0.57); - height: 130px; - width: 85px; - top: 80px; - right: -162px; - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - zoom: 1; - pointer-events: all; - i { - position: relative; - top: 48px; - left: -20px; - font-size: x-large; - color: black; - } - i:before{ - -moz-transform: rotate(315deg); - -o-transform: rotate(315deg); - -webkit-transform: rotate(315deg); - -ms-transform: rotate(315deg); - transform: rotate(315deg); - } - } - } - .quick-view-mobile:hover{ - @media (max-width: $screen-md-max) { - background-color: rgba(167, 167, 167, 0.57); - } - } - @media (max-width: $screen-md-max) { - display: block; - background-color: transparent; - height: 155px; - width: 215px; - position: absolute; - overflow: hidden; - pointer-events: none; - bottom: 0px; - right: 0px; - } - } .quick-view { - font-weight: 700; - font-size: 13px; - line-height: 16px; - color: #777676; + width: $quick-view-btn-size; position: absolute; - left: 50%; - top: 50%; - margin: -21px 0 0 -53px; - padding: 13px 0 0; - background: rgba(255,255,255,0.82); - width: 107px; - height: 43px; + top: 0; + right: 0; text-align: center; - @include box-shadow(rgba(black, 0.16) 0 2px 8px); - @media (max-width: $screen-md-max) { - display: none; - } - @media (min-width: $screen-lg) { // min 1200px - display: none; - } - @media (max-width: $screen-xs-max) { // max 767px - display: none; - } + padding: 5px 8px; + border: 1px solid #ccc; + border-right: none; + border-top: none; } } .comments_note { @@ -227,6 +158,10 @@ ul.product_list.grid { margin-left: auto; margin-right: auto; } + .product-label-container { + padding-right: $quick-view-btn-size; + } + .content_price { position: absolute; left: 0; @@ -309,9 +244,6 @@ ul.product_list.grid { .content_price { display: block; } - .quick-view { - display: block; - } } .functional-buttons, .button-container, @@ -461,15 +393,6 @@ ul.product_list.list { } } } - @media (min-width: $screen-lg) { // min 1200px - &:hover { - .product-image-container { - .quick-view { - display: block; - } - } - } - } @media (max-width: $screen-xs - 1) { // max 479px text-align: center; } @@ -495,11 +418,3 @@ Product list(Index page) Styles } } } -/***** IE code *****/ - -.ie8 { - .quick-view { - background: #fff; - border: 1px solid $ps-border-color; - } -} From b1bcaf428c1acd50b54b3042fffbd3c00a8b4dbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Tue, 8 Mar 2016 13:20:56 +0200 Subject: [PATCH 04/50] [-] JS: Remove .product-flags from JS template, because it is no longer present --- themes/community-theme-16/js/global.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/themes/community-theme-16/js/global.js b/themes/community-theme-16/js/global.js index 19c109dc..45df5b91 100644 --- a/themes/community-theme-16/js/global.js +++ b/themes/community-theme-16/js/global.js @@ -228,7 +228,6 @@ function display(view) { html = '
    '; html += '
    ' + $(element).find('.left-block').html() + '
    '; html += '
    '; - html += '
    ' + $(element).find('.product-flags').html() + '
    '; html += '
    ' + $(element).find('h5').html() + '
    '; var hookReviews = $(element).find('.hook-reviews'); if (hookReviews.length) { @@ -266,7 +265,6 @@ function display(view) { html += '
    '; html += '
    ' + $(element).find('.left-block').html() + '
    '; html += '
    '; - html += '
    ' + $(element).find('.product-flags').html() + '
    '; html += '
    ' + $(element).find('h5').html() + '
    '; var hookReviews = $(element).find('.hook-reviews'); if (hookReviews.length) { From d9ad0d9cd5f53cd0d2859a1ff419231e460b1029 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:12:10 +0200 Subject: [PATCH 05/50] [~] JS: Remove blockHover Js function, leave prdocut list class toggling only --- .../js/autoload/20-compatibility.js | 1 + themes/community-theme-16/js/global.js | 116 ++---------------- 2 files changed, 8 insertions(+), 109 deletions(-) diff --git a/themes/community-theme-16/js/autoload/20-compatibility.js b/themes/community-theme-16/js/autoload/20-compatibility.js index 7eaaa1ab..a33e1751 100644 --- a/themes/community-theme-16/js/autoload/20-compatibility.js +++ b/themes/community-theme-16/js/autoload/20-compatibility.js @@ -21,3 +21,4 @@ function accordion(s) {} function openBranch($, n) {} function closeBranch($, n) {} function toggleBranch($, n) {} +function blockHover(s) {} diff --git a/themes/community-theme-16/js/global.js b/themes/community-theme-16/js/global.js index 45df5b91..188ee2cb 100644 --- a/themes/community-theme-16/js/global.js +++ b/themes/community-theme-16/js/global.js @@ -133,33 +133,6 @@ function responsiveResize() { } else if (($(window).width() + scrollCompensate()) >= 768) { responsiveflag = false; } - blockHover(); -} - -function blockHover(status) { - var screenLg = $('body').find('.container').width() == 1170; - - if ($('.product_list').is('.grid')) - if (screenLg) - $('.product_list .button-container').hide(); - else - $('.product_list .button-container').show(); - - $(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e) { - if (screenLg) { - var pcHeight = $(this).parent().outerHeight(); - var pcPHeight = $(this).parent().find('.button-container').outerHeight() + $(this).parent().find('.comments_note').outerHeight() + $(this).parent().find('.functional-buttons').outerHeight(); - $(this).parent().addClass('hovered').css({'height': pcHeight + pcPHeight, 'margin-bottom': pcPHeight * (-1)}); - $(this).find('.button-container').show(); - } - }); - - $(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e) { - if (screenLg) { - $(this).parent().removeClass('hovered').css({'height': 'auto', 'margin-bottom': '0'}); - $(this).find('.button-container').hide(); - } - }); } function quick_view() { @@ -199,14 +172,7 @@ function bindGrid() { } var view = $.totalStorage('display'); - - if (!view && (typeof displayList != 'undefined') && displayList) - view = 'list'; - - if (view && view != 'grid') - display(view); - else - $('.display').find('li#grid').addClass('selected'); + display(view); $(document).on('click', '#grid', function(e) { e.preventDefault(); @@ -219,78 +185,10 @@ function bindGrid() { }); } -function display(view) { - if (view == 'list') { - $('ul.product_list').removeClass('grid').addClass('list row'); - $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12'); - $('.product_list > li').each(function(index, element) { - var html = ''; - html = '
    '; - html += '
    ' + $(element).find('.left-block').html() + '
    '; - html += '
    '; - html += '
    ' + $(element).find('h5').html() + '
    '; - var hookReviews = $(element).find('.hook-reviews'); - if (hookReviews.length) { - html += hookReviews.clone().wrap('
    ').parent().html(); - } - html += '

    ' + $(element).find('.product-desc').html() + '

    '; - var colorList = $(element).find('.color-list-container').html(); - if (colorList != null) { - html += '
    ' + colorList + '
    '; - } - var availability = $(element).find('.availability').html(); // check : catalog mode is enabled - if (availability != null) { - html += '' + availability + ''; - } - html += '
    '; - html += '
    '; - var price = $(element).find('.content_price').html(); // check : catalog mode is enabled - if (price != null) { - html += '
    ' + price + '
    '; - } - html += '
    ' + $(element).find('.button-container').html() + '
    '; - html += '
    ' + $(element).find('.functional-buttons').html() + '
    '; - html += '
    '; - html += '
    '; - $(element).html(html); - }); - $('.display').find('li#list').addClass('selected'); - $('.display').find('li#grid').removeAttr('class'); - $.totalStorage('display', 'list'); - } else { - $('ul.product_list').removeClass('list').addClass('grid row'); - $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4'); - $('.product_list > li').each(function(index, element) { - var html = ''; - html += '
    '; - html += '
    ' + $(element).find('.left-block').html() + '
    '; - html += '
    '; - html += '
    ' + $(element).find('h5').html() + '
    '; - var hookReviews = $(element).find('.hook-reviews'); - if (hookReviews.length) { - html += hookReviews.clone().wrap('
    ').parent().html(); - } - html += '

    ' + $(element).find('.product-desc').html() + '

    '; - var price = $(element).find('.content_price').html(); // check : catalog mode is enabled - if (price != null) { - html += '
    ' + price + '
    '; - } - html += '
    ' + $(element).find('.button-container').html() + '
    '; - var colorList = $(element).find('.color-list-container').html(); - if (colorList != null) { - html += '
    ' + colorList + '
    '; - } - var availability = $(element).find('.availability').html(); // check : catalog mode is enabled - if (availability != null) { - html += '' + availability + ''; - } - html += '
    '; - html += '
    ' + $(element).find('.functional-buttons').html() + '
    '; - html += '
    '; - $(element).html(html); - }); - $('.display').find('li#grid').addClass('selected'); - $('.display').find('li#list').removeAttr('class'); - $.totalStorage('display', 'grid'); - } +function display(layoutType) { + var grid = layoutType == 'grid'; + $('.product_list').toggleClass('product-grid', grid).toggleClass('product-list', !grid); + $('#list').toggleClass('selected', !grid); + $('#grid').toggleClass('selected', grid); + $.totalStorage('display', grid ? 'grid' : 'list'); } From f25f801233ed19773b945be421f54c5b249f6838 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:12:33 +0200 Subject: [PATCH 06/50] [+] CSS: Add .list-grid and .no-gutter utilities --- .../sass/partials/_utilities.scss | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/themes/community-theme-16/sass/partials/_utilities.scss b/themes/community-theme-16/sass/partials/_utilities.scss index 06bf8c03..b1f137b4 100644 --- a/themes/community-theme-16/sass/partials/_utilities.scss +++ b/themes/community-theme-16/sass/partials/_utilities.scss @@ -23,3 +23,41 @@ z-index: 110; } } + +.no-gutter { + &.row { + margin-right: 0; + margin-left: 0; + } + > [class*="col-"] { + padding-right:0; + padding-left:0; + } +} + +// Usage:
      +//
    • ...
      • +// +// Important: To ensure this work correctly on mobile, +// make sure there are no whitespaces between
    • tags: +//
    • +// +ul.list-grid { + display: block; + list-style: none; + padding: 0; + + // Remove whitespace between inline elements (out columns) + // May not work on mobile. Make sure there is no whitespace inside the templates + // between
    • + font-size: 0; + + > li { + // Restore base font size + font-size: $font-size-base; + + display: inline-block; + vertical-align: top; + float: none; + } +} From a93beca6f495e71ae99cd3c7090d13452b50d2fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:15:24 +0200 Subject: [PATCH 07/50] [*] HTML: Change add to cart button classes in product list --- themes/community-theme-16/product-list.tpl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index ff89790d..d63817fa 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -114,16 +114,16 @@ {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} - + {l s='Add to cart'} {else} - + {l s='Add to cart'} {/if} {/if} - + {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if}
    From df78a01f77cd1e0819e932c4f2cb07faa5edab89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:21:27 +0200 Subject: [PATCH 08/50] [*] TPL: Refactor some isset statements to !empty in product-list.tpl --- themes/community-theme-16/product-list.tpl | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index d63817fa..ec1f8a70 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -1,7 +1,8 @@ -{if isset($products) && $products} - +{if !empty($products)} + {foreach from=$products item=product name=products}
  • +
    @@ -159,11 +160,14 @@
    {/if}
    +
    • {/foreach} + {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} From 782570f833f85b15858b8f3b19c68533b47459b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:22:39 +0200 Subject: [PATCH 09/50] [*] TPL: Drop smarty foreach loop reference --- themes/community-theme-16/product-list.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index ec1f8a70..f639c4ca 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -1,6 +1,6 @@ {if !empty($products)} - {foreach from=$products item=product name=products} + {foreach from=$products item=product}
  • From 5fd66f9112b518b25267480e248c07ebf541cfe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:26:17 +0200 Subject: [PATCH 10/50] [*] TPL: Refactor page conditional into template vars defined at the top of template --- themes/community-theme-16/product-list.tpl | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index f639c4ca..0c18c4c5 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -1,7 +1,16 @@ {if !empty($products)} + + {if $page_name == 'index' || $page_name == 'product'} + {$product_block_size_class = 'col-xs-12 col-sm-4 col-md-3'} + {else} + {$product_block_size_class = 'col-xs-12 col-sm-6 col-md-4'} + {/if} + + {$show_functional_buttons = $page_name != 'index'} + {foreach from=$products item=product} -
  • +
  • @@ -149,7 +158,8 @@ {/if} {/if}
    - {if $page_name != 'index'} + + {if $show_functional_buttons}
    {hook h='displayProductListFunctionalButtons' product=$product} {if isset($comparator_max_item) && $comparator_max_item} @@ -159,6 +169,7 @@ {/if}
    {/if} +
    • From b790726bdc4d1a478bb300e195deba7a63ce12f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:26:38 +0200 Subject: [PATCH 11/50] [*] HTML: Give product img .center-block class --- themes/community-theme-16/product-list.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index 0c18c4c5..7f6b3d01 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -17,7 +17,7 @@
    {if isset($quick_view) && $quick_view} From 1a4b3a1ac4827822ced5ab656e56afac914fba9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:30:22 +0200 Subject: [PATCH 12/50] [*] CSS: Remove unnecessary rule for product list images --- themes/community-theme-16/sass/product_list.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index b90e3f31..fe9d96d3 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -45,9 +45,6 @@ ul.product_list { } .product-image-container { text-align: center; - img { - margin: 0 auto; - } .quick-view { width: $quick-view-btn-size; position: absolute; From 68570d215733d709de5fcc96134d82a293ffd334 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:37:10 +0200 Subject: [PATCH 13/50] [*] TPl: Create separate template for a single product list item --- .../community-theme-16/product-list-item.tpl | 159 ++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 themes/community-theme-16/product-list-item.tpl diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl new file mode 100644 index 00000000..7f24e0f5 --- /dev/null +++ b/themes/community-theme-16/product-list-item.tpl @@ -0,0 +1,159 @@ +
    +
    + +
    + + + {if isset($quick_view) && $quick_view} + + + + {/if} + + {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + + {hook h="displayProductPriceBlock" product=$product type="before_price"} + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} + + + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + + {displayWtPrice p=$product.price_without_reduction} + + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% + {/if} + {/if} + {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} + + {if ($product.allow_oosp || $product.quantity > 0)} + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} + {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} + {l s='Product available with different options'} + {else} + {l s='Out of stock'} + {/if} + + {/if} + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {/if} +
    + {/if} + +
    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.online_only) && $product.online_only} + {l s='Online only'} + {/if} + {/if} + {if isset($product.new) && $product.new == 1} + {l s='New'} + {/if} + {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Sale!'} + {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Reduced price!'} + {/if} +
    + +
    + + {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} + {hook h="displayProductPriceBlock" product=$product type="weight"} +
    +
    +
    + {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} + +
    + {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} + {if $smarty.capture.displayProductListReviews} +
    + {hook h='displayProductListReviews' product=$product} +
    + {/if} +

    + {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} +

    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + {hook h="displayProductPriceBlock" product=$product type='before_price'} + + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} + + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + + {displayWtPrice p=$product.price_without_reduction} + + {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% + {/if} + {/if} + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {hook h="displayProductPriceBlock" product=$product type='after_price'} + {/if} +
    + {/if} +
    + {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} + {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} + {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} + + {l s='Add to cart'} + + {else} + + {l s='Add to cart'} + + {/if} + {/if} + + {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} + +
    + {if isset($product.color_list)} +
    {$product.color_list}
    + {/if} + {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} + + {if ($product.allow_oosp || $product.quantity > 0)} + + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} + + {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} + + {l s='Product available with different options'} + + {else} + {l s='Out of stock'} + {/if} + + {/if} + {/if} +
    + + {if $show_functional_buttons} +
    + {hook h='displayProductListFunctionalButtons' product=$product} + {if isset($comparator_max_item) && $comparator_max_item} +
    + {l s='Add to Compare'} +
    + {/if} +
    + {/if} + +
    From 5b7a585cbd07666ce4aedea7b3db9577df8359e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 11:38:20 +0200 Subject: [PATCH 14/50] [*] TPL: Include product list item template iside product list
      + use .list-grid --- themes/community-theme-16/product-list.tpl | 170 +-------------------- 1 file changed, 6 insertions(+), 164 deletions(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index 7f6b3d01..fcb7bd92 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -8,172 +8,14 @@ {$show_functional_buttons = $page_name != 'index'} - - {foreach from=$products item=product} -
    • + -
      -
      + {* IMPORTANT! There must be no spaces betweem
    • tags! *} + {foreach from=$products item=product}
    • + {include file='./product-list-item.tpl' product=$product} +
      • {/foreach} + {* IMPORTANT! There must be no spaces betweem
    • tags! *} -
      - - - {if isset($quick_view) && $quick_view} - - - - {/if} - - {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
      - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - - {hook h="displayProductPriceBlock" product=$product type="before_price"} - {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - - - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - - {displayWtPrice p=$product.price_without_reduction} - - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% - {/if} - {/if} - {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - - {if ($product.allow_oosp || $product.quantity > 0)} - {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} - {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - {l s='Product available with different options'} - {else} - {l s='Out of stock'} - {/if} - - {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} - {/if} -
      - {/if} - -
      - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.online_only) && $product.online_only} - {l s='Online only'} - {/if} - {/if} - {if isset($product.new) && $product.new == 1} - {l s='New'} - {/if} - {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Sale!'} - {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Reduced price!'} - {/if} -
      - -
      - - {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} - {hook h="displayProductPriceBlock" product=$product type="weight"} -
    -
    -
    - {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} - -
    - {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} - {if $smarty.capture.displayProductListReviews} -
    - {hook h='displayProductListReviews' product=$product} -
    - {/if} -

    - {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} -

    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - {hook h="displayProductPriceBlock" product=$product type='before_price'} - - {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - - {displayWtPrice p=$product.price_without_reduction} - - {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% - {/if} - {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} - {hook h="displayProductPriceBlock" product=$product type='after_price'} - {/if} -
    - {/if} -
    - {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} - {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} - {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} - - {l s='Add to cart'} - - {else} - - {l s='Add to cart'} - - {/if} - {/if} - - {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} - -
    - {if isset($product.color_list)} -
    {$product.color_list}
    - {/if} - {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - - {if ($product.allow_oosp || $product.quantity > 0)} - - {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} - - {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - - {l s='Product available with different options'} - - {else} - {l s='Out of stock'} - {/if} - - {/if} - {/if} -
    - - {if $show_functional_buttons} -
    - {hook h='displayProductListFunctionalButtons' product=$product} - {if isset($comparator_max_item) && $comparator_max_item} -
    - {l s='Add to Compare'} -
    - {/if} -
    - {/if} - -
    - -
    • - {/foreach} {addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL} From 8319da39236c87e44f086e41142ea4f6c382e919 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 12:50:54 +0200 Subject: [PATCH 15/50] [*] HTML: Reorder product card into 3 section: image, description, actions --- .../community-theme-16/product-list-item.tpl | 117 +++++++++--------- 1 file changed, 60 insertions(+), 57 deletions(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index 7f24e0f5..74257e73 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -1,36 +1,35 @@
    -
    -
    - +
    + - {if isset($quick_view) && $quick_view} - - - - {/if} + {if isset($quick_view) && $quick_view} + + + + {/if} - {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - + {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + {hook h="displayProductPriceBlock" product=$product type="before_price"} - {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - + + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + {displayWtPrice p=$product.price_without_reduction} - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% - {/if} + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% {/if} - {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - + {/if} + {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} + {if ($product.allow_oosp || $product.quantity > 0)} {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} @@ -39,35 +38,33 @@ {l s='Out of stock'} {/if} - {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} - {/if} -
    - {/if} - -
    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.online_only) && $product.online_only} - {l s='Online only'} {/if} - {/if} - {if isset($product.new) && $product.new == 1} - {l s='New'} - {/if} - {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Sale!'} - {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Reduced price!'} + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} {/if}
    + {/if} +
    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.online_only) && $product.online_only} + {l s='Online only'} + {/if} + {/if} + {if isset($product.new) && $product.new == 1} + {l s='New'} + {/if} + {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Sale!'} + {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Reduced price!'} + {/if}
    - {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} - {hook h="displayProductPriceBlock" product=$product type="weight"}
    -
    + +
    +
    {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
    {l s='Add to Compare'} +
    + {/if} +
    + {/if}
    - {if $show_functional_buttons} -
    - {hook h='displayProductListFunctionalButtons' product=$product} - {if isset($comparator_max_item) && $comparator_max_item} -
    - {l s='Add to Compare'} -
    - {/if} -
    - {/if} -
    From 4f7115c80f8db7fe754242ca953d4e4636cd29cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gytis=20=C5=A0k=C4=97ma?= Date: Wed, 9 Mar 2016 12:52:01 +0200 Subject: [PATCH 16/50] [*] HTML: Do not truncate product name in product card --- themes/community-theme-16/product-list-item.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index 74257e73..fd9f71d1 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -68,7 +68,7 @@
    {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
    {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} From 2f52a7263b4b150ded09be3a13224bec9c3a7ee0 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 10:37:33 +0200 Subject: [PATCH 17/50] [*] CSS: Reset product list styles --- .../community-theme-16/sass/product_list.scss | 422 +----------------- 1 file changed, 20 insertions(+), 402 deletions(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index fe9d96d3..79d04bad 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -2,416 +2,34 @@ @import "theme_variables"; @import "vendor_variables"; -//---------- Product Listing -$base-listing-border-color: $ps-border-color; $quick-view-btn-size: 31px; -/******************************************************* -Product list Styles -********************************************************/ +// +// Transformation classes +// +.product-grid { -ul.product_list { - // .product-name {} - .availability { - span { - display: inline-block; - color: #fff; - font-weight: bold; - padding: 3px 8px 4px 8px; - margin-bottom: 20px; - } - } - .color-list-container { - margin-bottom: 12px; - ul { - li { - display: inline-block; - border: 1px solid $ps-border-color; - width: 26px; - height: 26px; - a { - display: block; - width: 22px; - height: 22px; - margin: 1px; - img { - display: block; - width: 22px; - height: 22px; - } - } - } - } - } - .product-image-container { - text-align: center; - .quick-view { - width: $quick-view-btn-size; - position: absolute; - top: 0; - right: 0; - text-align: center; - padding: 5px 8px; - border: 1px solid #ccc; - border-right: none; - border-top: none; - } - } - .comments_note { - text-align: left; - overflow: hidden; - .star_content { - float: left; - } - .nb-comments { - overflow: hidden; - font-style: italic; - } - } - .functional-buttons { - div { - a, label { - font-weight: bold; - color: #777676; - cursor: pointer; - &:hover { - color: #000; - } - } - &.wishlist { - border-right: 1px solid $ps-border-color; - a:before { - display: inline-block; - font-family: $font-icon; - content: "\f08a"; - margin-right: 3px; - padding: 0 3px; - } - a.checked:before { - content: "\f004"; - } - @media (min-width: $screen-md) and (max-width: $screen-md-max) { // min 992px max 1199px - border-right: 0; - a:before { - display:none; - } - } - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px - border-right: 0; - a:before { - display:none; - } - } - } - &.compare { - a { - &:before { - content: "\f067"; - display: inline-block; - font-family: $font-icon; - margin-right: 3px; - @media (min-width: $screen-md) and (max-width: $screen-md-max) { // min 992px max 1199px - display: none; - } - - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px - display: none; - } - } - &.checked { - &:before { - content: "\f068"; - } - } - } - } - } - } } -/******************************************************* -Product list(Grid) Styles -********************************************************/ - -ul.product_list.grid { - > li { - padding-bottom: 20px; - text-align: center; - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px - width: 50%; - float: left; - } - .product-container { - background: #fff; - padding: 0; - position: relative; - .product-image-container { - border: 1px solid $base-listing-border-color; - // @Warning! Floating point size of scaled image might break
  • lines - padding: 5px; - margin-bottom: 13px; - position: relative; - @media (max-width: $screen-xs-max) { // max 767px - margin-left: auto; - margin-right: auto; - } - .product-label-container { - padding-right: $quick-view-btn-size; - } +.product-list { - .content_price { - position: absolute; - left: 0; - bottom: -1px; - width: 100%; - background: url(../img/price-container-bg.png); - padding: 9px 0; - display: none; - span { - color: #fff; - &.old-price { - color: #b1b0b0; - } - } - } - } - h5 { - padding: 0 15px 7px 15px; - min-height: 60px; - } - .comments_note { - @media (min-width: $screen-lg) { // min 1200px - display: none; - } - .star_content { - margin: 0 3px 12px 59px; - } - } - .product-desc { - display: none; - } - .content_price { - padding-bottom: 9px; - line-height: 21px; - } - .old-price, - .price, - .price-percent-reduction { - display: inline-block; - } - .product-flags { - display: none; - } - .old-price { - margin-right: 5px; - } - .button-container { - @media (min-width: $screen-lg) { // min 1200px - display: none; - } - margin-bottom: 14px; - .ajax_add_to_cart_button, - .btn { - margin: 0 6px 10px 6px; - } - } - .functional-buttons { - background: url(../img/functional-bt-shadow.png) repeat-x; - padding: 11px 0 5px; - @media (min-width: $screen-lg) { // min 1200px - display: none; - } - div { - width: 50%; - float: left; - padding: 3px 0 4px 0; - } - } - } - @media (min-width: $screen-lg) { // min 1200px - &.hovered { - .product-container { - @include box-shadow(rgba(black, 0.17) 0 0 13px); - position: relative; - z-index: 10; - .content_price { - display: none; - } - .product-image-container { - .content_price { - display: block; - } - } - .functional-buttons, - .button-container, - .comments_note { - display: block; - } - } - } - } - } - li.hovered{ - h5 { - min-height: 30px; - } - } } -#blockpack { -} - -/******************************************************* -Product list(List) Styles -********************************************************/ -ul.product_list.list { - > li { - .left-block { - @media (max-width: $screen-xs - 1) { // max 479px - width: 100%; - } - } - .product-container { - border-top: 1px solid $ps-border-color; - padding: 30px 0 30px; - } - .product-image-container { - position: relative; - border: 1px solid $base-listing-border-color; - // @Warning! Floating point size of scaled image might break
  • lines - padding: 5px; - @media (max-width: $screen-xs - 1) { // max 479px - max-width: 290px; - margin: 0 auto; - } - .content_price { - display: none !important; - } - } - h5 { - padding-bottom: 8px; - } - .product-desc { - margin-bottom: 15px; - } - .center-block { - @media (max-width: $screen-xs - 1) { // max 479px - width: 100%; - } - .comments_note { - margin-bottom: 12px; - } - } - .right-block { - .right-block-content { - @media (min-width: $screen-md) { // min 991px - margin: 0; - border-left: 1px solid $ps-border-color; - padding-left: 15px; - padding-bottom: 16px; - } - - @media (max-width: $screen-sm-max) { // max 991px - padding-top: 20px; - } - - @media (max-width: $screen-xs - 1) { // max 479px - padding-top: 5px; - } - .content_price { - padding-bottom: 10px; - @media (max-width: $screen-sm-max) { // max 991px - padding-top: 13px; - padding-bottom: 0; - } - - @media (max-width: $screen-xs - 1) { // max 479px - padding-top: 0; - width: 100%; - } - .price { - display: inline-block; - margin-top: -4px; - margin-bottom: 14px; - &.old-price { - margin-right: 8px; - } - } - } - .button-container { - overflow: hidden; - padding-bottom: 20px; - @media (max-width: $screen-xs - 1) { // max 479px - width: 100%; - } - .btn { - margin-bottom: 10px; - @media (min-width: $screen-md) { // min 991px - float: left; - clear: both; - } - } - } - .functional-buttons { - @media (min-width: $screen-md) { // min 991px - overflow: hidden; - } - @media (max-width: $screen-sm-max) { // max 991px - clear: both; - > div { - float: left; - padding-top: 0 !important; - padding-right: 20px; - } - } - @media (max-width: $screen-xs - 1) { // max 479px - float: none; - display: inline-block; - a, label { - i, &:before { - display: none !important; - } - } - } - a { - cursor: pointer; - } - .wishlist { - border:none; - } - .compare { - padding-top: 10px; - a { - &:before { - margin-right:10px; - } - } - } - } - } - } - @media (max-width: $screen-xs - 1) { // max 479px - text-align: center; - } - } +// +// Component classes +// +.quick-view { + width: $quick-view-btn-size; + position: absolute; + top: 0; + right: 0; + text-align: center; + padding: 5px 8px; + border: 1px solid #ccc; + border-right: none; + border-top: none; } -/******************************************************* -Product list(Index page) Styles -********************************************************/ - -#index { - ul.product_list.tab-pane { - > li { - padding-bottom: 10px; - margin-bottom: 10px; - @media (min-width: $screen-lg) { // min 1200px - padding-bottom: 85px; - margin-bottom:0; - } - .availability { - display: none; - } - } - } +.product-container { + text-align: center; } From cef049588f7bfcec818856a9e372d3b7aa579d7c Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 10:49:05 +0200 Subject: [PATCH 18/50] [+] CSS: Add block transformation classes for product item layouts --- themes/community-theme-16/sass/product_list.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 79d04bad..e121922e 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -8,11 +8,19 @@ $quick-view-btn-size: 31px; // Transformation classes // .product-grid { - + .block-if-product-grid { + display: block; + width: 100%; + float: none; + } } .product-list { - + .block-if-product-list { + display: block; + width: 100%; + float: none; + } } // From b22635d879142753500efdc4d0672d89eb998742 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 10:49:41 +0200 Subject: [PATCH 19/50] [*] HTML: Put product item block in to transformative column wrappers --- .../community-theme-16/product-list-item.tpl | 229 +++++++++--------- 1 file changed, 119 insertions(+), 110 deletions(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index fd9f71d1..354650f2 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -1,35 +1,37 @@
    +
    +
    -
    - +
    + - {if isset($quick_view) && $quick_view} - - - - {/if} + {if isset($quick_view) && $quick_view} + + + + {/if} - {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - + {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + {hook h="displayProductPriceBlock" product=$product type="before_price"} - {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - + + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + {displayWtPrice p=$product.price_without_reduction} - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% - {/if} - {/if} - {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% + {/if} + {/if} + {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} + {if ($product.allow_oosp || $product.quantity > 0)} {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} @@ -38,101 +40,106 @@ {l s='Out of stock'} {/if} - {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {/if} + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {/if} +
    {/if} + +
    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.online_only) && $product.online_only} + {l s='Online only'} + {/if} + {/if} + {if isset($product.new) && $product.new == 1} + {l s='New'} + {/if} + {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Sale!'} + {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Reduced price!'} + {/if} +
    +
    - {/if} -
    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.online_only) && $product.online_only} - {l s='Online only'} - {/if} - {/if} - {if isset($product.new) && $product.new == 1} - {l s='New'} - {/if} - {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Sale!'} - {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Reduced price!'} - {/if}
    +
    -
    +
    +
    + {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} + +
    + {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} + {if $smarty.capture.displayProductListReviews} +
    + {hook h='displayProductListReviews' product=$product} +
    + {/if} -
    + {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} + {hook h="displayProductPriceBlock" product=$product type="weight"} -
    - {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} - -
    - {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} - {if $smarty.capture.displayProductListReviews} -
    - {hook h='displayProductListReviews' product=$product} +

    + {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} +

    - {/if} - {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} - {hook h="displayProductPriceBlock" product=$product type="weight"} - -

    - {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} -

    -
    +
    +
    -
    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - {hook h="displayProductPriceBlock" product=$product type='before_price'} - +
    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + {hook h="displayProductPriceBlock" product=$product type='before_price'} + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + {displayWtPrice p=$product.price_without_reduction} - {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% + {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% + {/if} + {/if} + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {hook h="displayProductPriceBlock" product=$product type='after_price'} {/if} - {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} - {hook h="displayProductPriceBlock" product=$product type='after_price'} +
    {/if} -
    - {/if} -
    - {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} - {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} - {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} - - {l s='Add to cart'} - - {else} - +
    + {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} + {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} + {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} + + {l s='Add to cart'} + + {else} + {l s='Add to cart'} + {/if} + {/if} + + {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} + +
    + {if isset($product.color_list)} +
    {$product.color_list}
    {/if} - {/if} - - {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} - -
    - {if isset($product.color_list)} -
    {$product.color_list}
    - {/if} - {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - + {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} + {if ($product.allow_oosp || $product.quantity > 0)} {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} @@ -145,18 +152,20 @@ {l s='Out of stock'} {/if} - {/if} - {/if} - {if $show_functional_buttons} -
    - {hook h='displayProductListFunctionalButtons' product=$product} - {if isset($comparator_max_item) && $comparator_max_item} -
    - {l s='Add to Compare'} + {/if} + {/if} + {if $show_functional_buttons} +
    + {hook h='displayProductListFunctionalButtons' product=$product} + {if isset($comparator_max_item) && $comparator_max_item} +
    + {l s='Add to Compare'} +
    + {/if}
    {/if}
    - {/if} -
    +
    +
    From 0a0612ee0cbbfe8158461a92fac72e706cbefdbe Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 10:50:01 +0200 Subject: [PATCH 20/50] [*] HTML: Transform product item to block in product list --- themes/community-theme-16/product-list.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index fcb7bd92..1f37fb71 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -11,7 +11,7 @@ {* IMPORTANT! There must be no spaces betweem
  • tags! *} - {foreach from=$products item=product}
  • + {foreach from=$products item=product}
  • {include file='./product-list-item.tpl' product=$product}
    • {/foreach} {* IMPORTANT! There must be no spaces betweem
  • tags! *} From b82ef384b5078b3578b49f8a46379dfeb55d8629 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:01:40 +0200 Subject: [PATCH 21/50] [*] HTML: Use .thumbnail class on product item image --- themes/community-theme-16/product-list-item.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index 354650f2..e4d110fd 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -3,7 +3,7 @@
    - From aeb54a6777fa5d6c1db0e98725dbcae864a26c7b Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:04:55 +0200 Subject: [PATCH 22/50] [*] CSS: Add .content_price styles --- .../community-theme-16/sass/product_list.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index e121922e..64f68f0e 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -41,3 +41,20 @@ $quick-view-btn-size: 31px; .product-container { text-align: center; } + +.content_price { + text-align: center; + font-size: 1.2em; +} + +.product-image-container { + position: relative; + .content_price { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + background: rgba(50, 50, 50, 0.55); + padding: 3px; + } +} From 700fae2a977a2b91d885cf5f58fa39b9599b4e93 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:13:08 +0200 Subject: [PATCH 23/50] [*] CSS: Trim product price colors --- .../sass/partials/_products.scss | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/themes/community-theme-16/sass/partials/_products.scss b/themes/community-theme-16/sass/partials/_products.scss index 2e30f616..b82ede3e 100644 --- a/themes/community-theme-16/sass/partials/_products.scss +++ b/themes/community-theme-16/sass/partials/_products.scss @@ -1,24 +1,14 @@ // .product-name {} .price { - color: $product-price-color; white-space: nowrap; -} - -.price.product-price { - font-weight: 600; - font-size: 21px; - line-height: 26px; - color: $product-price-color; + // &.product-price {} } .old-price { color: $product-old-price-color; text-decoration: line-through; -} - -.old-price.product-price { - font-size: 17px; + // &.product-price {} } .special-price { @@ -27,19 +17,10 @@ .price-percent-reduction { background: #f13340; - border: 1px solid #d02a2c; - font-weight: 600; - font-size: 21px; - line-height: 24px; color: #fff; - padding: 0 5px 0 3px; + padding: 0 0.25em; display: inline-block; - &.small { - font-weight: 700; - font-size: 14px; - line-height: 17px; - padding: 1px 6px; - } + // &.small {} } .product-label-container { From 5508c21fa13df7752aa55e0151fa1e7329115069 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:16:42 +0200 Subject: [PATCH 24/50] [*] CSS: Remove product names SASS variables --- themes/community-theme-16/sass/_theme_variables.scss | 2 -- .../sass/modules/crossselling/crossselling.scss | 4 ---- .../sass/modules/productscategory/css/productscategory.scss | 4 ---- themes/community-theme-16/sass/product.scss | 5 ----- 4 files changed, 15 deletions(-) diff --git a/themes/community-theme-16/sass/_theme_variables.scss b/themes/community-theme-16/sass/_theme_variables.scss index d2fea654..5282d2db 100644 --- a/themes/community-theme-16/sass/_theme_variables.scss +++ b/themes/community-theme-16/sass/_theme_variables.scss @@ -6,8 +6,6 @@ $ps-border-color : #d6d4d4; // PrestaShop Products -$product-name-color : #3a3939; -$product-name-hover-color : #515151; $product-price-color : #333; $product-reduced-price-color : #f00; $product-special-price-color : #f13340; diff --git a/themes/community-theme-16/sass/modules/crossselling/crossselling.scss b/themes/community-theme-16/sass/modules/crossselling/crossselling.scss index 3d8e4415..6fffb8c6 100644 --- a/themes/community-theme-16/sass/modules/crossselling/crossselling.scss +++ b/themes/community-theme-16/sass/modules/crossselling/crossselling.scss @@ -8,10 +8,6 @@ a{ font-size: 15px; line-height: 18px; - color: $product-name-color; - &:hover{ - color: $product-name-hover-color; - } } } .exclusive span{ diff --git a/themes/community-theme-16/sass/modules/productscategory/css/productscategory.scss b/themes/community-theme-16/sass/modules/productscategory/css/productscategory.scss index 7887446e..76cd9b51 100644 --- a/themes/community-theme-16/sass/modules/productscategory/css/productscategory.scss +++ b/themes/community-theme-16/sass/modules/productscategory/css/productscategory.scss @@ -8,10 +8,6 @@ a{ font-size: 15px; line-height: 18px; - color: $product-name-color; - &:hover{ - color: $product-name-hover-color; - } } } .exclusive span{ diff --git a/themes/community-theme-16/sass/product.scss b/themes/community-theme-16/sass/product.scss index c14f0b8f..9c45a473 100644 --- a/themes/community-theme-16/sass/product.scss +++ b/themes/community-theme-16/sass/product.scss @@ -347,7 +347,6 @@ span.view_scroll_spacer { h1 { padding-bottom: 16px; font-size: 20px; - color: $product-name-color; } p { margin-bottom: 10px; @@ -598,10 +597,6 @@ table.table-product-discounts{ a{ font-size: 15px; line-height: 18px; - color: $product-name-color; - &:hover{ - color: $product-name-hover-color; - } } } div ul li { From 1b0feacb7653a7aab894b754b4033d24ac8ec44a Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:21:18 +0200 Subject: [PATCH 25/50] [*] CSS: Refactor product price color vars, $remove product-price-color --- themes/community-theme-16/sass/_theme_variables.scss | 7 +++---- themes/community-theme-16/sass/cms.scss | 1 - themes/community-theme-16/sass/comparator.scss | 3 +-- themes/community-theme-16/sass/partials/_products.scss | 6 +++--- .../sass/partials/pages/checkout/_cart_step_1.scss | 1 - themes/community-theme-16/sass/product.scss | 2 -- 6 files changed, 7 insertions(+), 13 deletions(-) diff --git a/themes/community-theme-16/sass/_theme_variables.scss b/themes/community-theme-16/sass/_theme_variables.scss index 5282d2db..22de6785 100644 --- a/themes/community-theme-16/sass/_theme_variables.scss +++ b/themes/community-theme-16/sass/_theme_variables.scss @@ -6,10 +6,9 @@ $ps-border-color : #d6d4d4; // PrestaShop Products -$product-price-color : #333; -$product-reduced-price-color : #f00; -$product-special-price-color : #f13340; -$product-old-price-color : #6f6f6f; +$product-price-reduction-color : #f00; +$product-price-special-color : #f00; +$product-price-old-color : #b1b1b1; // PrestaShop Product Labels // @TODO SASS label colors diff --git a/themes/community-theme-16/sass/cms.scss b/themes/community-theme-16/sass/cms.scss index a590627e..637355e9 100644 --- a/themes/community-theme-16/sass/cms.scss +++ b/themes/community-theme-16/sass/cms.scss @@ -105,7 +105,6 @@ padding-bottom: 10px; font-size: 14px; font-weight: bold; - color: $product-price-color; } } } diff --git a/themes/community-theme-16/sass/comparator.scss b/themes/community-theme-16/sass/comparator.scss index 29301a43..ad08319c 100644 --- a/themes/community-theme-16/sass/comparator.scss +++ b/themes/community-theme-16/sass/comparator.scss @@ -77,7 +77,7 @@ table#product_comparison { .product_discount { padding-top: 5px; .reduced-price { - color: $product-reduced-price-color; + color: $product-price-reduction-color; font-weight: 700; } } @@ -91,7 +91,6 @@ table#product_comparison { } .comparison_unit_price { font-size: 17px; - color: $product-price-color; font-style: italic; } .product-rating { diff --git a/themes/community-theme-16/sass/partials/_products.scss b/themes/community-theme-16/sass/partials/_products.scss index b82ede3e..86dd0dcd 100644 --- a/themes/community-theme-16/sass/partials/_products.scss +++ b/themes/community-theme-16/sass/partials/_products.scss @@ -6,17 +6,17 @@ } .old-price { - color: $product-old-price-color; + color: $product-price-old-color; text-decoration: line-through; // &.product-price {} } .special-price { - color: $product-special-price-color; + color: $product-price-special-color; } .price-percent-reduction { - background: #f13340; + background: $product-price-reduction-color; color: #fff; padding: 0 0.25em; display: inline-block; diff --git a/themes/community-theme-16/sass/partials/pages/checkout/_cart_step_1.scss b/themes/community-theme-16/sass/partials/pages/checkout/_cart_step_1.scss index 1a8008b4..8a3e8d76 100644 --- a/themes/community-theme-16/sass/partials/pages/checkout/_cart_step_1.scss +++ b/themes/community-theme-16/sass/partials/pages/checkout/_cart_step_1.scss @@ -132,7 +132,6 @@ a.price_discount_delete { font-weight: 600; font-size: 21px; line-height: 25px; - color: $product-price-color; background: #fff; } } diff --git a/themes/community-theme-16/sass/product.scss b/themes/community-theme-16/sass/product.scss index 9c45a473..2017be0b 100644 --- a/themes/community-theme-16/sass/product.scss +++ b/themes/community-theme-16/sass/product.scss @@ -687,7 +687,6 @@ table.table-product-discounts{ font-weight: 600; font-size: 29px; line-height: 32px; - color: $product-price-color; @media (max-width: $screen-sm-max) { //max 991px font-size: 26px; line-height: 28px; @@ -696,7 +695,6 @@ table.table-product-discounts{ font-weight: 600; font-size: 29px; line-height: 32px; - color: $product-price-color; @media (max-width: $screen-sm-max) { //max 991px font-size: 26px; line-height: 28px; From 281b62f3dab41f1dff1e9c6581abca5aa862c8b7 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:34:07 +0200 Subject: [PATCH 26/50] [*] CSS: Adjust .content_price styles --- themes/community-theme-16/sass/product_list.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 64f68f0e..2b21b77a 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -44,7 +44,7 @@ $quick-view-btn-size: 31px; .content_price { text-align: center; - font-size: 1.2em; + font-size: 1.25em; } .product-image-container { @@ -54,7 +54,14 @@ $quick-view-btn-size: 31px; left: 0; bottom: 0; width: 100%; - background: rgba(50, 50, 50, 0.55); + background: rgba(50, 50, 50, 0.65); padding: 3px; + color: #fff; + } +} + +.product-actions-container { + .content_price { + margin-bottom: 10px; } } From 35d7f7198fec75acb2a17bee4b006857ab5fdad3 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:34:53 +0200 Subject: [PATCH 27/50] [*] CSS: Add layout .hide-* classes --- themes/community-theme-16/sass/product_list.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 2b21b77a..843e168b 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -13,6 +13,9 @@ $quick-view-btn-size: 31px; width: 100%; float: none; } + .hide-if-product-grid { + display: none; + } } .product-list { @@ -21,6 +24,9 @@ $quick-view-btn-size: 31px; width: 100%; float: none; } + .hide-if-product-list { + display: none; + } } // From d0bc760f76dac8bd87fd17d94d607cd56ad4fd8b Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:35:58 +0200 Subject: [PATCH 28/50] [*] HTML: Hide description product list --- themes/community-theme-16/product-list-item.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index e4d110fd..eb22cf7a 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -85,7 +85,7 @@ {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} {hook h="displayProductPriceBlock" product=$product type="weight"} -

    +

    {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

    From 8d5c958e447c2612332d15b3b0c82c80a3a2178b Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:40:53 +0200 Subject: [PATCH 29/50] [*] HTML: Add missing .label class to product item label --- themes/community-theme-16/product-list-item.tpl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index eb22cf7a..ab214429 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -141,15 +141,15 @@ {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} {if ($product.allow_oosp || $product.quantity > 0)} - + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - + {l s='Product available with different options'} {else} - {l s='Out of stock'} + {l s='Out of stock'} {/if} {/if} From b804465212a83d0df15bae6dd3108a2f5204f778 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 11:45:22 +0200 Subject: [PATCH 30/50] [+] CSS: Add color list styles to product item --- .../community-theme-16/sass/product_list.scss | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 843e168b..dabbc136 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -44,6 +44,31 @@ $quick-view-btn-size: 31px; border-top: none; } +.color-list-container { + margin-bottom: 10px; + ul { + padding: 0; + margin: 0; + list-style: none; + line-height: 0; + li { + display: inline-block; + border: 1px solid $ps-border-color; + a { + display: block; + width: 22px; + height: 22px; + margin: 1px; + img { + display: block; + width: 22px; + height: 22px; + } + } + } + } +} + .product-container { text-align: center; } From 9f526e2f7416f69e75cd12969978f464bbdc1649 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 12:36:33 +0200 Subject: [PATCH 31/50] [*] CSS: Add amrgins to label and buttons block --- .../community-theme-16/product-list-item.tpl | 24 +++++++++---------- .../community-theme-16/sass/product_list.scss | 6 +++++ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index ab214429..6355c67b 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -139,19 +139,17 @@ {/if} {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - - {if ($product.allow_oosp || $product.quantity > 0)} - - {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} - - {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - - {l s='Product available with different options'} - - {else} - {l s='Out of stock'} - {/if} - +
    + {if ($product.allow_oosp || $product.quantity > 0)} + + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} + + {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} + {l s='Product available with different options'} + {else} + {l s='Out of stock'} + {/if} +
    {/if} {/if} {if $show_functional_buttons} diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index dabbc136..b3d44e0c 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -95,4 +95,10 @@ $quick-view-btn-size: 31px; .content_price { margin-bottom: 10px; } + .button-container { + margin-bottom: 10px; + } + .availability { + margin-bottom: 10px; + } } From 7d37bd1d8e8434ff7ef9dd227347f6a4b2357c97 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 12:44:17 +0200 Subject: [PATCH 32/50] [*] CSS: Remove .thumbnail, give 30px magin to product items --- themes/community-theme-16/product-list-item.tpl | 2 +- themes/community-theme-16/sass/product_list.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index 6355c67b..08036952 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -3,7 +3,7 @@
    - diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index b3d44e0c..eafa5554 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -71,6 +71,7 @@ $quick-view-btn-size: 31px; .product-container { text-align: center; + margin-bottom: 30px; } .content_price { @@ -80,6 +81,7 @@ $quick-view-btn-size: 31px; .product-image-container { position: relative; + border: 1px solid #ccc; .content_price { position: absolute; left: 0; From 0ab1625fa37e2fbe72c4f99d4582265d89a5d590 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 12:56:43 +0200 Subject: [PATCH 33/50] [*] CSS: Put .product-name on product item title --- themes/community-theme-16/product-list-item.tpl | 6 +++--- themes/community-theme-16/sass/product_list.scss | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index 08036952..800855b5 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -17,9 +17,9 @@
    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - {hook h="displayProductPriceBlock" product=$product type="before_price"} + {hook h="displayProductPriceBlock" product=$product type="before_price"} {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} {hook h="displayProductPriceBlock" product=$product type="old_price"} @@ -69,7 +69,7 @@
    -
    +
    {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
  • @@ -65,10 +63,7 @@
    -
    -
    - -
    +
    {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
  • {if isset($quick_view) && $quick_view} - + {/if} {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    +
    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} {hook h="displayProductPriceBlock" product=$product type="before_price"} @@ -145,7 +145,7 @@ {/if} {/if} {if $show_functional_buttons} -
    +
    {hook h='displayProductListFunctionalButtons' product=$product} {if isset($comparator_max_item) && $comparator_max_item}
    diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 0be00c7e..96450f2a 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -4,6 +4,12 @@ $quick-view-btn-size: 31px; +.show-if-product-item-hover, +.show-if-product-grid-hover, +.show-if-product-list-hover { + display: none; +} + .quick-view { width: $quick-view-btn-size; position: absolute; @@ -45,6 +51,11 @@ $quick-view-btn-size: 31px; text-align: center; margin-bottom: 30px; border-bottom: 1px solid transparent; // Preserves block heights on hover + &:hover { + .show-if-product-item-hover { + display: block; + } + } } .content_price { @@ -69,6 +80,8 @@ $quick-view-btn-size: 31px; } .product-actions-container { + position: relative; + overflow: visible; .content_price { margin-bottom: 10px; } @@ -87,9 +100,18 @@ $quick-view-btn-size: 31px; .product-container { &:hover { background-color: #d4d4d4; + .show-if-product-grid-hover { + display: block; + } } } .functional-buttons { + position: absolute; + left: 0; + width: 100%; + z-index: 1; + background-color: #d4d4d4; + padding: 3px 5px; > div { float: left; width: 50%; @@ -106,6 +128,11 @@ $quick-view-btn-size: 31px; } .product-container { @include clearfix(); + &:hover { + .show-if-product-list-hover { + display: block; + } + } } .product-image-container, .product-description-container, From a29427b1d26e0fef03266d770a1c8d9f5f6bb7ff Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 15:32:20 +0200 Subject: [PATCH 39/50] [*] CSS: Refactor out transformation classes (yes, again) --- .../community-theme-16/sass/product_list.scss | 48 ++++++++++++------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 96450f2a..6d696a64 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -3,13 +3,42 @@ @import "vendor_variables"; $quick-view-btn-size: 31px; +$product-grid-item-hover-bg: #f6f6f6; +// +// Transformation classes +// .show-if-product-item-hover, .show-if-product-grid-hover, .show-if-product-list-hover { display: none; } +.product-list { + .hide-if-product-list { + display: none; + } + .product-container:hover { + .show-if-product-list-hover { + display: block; + } + } +} + +.product-grid { + .hide-if-product-grid { + display: none; + } + .product-container:hover { + .show-if-product-grid-hover { + display: block; + } + } +} + +// +// Component classes +// .quick-view { width: $quick-view-btn-size; position: absolute; @@ -94,15 +123,9 @@ $quick-view-btn-size: 31px; } .product-grid { - .hide-if-product-grid { - display: none; - } .product-container { &:hover { - background-color: #d4d4d4; - .show-if-product-grid-hover { - display: block; - } + background-color: $product-grid-item-hover-bg; } } .functional-buttons { @@ -110,7 +133,8 @@ $quick-view-btn-size: 31px; left: 0; width: 100%; z-index: 1; - background-color: #d4d4d4; + border-top: 1px solid #ccc; + background-color: $product-grid-item-hover-bg; padding: 3px 5px; > div { float: left; @@ -120,19 +144,11 @@ $quick-view-btn-size: 31px; } .product-list { - .hide-if-product-list { - display: none; - } .ajax_block_product { width: 100%; } .product-container { @include clearfix(); - &:hover { - .show-if-product-list-hover { - display: block; - } - } } .product-image-container, .product-description-container, From 8b421021ac45acbac4757ce15a13606d9cbb91f8 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 15:34:18 +0200 Subject: [PATCH 40/50] // Reindent --- .../community-theme-16/product-list-item.tpl | 256 +++++++++--------- 1 file changed, 128 insertions(+), 128 deletions(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index ba03263e..b3605918 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -1,159 +1,159 @@
    - + - {if isset($quick_view) && $quick_view} - - - - {/if} - - {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - - {hook h="displayProductPriceBlock" product=$product type="before_price"} - {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - - - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - - {displayWtPrice p=$product.price_without_reduction} - - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% - {/if} - {/if} - {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} - - {if ($product.allow_oosp || $product.quantity > 0)} - {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} - {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - {l s='Product available with different options'} - {else} - {l s='Out of stock'} - {/if} - - {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} - {/if} -
    - {/if} + {if isset($quick_view) && $quick_view} + + + + {/if} -
    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.online_only) && $product.online_only} - {l s='Online only'} + {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + + {hook h="displayProductPriceBlock" product=$product type="before_price"} + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} + + + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + + {displayWtPrice p=$product.price_without_reduction} + + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% {/if} {/if} - {if isset($product.new) && $product.new == 1} - {l s='New'} - {/if} - {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Sale!'} - {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} - {l s='Reduced price!'} + {if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} + + {if ($product.allow_oosp || $product.quantity > 0)} + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} + {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} + {l s='Product available with different options'} + {else} + {l s='Out of stock'} + {/if} + {/if} -
    - + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {/if}
    + {/if} -
    -
    - {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} - -
    - {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} - {if $smarty.capture.displayProductListReviews} -
    - {hook h='displayProductListReviews' product=$product} -
    +
    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.online_only) && $product.online_only} + {l s='Online only'} {/if} + {/if} + {if isset($product.new) && $product.new == 1} + {l s='New'} + {/if} + {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Sale!'} + {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} + {l s='Reduced price!'} + {/if} +
    - {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} - {hook h="displayProductPriceBlock" product=$product type="weight"} +
    -

    - {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} -

    +
    +
    + {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} + +
    + {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} + {if $smarty.capture.displayProductListReviews} +
    + {hook h='displayProductListReviews' product=$product}
    + {/if} + + {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} + {hook h="displayProductPriceBlock" product=$product type="weight"} + +

    + {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} +

    +
    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - {hook h="displayProductPriceBlock" product=$product type='before_price'} - + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + {hook h="displayProductPriceBlock" product=$product type='before_price'} + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + {displayWtPrice p=$product.price_without_reduction} - {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% - {/if} - {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} - {hook h="displayProductPriceBlock" product=$product type='after_price'} + {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% {/if} -
    + {/if} + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {hook h="displayProductPriceBlock" product=$product type='after_price'} {/if} -
    - {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} - {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} - {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} - - {l s='Add to cart'} - - {else} - +
    + {/if} +
    + {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} + {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} + {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} + {l s='Add to cart'} - - {/if} - {/if} - - {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} -
    - {if isset($product.color_list)} -
    {$product.color_list}
    + {else} + + {l s='Add to cart'} + {/if} - {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} - {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} -
    - {if ($product.allow_oosp || $product.quantity > 0)} - - {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} - - {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} - {l s='Product available with different options'} - {else} - {l s='Out of stock'} - {/if} -
    + {/if} + + {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} + +
    + {if isset($product.color_list)} +
    {$product.color_list}
    + {/if} + {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} + {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} +
    + {if ($product.allow_oosp || $product.quantity > 0)} + + {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} + + {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} + {l s='Product available with different options'} + {else} + {l s='Out of stock'} {/if} - {/if} - {if $show_functional_buttons} -
    - {hook h='displayProductListFunctionalButtons' product=$product} - {if isset($comparator_max_item) && $comparator_max_item} -
    - {l s='Add to Compare'} -
    - {/if} +
    + {/if} + {/if} + {if $show_functional_buttons} +
    + {hook h='displayProductListFunctionalButtons' product=$product} + {if isset($comparator_max_item) && $comparator_max_item} +
    + {l s='Add to Compare'}
    {/if}
    + {/if} +
    From c852fcf93dc247ceb87a2aa645a6903c034ad670 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 15:35:25 +0200 Subject: [PATCH 41/50] [*] CSS: Imcread bottom margin product grid to make space for fucntional buttons --- themes/community-theme-16/sass/product_list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 6d696a64..cd4c5696 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -124,6 +124,7 @@ $product-grid-item-hover-bg: #f6f6f6; .product-grid { .product-container { + margin-bottom: 45px; &:hover { background-color: $product-grid-item-hover-bg; } From 707101d7798f9df337ddb604e373f0ee3fe043a0 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 15:43:21 +0200 Subject: [PATCH 42/50] [-] CSS: Fix hover border in product grid layout --- themes/community-theme-16/sass/product_list.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index cd4c5696..1bc0362d 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -127,6 +127,12 @@ $product-grid-item-hover-bg: #f6f6f6; margin-bottom: 45px; &:hover { background-color: $product-grid-item-hover-bg; + border: 1px solid #ccc; + .product-image-container { + border-left: none; + border-right: none; + border-top: none; + } } } .functional-buttons { @@ -134,9 +140,11 @@ $product-grid-item-hover-bg: #f6f6f6; left: 0; width: 100%; z-index: 1; - border-top: 1px solid #ccc; + border: 1px solid #ccc; background-color: $product-grid-item-hover-bg; padding: 3px 5px; + margin-left: -1px; + margin-right: -1px; > div { float: left; width: 50%; From 83123f653b5ea40b8790a180130c9bf3afb920f8 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 16:34:19 +0200 Subject: [PATCH 43/50] [+] HTML, CSS: Show product item buttons on hover --- .../community-theme-16/product-list-item.tpl | 72 ++++++++++--------- .../community-theme-16/sass/product_list.scss | 19 +++++ 2 files changed, 57 insertions(+), 34 deletions(-) diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index b3605918..e4079da3 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -86,46 +86,50 @@
    - {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} -
    - {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} - {hook h="displayProductPriceBlock" product=$product type='before_price'} - - {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - - {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} - {hook h="displayProductPriceBlock" product=$product type="old_price"} - - {displayWtPrice p=$product.price_without_reduction} + +
    + {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} +
    + {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} + {hook h="displayProductPriceBlock" product=$product type='before_price'} + + {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} - {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} - {if $product.specific_prices.reduction_type == 'percentage'} - -{$product.specific_prices.reduction * 100}% + {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} + {hook h="displayProductPriceBlock" product=$product type="old_price"} + + {displayWtPrice p=$product.price_without_reduction} + + {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} + {if $product.specific_prices.reduction_type == 'percentage'} + -{$product.specific_prices.reduction * 100}% + {/if} {/if} + {hook h="displayProductPriceBlock" product=$product type="price"} + {hook h="displayProductPriceBlock" product=$product type="unit_price"} + {hook h="displayProductPriceBlock" product=$product type='after_price'} + {/if} +
    + {/if} +
    + {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} + {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} + {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} + + {l s='Add to cart'} + + {else} + + {l s='Add to cart'} + {/if} - {hook h="displayProductPriceBlock" product=$product type="price"} - {hook h="displayProductPriceBlock" product=$product type="unit_price"} - {hook h="displayProductPriceBlock" product=$product type='after_price'} {/if} + + {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} +
    - {/if} -
    - {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} - {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} - {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} - - {l s='Add to cart'} - - {else} - - {l s='Add to cart'} - - {/if} - {/if} - - {if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if} -
    + {if isset($product.color_list)}
    {$product.color_list}
    {/if} diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 1bc0362d..383b1f9a 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -133,8 +133,27 @@ $product-grid-item-hover-bg: #f6f6f6; border-right: none; border-top: none; } + .button-container { + display: block; + } + .content_price { + @include opacity(0); + } } } + .product-price-button-wrapper { + position: relative; + // This needs to have minimum height of the buttons that will be displayed on hover + // @see bootstrap/_buttons.scss + min-height: 2*$padding-base-vertical + 2*1 + $font-size-base*$line-height-base; + } + .button-container { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + } .functional-buttons { position: absolute; left: 0; From 0749c7fd42a3ab51c6d12c7989f7e0774153496e Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 16:53:15 +0200 Subject: [PATCH 44/50] [*] HTML, CSS: Add icons to functional buttons --- .../modules/blockwishlist/blockwishlist_button.tpl | 4 ++-- themes/community-theme-16/product-list-item.tpl | 4 +++- .../sass/modules/blockwishlist/blockwishlist.scss | 4 ++++ themes/community-theme-16/sass/product_list.scss | 6 +++++- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/themes/community-theme-16/modules/blockwishlist/blockwishlist_button.tpl b/themes/community-theme-16/modules/blockwishlist/blockwishlist_button.tpl index dd2b80fe..ae395190 100644 --- a/themes/community-theme-16/modules/blockwishlist/blockwishlist_button.tpl +++ b/themes/community-theme-16/modules/blockwishlist/blockwishlist_button.tpl @@ -19,14 +19,14 @@ {/if} {foreachelse} - {l s='Add to wishlist' mod='blockwishlist'} + {l s='Add to wishlist' mod='blockwishlist'} {/foreach}
    {else}
    - {l s="Add to Wishlist" mod='blockwishlist'} + {l s="Add to Wishlist" mod='blockwishlist'}
    {/if} diff --git a/themes/community-theme-16/product-list-item.tpl b/themes/community-theme-16/product-list-item.tpl index e4079da3..bdb4d5e8 100644 --- a/themes/community-theme-16/product-list-item.tpl +++ b/themes/community-theme-16/product-list-item.tpl @@ -153,7 +153,9 @@ {hook h='displayProductListFunctionalButtons' product=$product} {if isset($comparator_max_item) && $comparator_max_item}
    - {l s='Add to Compare'} + + {l s='Add to Compare'} +
    {/if}
    diff --git a/themes/community-theme-16/sass/modules/blockwishlist/blockwishlist.scss b/themes/community-theme-16/sass/modules/blockwishlist/blockwishlist.scss index 79170491..1e6c439d 100644 --- a/themes/community-theme-16/sass/modules/blockwishlist/blockwishlist.scss +++ b/themes/community-theme-16/sass/modules/blockwishlist/blockwishlist.scss @@ -214,3 +214,7 @@ ul.product_list.grid > li .product-container .functional-buttons .wishlist .popo } } } + +.wishlist > a.checked .icon:before { + content: '\f005'; +} diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 383b1f9a..dc3af960 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -161,16 +161,20 @@ $product-grid-item-hover-bg: #f6f6f6; z-index: 1; border: 1px solid #ccc; background-color: $product-grid-item-hover-bg; - padding: 3px 5px; margin-left: -1px; margin-right: -1px; > div { + padding: 3px; float: left; width: 50%; } } } +.add_to_compare.checked .icon:before { + content: '\f068'; +} + .product-list { .ajax_block_product { width: 100%; From ad7ce09756514870f9100e9ca2d4e80c249025a3 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 17:11:13 +0200 Subject: [PATCH 45/50] [-] CSS: Fix functional buttons margins --- themes/community-theme-16/sass/product_list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index dc3af960..296c6d55 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -162,7 +162,7 @@ $product-grid-item-hover-bg: #f6f6f6; border: 1px solid #ccc; background-color: $product-grid-item-hover-bg; margin-left: -1px; - margin-right: -1px; + @include box-sizing(content-box); > div { padding: 3px; float: left; From 20fe8936541d607049a4b54b5c642f40be47ce7d Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 17:14:48 +0200 Subject: [PATCH 46/50] [-] CSS: Add bottom margin to button wrapper --- themes/community-theme-16/sass/product_list.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 296c6d55..bbf86aff 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -145,7 +145,8 @@ $product-grid-item-hover-bg: #f6f6f6; position: relative; // This needs to have minimum height of the buttons that will be displayed on hover // @see bootstrap/_buttons.scss - min-height: 2*$padding-base-vertical + 2*1 + $font-size-base*$line-height-base; + min-height: round(2*$padding-base-vertical + 2*1 + $font-size-base*$line-height-base); + margin-bottom: 10px; } .button-container { display: none; From 365bf64c154eca1fe5bceb7499e2fec43ce54f83 Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 17:24:27 +0200 Subject: [PATCH 47/50] [-] CSS: Fix productcomments styles --- .../sass/modules/productcomments/productcomments.scss | 6 ++++++ themes/community-theme-16/sass/product_list.scss | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/themes/community-theme-16/sass/modules/productcomments/productcomments.scss b/themes/community-theme-16/sass/modules/productcomments/productcomments.scss index b3677f45..2c98826b 100644 --- a/themes/community-theme-16/sass/modules/productcomments/productcomments.scss +++ b/themes/community-theme-16/sass/modules/productcomments/productcomments.scss @@ -296,3 +296,9 @@ .fr { float: right; } + +.product-container { + .star_content { + display: inline-block; + } +} diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index bbf86aff..396a4f41 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -87,6 +87,10 @@ $product-grid-item-hover-bg: #f6f6f6; } } +.hook-reviews { + margin-bottom: 10px; +} + .content_price { text-align: center; font-size: 1.4em; From 0cdc301f0748879574e411f6b9dbcbe643f2324a Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 17:29:07 +0200 Subject: [PATCH 48/50] [*] CSS: Use default product_list.list to toggle layouts --- themes/community-theme-16/js/global.js | 2 +- themes/community-theme-16/product-list.tpl | 2 +- themes/community-theme-16/sass/product_list.scss | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/themes/community-theme-16/js/global.js b/themes/community-theme-16/js/global.js index 188ee2cb..3176e303 100644 --- a/themes/community-theme-16/js/global.js +++ b/themes/community-theme-16/js/global.js @@ -187,7 +187,7 @@ function bindGrid() { function display(layoutType) { var grid = layoutType == 'grid'; - $('.product_list').toggleClass('product-grid', grid).toggleClass('product-list', !grid); + $('.product_list').toggleClass('grid', grid).toggleClass('list', !grid); $('#list').toggleClass('selected', !grid); $('#grid').toggleClass('selected', grid); $.totalStorage('display', grid ? 'grid' : 'list'); diff --git a/themes/community-theme-16/product-list.tpl b/themes/community-theme-16/product-list.tpl index 7b29efc2..708fd8ee 100755 --- a/themes/community-theme-16/product-list.tpl +++ b/themes/community-theme-16/product-list.tpl @@ -8,7 +8,7 @@ {$show_functional_buttons = $page_name != 'index'} - + {* IMPORTANT! There must be no spaces betweem
  • tags! *} {foreach from=$products item=product}
  • diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index 396a4f41..a186c088 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -14,7 +14,7 @@ $product-grid-item-hover-bg: #f6f6f6; display: none; } -.product-list { +.product_list.list { .hide-if-product-list { display: none; } @@ -25,7 +25,7 @@ $product-grid-item-hover-bg: #f6f6f6; } } -.product-grid { +.product_list.grid { .hide-if-product-grid { display: none; } @@ -126,7 +126,7 @@ $product-grid-item-hover-bg: #f6f6f6; } } -.product-grid { +.product_list.grid { .product-container { margin-bottom: 45px; &:hover { @@ -180,7 +180,7 @@ $product-grid-item-hover-bg: #f6f6f6; content: '\f068'; } -.product-list { +.product_list.list { .ajax_block_product { width: 100%; } From aac499ef1892f8eb38ace4de47b7d836651c1b6c Mon Sep 17 00:00:00 2001 From: gskema Date: Fri, 11 Mar 2016 17:51:56 +0200 Subject: [PATCH 49/50] [-] CSS: Fix transformation classes + opcaity:0 selector --- .../community-theme-16/sass/product_list.scss | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/themes/community-theme-16/sass/product_list.scss b/themes/community-theme-16/sass/product_list.scss index a186c088..39fd8c8f 100644 --- a/themes/community-theme-16/sass/product_list.scss +++ b/themes/community-theme-16/sass/product_list.scss @@ -8,13 +8,19 @@ $product-grid-item-hover-bg: #f6f6f6; // // Transformation classes // -.show-if-product-item-hover, -.show-if-product-grid-hover, -.show-if-product-list-hover { - display: none; +.product_list { + .show-if-product-item-hover { + display: none; + } + .product-container:hover { + .show-if-product-item-hover { + display: block; + } + } } .product_list.list { + .show-if-product-list-hover, .hide-if-product-list { display: none; } @@ -26,6 +32,7 @@ $product-grid-item-hover-bg: #f6f6f6; } .product_list.grid { + .show-if-product-grid-hover, .hide-if-product-grid { display: none; } @@ -80,11 +87,6 @@ $product-grid-item-hover-bg: #f6f6f6; text-align: center; margin-bottom: 30px; border-bottom: 1px solid transparent; // Preserves block heights on hover - &:hover { - .show-if-product-item-hover { - display: block; - } - } } .hook-reviews { @@ -140,8 +142,10 @@ $product-grid-item-hover-bg: #f6f6f6; .button-container { display: block; } - .content_price { - @include opacity(0); + .product-actions-container { + .content_price { + @include opacity(0); + } } } } From 234f7545cf44b58e029b84f64a103468e65d145f Mon Sep 17 00:00:00 2001 From: gskema Date: Sat, 12 Mar 2016 20:28:27 +0200 Subject: [PATCH 50/50] [-] CSS: Fix product list .list styles under