allow to order products on category page
This commit is contained in:
Manuel Raynaud
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>
|
||||
Reference in New Issue
Block a user