Skip to content
This repository has been archived by the owner on Feb 23, 2021. It is now read-only.

Commit

Permalink
Merge pull request #154 from gskema/dev
Browse files Browse the repository at this point in the history
[*] FO: Refactor product list template code + JS
  • Loading branch information
Gytis Šk committed Mar 12, 2016
2 parents 9e398b4 + 234f754 commit 7891811
Show file tree
Hide file tree
Showing 20 changed files with 492 additions and 948 deletions.
1 change: 1 addition & 0 deletions themes/community-theme-16/js/autoload/20-compatibility.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,4 @@ function accordion(s) {}
function openBranch($, n) {}
function closeBranch($, n) {}
function toggleBranch($, n) {}
function blockHover(s) {}
120 changes: 8 additions & 112 deletions themes/community-theme-16/js/global.js
Original file line number Diff line number Diff line change
Expand Up @@ -133,37 +133,10 @@ 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() {
$(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 = '';
Expand Down Expand Up @@ -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();
Expand All @@ -219,80 +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 = '<div class="product-container"><div class="row">';
html += '<div class="left-block col-xs-4 col-sm-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="center-block col-xs-4 col-sm-7 col-md-4">';
html += '<div class="product-flags">' + $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">' + $(element).find('h5').html() + '</h5>';
var hookReviews = $(element).find('.hook-reviews');
if (hookReviews.length) {
html += hookReviews.clone().wrap('<div>').parent().html();
}
html += '<p class="product-desc">' + $(element).find('.product-desc').html() + '</p>';
var colorList = $(element).find('.color-list-container').html();
if (colorList != null) {
html += '<div class="color-list-container">' + colorList + '</div>';
}
var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
if (availability != null) {
html += '<span class="availability">' + availability + '</span>';
}
html += '</div>';
html += '<div class="right-block col-xs-4 col-sm-12 col-md-4"><div class="right-block-content row">';
var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
if (price != null) {
html += '<div class="content_price col-xs-5 col-md-12">' + price + '</div>';
}
html += '<div class="button-container col-xs-7 col-md-12">' + $(element).find('.button-container').html() + '</div>';
html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
html += '</div>';
html += '</div></div>';
$(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 += '<div class="product-container">';
html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="right-block">';
html += '<div class="product-flags">' + $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">' + $(element).find('h5').html() + '</h5>';
var hookReviews = $(element).find('.hook-reviews');
if (hookReviews.length) {
html += hookReviews.clone().wrap('<div>').parent().html();
}
html += '<p itemprop="description" class="product-desc">' + $(element).find('.product-desc').html() + '</p>';
var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
if (price != null) {
html += '<div class="content_price">' + price + '</div>';
}
html += '<div itemprop="offers" itemscope itemtype="https://schema.org/Offer" class="button-container">' + $(element).find('.button-container').html() + '</div>';
var colorList = $(element).find('.color-list-container').html();
if (colorList != null) {
html += '<div class="color-list-container">' + colorList + '</div>';
}
var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
if (availability != null) {
html += '<span class="availability">' + availability + '</span>';
}
html += '</div>';
html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
html += '</div>';
$(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('grid', grid).toggleClass('list', !grid);
$('#list').toggleClass('selected', !grid);
$('#grid').toggleClass('selected', grid);
$.totalStorage('display', grid ? 'grid' : 'list');
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@
{/if}
{foreachelse}
<a href="#" id="wishlist_button_nopop" onclick="WishlistCart('wishlist_block_list', 'add', '{$id_product|intval}', $('#idCombination').val(), document.getElementById('quantity_wanted').value); return false;" rel="nofollow" title="{l s='Add to my wishlist' mod='blockwishlist'}">
{l s='Add to wishlist' mod='blockwishlist'}
<i class="icon icon-star-o"></i> {l s='Add to wishlist' mod='blockwishlist'}
</a>
{/foreach}
</div>
{else}
<div class="wishlist">
<a class="addToWishlist wishlistProd_{$product.id_product|intval}" href="#" rel="{$product.id_product|intval}" onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', false, 1); return false;">
{l s="Add to Wishlist" mod='blockwishlist'}
<i class="icon icon-star-o"></i> {l s="Add to Wishlist" mod='blockwishlist'}
</a>
</div>
{/if}
165 changes: 165 additions & 0 deletions themes/community-theme-16/product-list-item.tpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<div class="product-container" itemscope itemtype="https://schema.org/Product">

<div class="product-image-container">
<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
<img class="replace-2x img-responsive center-block" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
</a>

{if isset($quick_view) && $quick_view}
<a class="quick-view show-if-product-item-hover" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='Open quick view window'}" rel="{$product.link|escape:'html':'UTF-8'}">
<i class="icon icon-eye-open"></i>
</a>
{/if}

{if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div class="content_price show-if-product-grid-hover" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
<span itemprop="price" class="price product-price">
{hook h="displayProductPriceBlock" product=$product type="before_price"}
{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
</span>
<meta itemprop="priceCurrency" content="{$currency->iso_code}" />
{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"}
<span class="old-price product-price">
{displayWtPrice p=$product.price_without_reduction}
</span>
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
{/if}
{/if}
{if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
<span class="unvisible">
{if ($product.allow_oosp || $product.quantity > 0)}
<link itemprop="availability" href="https://schema.org/InStock" />{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)}
<link itemprop="availability" href="https://schema.org/LimitedAvailability" />{l s='Product available with different options'}
{else}
<link itemprop="availability" href="https://schema.org/OutOfStock" />{l s='Out of stock'}
{/if}
</span>
{/if}
{hook h="displayProductPriceBlock" product=$product type="price"}
{hook h="displayProductPriceBlock" product=$product type="unit_price"}
{/if}
</div>
{/if}

<div class="product-label-container">
{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}
<span class="product-label product-label-online">{l s='Online only'}</span>
{/if}
{/if}
{if isset($product.new) && $product.new == 1}
<span class="product-label product-label-new">{l s='New'}</span>
{/if}
{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="product-label product-label-sale">{l s='Sale!'}</span>
{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="product-label product-label-discount">{l s='Reduced price!'}</span>
{/if}
</div>

</div>

<div class="product-description-container">
<h5 class="h4 product-name" itemprop="name">
{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
{$product.name|escape:'html':'UTF-8'}
</a>
</h5>
{capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture}
{if $smarty.capture.displayProductListReviews}
<div class="hook-reviews">
{hook h='displayProductListReviews' product=$product}
</div>
{/if}

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

<p class="product-desc hide-if-product-grid" itemprop="description">
{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
</p>
</div>

<div class="product-actions-container">

<div class="product-price-button-wrapper">
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div class="content_price">
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
{hook h="displayProductPriceBlock" product=$product type='before_price'}
<span class="price product-price">
{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
</span>
{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"}
<span class="old-price product-price">
{displayWtPrice p=$product.price_without_reduction}
</span>
{hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
{/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}
</div>
{/if}
<div class="button-container">
{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&amp;id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&amp;ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&amp;token={$static_token}{/if}{/capture}
<a class="ajax_add_to_cart_button btn btn-primary" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product-attribute="{$product.id_product_attribute|intval}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
<span>{l s='Add to cart'}</span>
</a>
{else}
<span class="ajax_add_to_cart_button btn btn-primary disabled">
<span>{l s='Add to cart'}</span>
</span>
{/if}
{/if}
<a class="btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
<span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if}</span>
</a>
</div>
</div>

{if isset($product.color_list)}
<div class="color-list-container">{$product.color_list}</div>
{/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)}
<div class="availability">
{if ($product.allow_oosp || $product.quantity > 0)}
<span class="label {if $product.quantity <= 0 && isset($product.allow_oosp) && !$product.allow_oosp} label-danger{elseif $product.quantity <= 0} label-warning{else} label-success{/if}">
{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}
</span>
{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
<span class="label label-warning">{l s='Product available with different options'}</span>
{else}
<span class="label label-danger">{l s='Out of stock'}</span>
{/if}
</div>
{/if}
{/if}
{if $show_functional_buttons}
<div class="functional-buttons clearfix show-if-product-grid-hover">
{hook h='displayProductListFunctionalButtons' product=$product}
{if isset($comparator_max_item) && $comparator_max_item}
<div class="compare">
<a class="add_to_compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}">
<i class="icon icon-plus"></i> {l s='Add to Compare'}
</a>
</div>
{/if}
</div>
{/if}
</div>

</div>
Loading

0 comments on commit 7891811

Please sign in to comment.