allow to order products on category page
This commit is contained in:
Manuel Raynaud
@@ -130,6 +130,10 @@
|
||||
window.location = $(this).val()
|
||||
});
|
||||
|
||||
$('#sortby-top').change(function(e){
|
||||
window.location = $(this).val()
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
@@ -21,16 +21,15 @@
|
||||
{block name="main-content"}
|
||||
<div class="main layout-col-2-left">
|
||||
{$limit={$smarty.get.limit|default:8}}
|
||||
{$product_page={$smarty.get.page|default:1}}
|
||||
{$product_order={$smarty.get.order|default:'alpha'}}
|
||||
<article class="col-main {$smarty.get.mode|default:"grid"}" role="main">
|
||||
{include file="includes/category-toolbar.html" toolbar="top" limit=$limit}
|
||||
{include file="includes/category-toolbar.html" toolbar="top" limit=$limit order=$product_order}
|
||||
<div id="category-products">
|
||||
<div class="products-content">
|
||||
<ul class="product-col-4">
|
||||
{loop type="product" name="product_list" category={category attr="id"} limit=$limit}
|
||||
|
||||
<li class="item">
|
||||
{include file="includes/single-product.html" product_id=$ID}
|
||||
</li>
|
||||
{loop type="product" name="product_list" category={category attr="id"} limit=$limit page=$product_page order=$product_order}
|
||||
{include file="includes/single-product.html" product_id=$ID hasBtn=true hasDescription=true width="218" height="146"}
|
||||
{/loop}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -42,83 +41,7 @@
|
||||
|
||||
{include file="includes/menu.html"}
|
||||
|
||||
<section id="filters">
|
||||
<h3>Find <span>a product</span></h3>
|
||||
<form id="form-filters" action="" method="get" role="form">
|
||||
<div class="filter filter-type">
|
||||
<fieldset>
|
||||
<legend class="filter-heading">Type</legend>
|
||||
<div class="filter-content">
|
||||
<div class="checkbox">
|
||||
<label for="type0">
|
||||
<input type="checkbox" name="type0" id="type0" value="0"> Type 0
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="type1">
|
||||
<input type="checkbox" name="type1" id="type1" value="1"> Type 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="type2">
|
||||
<input type="checkbox" name="type2" id="type2" value="2"> Type 2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><!-- /Filter Type -->
|
||||
|
||||
<div class="filter filter-price">
|
||||
<fieldset>
|
||||
<legend class="filter-heading">Price</legend>
|
||||
<div class="filter-content">
|
||||
<div class="checkbox">
|
||||
<label for="price0">
|
||||
<input type="checkbox" name="price0" id="price0" value="0"> $0.00 - $99.99
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="price1">
|
||||
<input type="checkbox" name="price1" id="price1" value="1"> $100.00 - $199.99
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="price2">
|
||||
<input type="checkbox" name="price2" id="price2" value="2"> $200.00 and above
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><!-- /Filter Price -->
|
||||
|
||||
<div class="filter filter-size">
|
||||
<fieldset>
|
||||
<legend class="filter-heading">Size</legend>
|
||||
<div class="filter-content">
|
||||
<div class="checkbox">
|
||||
<label for="size0">
|
||||
<input type="checkbox" name="size0" id="size0" value="0"> Large
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="size1">
|
||||
<input type="checkbox" name="size1" id="size1" value="1"> Medium
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="size2">
|
||||
<input type="checkbox" name="size2" id="size2" value="2"> Small
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><!-- /Filter Size -->
|
||||
|
||||
<div class="group-btn">
|
||||
<button type="submit" class="btn btn-filter">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</section><!-- /.filters -->
|
||||
{include file="includes/categories-filters.html"}
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
77
templates/default/includes/categories-filters.html
Normal file
77
templates/default/includes/categories-filters.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<section id="filters">
|
||||
<h3>Find <span>a product</span></h3>
|
||||
<form id="form-filters" action="" method="get" role="form">
|
||||
<div class="filter filter-type">
|
||||
<fieldset>
|
||||
<legend class="filter-heading">Type</legend>
|
||||
<div class="filter-content">
|
||||
<div class="checkbox">
|
||||
<label for="type0">
|
||||
<input type="checkbox" name="type0" id="type0" value="0"> Type 0
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="type1">
|
||||
<input type="checkbox" name="type1" id="type1" value="1"> Type 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="type2">
|
||||
<input type="checkbox" name="type2" id="type2" value="2"> Type 2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><!-- /Filter Type -->
|
||||
|
||||
<div class="filter filter-price">
|
||||
<fieldset>
|
||||
<legend class="filter-heading">Price</legend>
|
||||
<div class="filter-content">
|
||||
<div class="checkbox">
|
||||
<label for="price0">
|
||||
<input type="checkbox" name="price0" id="price0" value="0"> $0.00 - $99.99
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="price1">
|
||||
<input type="checkbox" name="price1" id="price1" value="1"> $100.00 - $199.99
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="price2">
|
||||
<input type="checkbox" name="price2" id="price2" value="2"> $200.00 and above
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><!-- /Filter Price -->
|
||||
|
||||
<div class="filter filter-size">
|
||||
<fieldset>
|
||||
<legend class="filter-heading">Size</legend>
|
||||
<div class="filter-content">
|
||||
<div class="checkbox">
|
||||
<label for="size0">
|
||||
<input type="checkbox" name="size0" id="size0" value="0"> Large
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="size1">
|
||||
<input type="checkbox" name="size1" id="size1" value="1"> Medium
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="size2">
|
||||
<input type="checkbox" name="size2" id="size2" value="2"> Small
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><!-- /Filter Size -->
|
||||
|
||||
<div class="group-btn">
|
||||
<button type="submit" class="btn btn-filter">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</section><!-- /.filters -->
|
||||
@@ -1,30 +1,30 @@
|
||||
<div class="toolbar toolbar-{$toolbar}" role="toolbar">
|
||||
{if $toolbar == "top" }
|
||||
<div class="sorter-container">
|
||||
<span class="amount">9 Item(s)</span>
|
||||
|
||||
<span class="limiter">
|
||||
<label for="limit-top">Show</label>
|
||||
<select id="limit-top" name="limit">
|
||||
<option value="{url path="{navigate to="current"}" limit="4"}" {if $limit==4}selected{/if}>4</option>
|
||||
<option value="{url path="{navigate to="current"}" limit="8"}" {if $limit==8}selected{/if}>8</option>
|
||||
<option value="{url path="{navigate to="current"}" limit="12"}" {if $limit==12}selected{/if}>12</option>
|
||||
<option value="{url path="{navigate to="current"}" limit="50"}"{if $limit==50}selected{/if}>50</option>
|
||||
<option value="{url path="{navigate to="current"}" limit="9999999999"}" {if $limit==9999999999}selected{/if}>All</option>
|
||||
<option value="{url path="{category attr="url"}" limit="4"}" {if $limit==4}selected{/if}>4</option>
|
||||
<option value="{url path="{category attr="url"}" limit="8"}" {if $limit==8}selected{/if}>8</option>
|
||||
<option value="{url path="{category attr="url"}" limit="12"}" {if $limit==12}selected{/if}>12</option>
|
||||
<option value="{url path="{category attr="url"}" limit="50"}"{if $limit==50}selected{/if}>50</option>
|
||||
<option value="{url path="{category attr="url"}" limit="9999999999"}" {if $limit==9999999999}selected{/if}>All</option>
|
||||
</select>
|
||||
<span class="per-page"> per page</span>
|
||||
</span><!-- /.limiter -->
|
||||
|
||||
<span class="sort-by">
|
||||
<label for="sortby-top">Sort By</label>
|
||||
<select id="sortby-top" name="sortby" onchange="">
|
||||
<option value="?order=position">Position</option>
|
||||
<option value="?order=name" selected>Name</option>
|
||||
<option value="?order=price">Price</option>
|
||||
<option value="?order=rating">Rating</option>
|
||||
<label for="sortby-top">{intl l="Sort By"}</label>
|
||||
<select id="sortby-top" name="sortby">
|
||||
{*<option value="{url path="{category attr="url"}" order="manual"}">{intl l="Position"}</option>*}
|
||||
<option value="{url path="{category attr="url"}" limit=$limit order="alpha"}" {if $order=="alpha"}selected{/if}>{intl l="Name ascending"}</option>
|
||||
<option value="{url path="{category attr="url"}" limit=$limit order="alpha_reverse"}" {if $order=="alpha_reverse"}selected{/if}>{intl l="Name descending"}</option>
|
||||
<option value="{url path="{category attr="url"}" limit=$limit order="min_price"}" {if $order=="min_price"}selected{/if}>{intl l="Price ascending"}</option>
|
||||
<option value="{url path="{category attr="url"}" limit=$limit order="max_price"}" {if $order=="max_price"}selected{/if}>{intl l="Price descending"}</option>
|
||||
{*<option value="{url path="{category attr="url"}" order="rating"}">{intl l="Rating"}</option>*}
|
||||
</select>
|
||||
|
||||
<a class="sort-order" href="?dir=desc" title="Set Descending Direction"><i class="icon-long-arrow-up"></i></a>
|
||||
|
||||
</span><!-- /.sort-by -->
|
||||
|
||||
<span class="view-mode">
|
||||
@@ -36,17 +36,32 @@
|
||||
</span><!-- /.view-mode -->
|
||||
|
||||
</div><!-- /.sorter -->
|
||||
|
||||
<div class="pagination-container" role="pagination" aria-labelledby="pagination-label-{$toolbar}">
|
||||
<strong id="pagination-label-{$toolbar}" class="pagination-label">{intl l="Pagination"}</strong>
|
||||
{else}
|
||||
<div class="pagination-container" role="pagination" aria-labelledby="pagination-label-{$toolbar}}">
|
||||
<strong id="pagination-label-{$toolbar}}" class="pagination-label">{intl l="Pagination"}</strong>
|
||||
<ul class="pagination">
|
||||
<li><a href="?page=<?php echo $page-1; ?>" class="prev"><i class="icon-prev"></i></a></li>
|
||||
<li class="active"><a href="?page=1" tabindex="-1"'; >1</a></li>
|
||||
<li><a href="?page=2">2</a></li>
|
||||
<li><a href="?page=3">3</a></li>
|
||||
<li><a href="?page=4">4</a></li>
|
||||
<li><a href="?page=5">5</a></li>
|
||||
<li><a href="?page=<?php echo $page+1; ?>" class="next"><i class="icon-next"></i></a></li>
|
||||
|
||||
{if $product_page > 1}
|
||||
<li><a href="{url path={navigate to="current"} page={$product_page-1} }" class="prev"><i class="icon-prev"></i></a></li>
|
||||
{else}
|
||||
<li><a href="#" class="prev"><i class="icon-prev"></i></a></li>
|
||||
{/if}
|
||||
{pageloop rel="product_list"}
|
||||
{if $PAGE != $CURRENT}
|
||||
<li><a href="{url path={navigate to="current"} page=$PAGE }"> {$PAGE} </a></li>
|
||||
{else}
|
||||
<li class="active"><a href="#" tabindex="-1">{$PAGE}</a></li>
|
||||
{/if}
|
||||
{if $PAGE == $LAST}
|
||||
{if $CURRENT < $LAST}
|
||||
<li><a href="{url path={navigate to="current"} page={$CURRENT+1} }" class="next"><i class="icon-next"></i></a></li>
|
||||
{else}
|
||||
<li><a href="#" class="next"><i class="icon-next"></i></a></li>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
{/pageloop}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div><!-- /.toolbar toolbar-<?php echo $toolbar; ?> -->
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
<li class="item">
|
||||
<article itemscope itemtype="http://schema.org/Product">
|
||||
<!-- Use the meta tag to specify content that is not visible on the page in any way -->
|
||||
{loop name="brand.feature" type="feature" product=$ID title="brand"}
|
||||
@@ -12,21 +13,22 @@
|
||||
{/loop}
|
||||
|
||||
<a href="{$URL}" itemprop="url" tabindex="-1" class="product-image">
|
||||
{loop name="product_thumbnail" type="image" product=$ID width="218" height="146" resize_mode="borders" limit="1"}
|
||||
{loop name="product_thumbnail" type="image" product=$ID width="{$width}" height="{$height}" resize_mode="borders" limit="1"}
|
||||
<img itemprop="image" src="{$IMAGE_URL}" alt="Product #{$LOOP_COUNT}">
|
||||
{/loop}
|
||||
{elseloop rel="product_thumbnail"}
|
||||
{images file='../assets/img/218x146.png'}<img itemprop="image" src="{$asset_url}" alt="Product #{$LOOP_COUNT}">{/images}
|
||||
{images file="../assets/img/{$width}x{$height}.png"}<img itemprop="image" src="{$asset_url}" alt="Product #{$LOOP_COUNT}">{/images}
|
||||
{/elseloop}
|
||||
<span class="mask"></span>
|
||||
</a>
|
||||
|
||||
<div class="product-info">
|
||||
<h3 class="name"><a href="{$URL}"><span itemprop="name">{$TITLE}</span></a></h3>
|
||||
|
||||
{if $hasDescription}
|
||||
<div class="description" itemprop="description">
|
||||
<p>{$DESCRIPTION}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="product-price">
|
||||
@@ -53,8 +55,11 @@
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{if $hasBtn}
|
||||
<div class="product-btn">
|
||||
<button class="btn btn-cart">Add to cart</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article><!-- /product -->
|
||||
</article><!-- /product -->
|
||||
</li>
|
||||
@@ -100,62 +100,7 @@
|
||||
<div class="products-content">
|
||||
<ul class="products-grid product-col-5 hover-effect">
|
||||
{loop name="product_promo" type="product" limit="5" promo="yes"}
|
||||
<li class="item">
|
||||
<article itemscope itemtype="http://schema.org/Product">
|
||||
<!-- Use the meta tag to specify content that is not visible on the page in any way -->
|
||||
{$product_id=$ID}
|
||||
{loop name="brand.feature" type="feature" product="{$ID}" title="brand"}
|
||||
{loop name="brand.value" type="feature_value" feature="{$ID}" product="$product_id"}
|
||||
<meta itemprop="brand" content="{$TITLE}">
|
||||
{/loop}
|
||||
{/loop}
|
||||
{loop name="brand.feature" type="feature" product=$ID title="isbn"}
|
||||
{loop name="brand.value" type="feature_value" feature=$ID product=$product_id}
|
||||
<meta itemprop="productID" content="isbn:{$TITLE}">
|
||||
{/loop}
|
||||
{/loop}
|
||||
|
||||
<a href="{$URL}" itemprop="url" tabindex="-1" class="product-image">
|
||||
{ifloop rel="image_product_promo" }
|
||||
<img itemprop="image"
|
||||
{loop name="image_product_promo" type="image" limit="1" product="{$ID}" width="218" height="146" resize_mode="borders"}
|
||||
src="{$IMAGE_URL}"
|
||||
{/loop}
|
||||
alt="Product #{$LOOP_COUNT}" >
|
||||
{/ifloop}
|
||||
{elseloop rel="image_product_promo"}
|
||||
{images file='assets/img/218x146.png'}<img itemprop="image" src="{$asset_url}" alt="Promotion #{$LOOP_COUNT}">{/images}
|
||||
{/elseloop}
|
||||
<span class="mask"></span>
|
||||
</a>
|
||||
|
||||
<div class="product-info">
|
||||
<h3 class="name"><a href="{$URL}"><span itemprop="name">{$CHAPO}</span></a></h3>
|
||||
</div>
|
||||
|
||||
<div class="product-price">
|
||||
<div class="price-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
|
||||
{loop type="category" name="category_tag" id=$DEFAULT_CATEGORY}
|
||||
<meta itemprop="category" content="{$TITLE}">
|
||||
{/loop}
|
||||
<meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition"> <!-- List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition -->
|
||||
<meta itemprop="priceCurrency" content="{currency attr="code"}"> <!-- List of currency : The currency used to describe the product price, in three-letter ISO format. -->
|
||||
<link itemprop="availability" href="http://schema.org/InStock" content="in_stock" />
|
||||
<!-- List of availibility :
|
||||
out_of_stock : http://schema.org/OutOfStock
|
||||
in_stock : http://schema.org/InStock
|
||||
instore_only : http://schema.org/InStoreOnly
|
||||
preorder : http://schema.org/PreOrder
|
||||
online_only : http://schema.org/OnlineOnly
|
||||
-->
|
||||
{loop name="productSaleElements_promo" type="product_sale_elements" product="{$ID}" limit="1"}
|
||||
<span class="special-price"><span itemprop="price" class="price-label">{intl l="Special Price:"} </span><span class="price">{format_number number="{$TAXED_PROMO_PRICE}"} {currency attr="symbol"}</span></span>
|
||||
<span class="old-price"><span class="price-label">{intl l="Regular Price:"} </span><span class="price">{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}</span></span>
|
||||
{/loop}
|
||||
</div>
|
||||
</div>
|
||||
</article><!-- /product -->
|
||||
</li>
|
||||
{include file="includes/single-product.html" product_id=$ID hasBtn=false hasDescription=false width="218" height="146"}
|
||||
{/loop}
|
||||
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user