TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/thelia/thelia

Browse Source
This commit is contained in:
franck
2013-09-16 12:52:59 +02:00
parent 696a2be8ba 8d2fab911c
commit dd2ba89a4c
34 changed files with 784 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
templates/default/assets/js/script.js
View File

@@ -2,150 +2,156 @@
(function($) {
/* ------------------------------------------------------------------
onLoad Function -------------------------------------------------- */
$(document).ready(function(){
/* ------------------------------------------------------------------
onLoad Function -------------------------------------------------- */
$(document).ready(function(){
// Main Navigation Hover
$('.nav-main')
.on('click.subnav', '[data-toggle=dropdown]', function(event){
if($(this).parent().hasClass('open') && $(this).is(event.target))
return false;
})
.on('mouseenter.subnav', '.dropdown', function(event){
if($(this).hasClass('open'))
return;
// Main Navigation Hover
$('.nav-main')
.on('click.subnav', '[data-toggle=dropdown]', function(event){
if($(this).parent().hasClass('open') && $(this).is(event.target))
return false;
})
.on('mouseenter.subnav', '.dropdown', function(event){
if($(this).hasClass('open'))
return;
$(this).addClass('open');
})
.on('mouseleave.subnav', '.dropdown', function(){
if(!$(this).hasClass('open'))
return;
$(this).removeClass('open');
});
$(this).addClass('open');
})
.on('mouseleave.subnav', '.dropdown', function(){
if(!$(this).hasClass('open'))
return;
$(this).removeClass('open');
});
// Tooltip
$('body').tooltip({
selector: '[data-toggle=tooltip]'
});
// Tooltip
$('body').tooltip({
selector: '[data-toggle=tooltip]'
});
// Toolbar
var $category_products = $('#category-products');
if($category_products.size() > 0){
var $parent = $category_products.parent();
// Toolbar
var $category_products = $('#category-products');
if($category_products.size() > 0){
var $parent = $category_products.parent();
$parent.on('click.view-mode', '[data-toggle=view]', function(){
if( ($(this).hasClass('btn-grid') && $parent.hasClass('grid')) || ($(this).hasClass('btn-list') && $parent.hasClass('list')))
return;
$parent.on('click.view-mode', '[data-toggle=view]', function(){
if( ($(this).hasClass('btn-grid') && $parent.hasClass('grid')) || ($(this).hasClass('btn-list') && $parent.hasClass('list')))
return;
$parent.toggleClass('grid').toggleClass('list');
$parent.toggleClass('grid').toggleClass('list');
return false;
});
}
return false;
});
}
// Login
/* var $form_login = $('#form-login');
if($form_login.size() > 0) {
$form_login.on('change.account', ':radio', function(){
if($(this).val() === '0')
$('#password', $form_login).val('').prop('disabled', true); // Disabled (new customer)
else
$('#password', $form_login).prop('disabled', false); // Enabled
}).find(':radio:checked').trigger('change.account');
}*/
// Login
var $form_login = $('#form-login');
if($form_login.size() > 0) {
$form_login.on('change.account', ':radio', function(){
if($(this).val() === '0')
$('#password', $form_login).val('').prop('disabled', true); // Disabled (new customer)
else
$('#password', $form_login).prop('disabled', false); // Enabled
}).find(':radio:checked').trigger('change.account');
}
// Forgot Password
/*
var $forgot_password = $('.forgot-password', $form_login);
if($forgot_password.size() > 0) {
$forgot_password.popover({
html : true,
title: 'Forgot Password',
content: function() {
return $('#form-forgotpassword').html();
}
}).on('click.btn-forgot', function(){
// Forgot Password
/*
var $forgot_password = $('.forgot-password', $form_login);
if($forgot_password.size() > 0) {
$forgot_password.popover({
html : true,
title: 'Forgot Password',
content: function() {
return $('#form-forgotpassword').html();
}
}).on('click.btn-forgot', function(){
$('.btn-forgot').click(function(){
alert('click form');
return false;
});
$('.btn-forgot').click(function(){
alert('click form');
return false;
});
$('.btn-close').click(function(){
$forgot_password.popover('hide');
});
$('.btn-close').click(function(){
$forgot_password.popover('hide');
});
return false;
});
}
*/
return false;
});
}
*/
//.Form Filters
$('#form-filters').each(function(){
var $form = $(this);
//.Form Filters
$('#form-filters').each(function(){
var $form = $(this);
$form
.on('change.filter', ':checkbox', function(){
$form.submit();
})
.find('.group-btn > .btn').addClass('sr-only');
});
$form
.on('change.filter', ':checkbox', function(){
$form.submit();
})
.find('.group-btn > .btn').addClass('sr-only');
});
// Product details Thumbnails
$('#product-gallery').each(function(){
var $thumbnails = $('.thumbnail', this),
$image = $('.product-image > img', this);
// Product details Thumbnails
$('#product-gallery').each(function(){
var $item = $('.item', this),
$thumbnails = $('.thumbnail', this),
$image = $('.product-image > img', this);
$(this).on('click.thumbnails', '.thumbnail', function(){
if($(this).hasClass('active'))
return false;
// Show Carousel control if needed
if($item.size() > 1){
$('#product-thumbnails', this).carousel({interval: false}).find('.carousel-control').show();
}
$image.attr('src',$(this).attr('href'));
$thumbnails.removeClass('active');
$(this).addClass('active');
$(this).on('click.thumbnails', '.thumbnail', function(){
if($(this).hasClass('active'))
return false;
return false;
});
});
$image.attr('src',$(this).attr('href'));
$thumbnails.removeClass('active');
$(this).addClass('active');
// Payment Method
$('#payment-method').each(function(){
var $label = $('label', this);
$label.on('change', ':radio', function(){
$label.removeClass('active');
$label.filter('[for="' + $(this).attr('id') + '"]').addClass('active');
}).filter(':has(:checked)').addClass('active');
});
return false;
});
});
// Payment Method
$('#payment-method').each(function(){
var $label = $('label', this);
$label.on('change', ':radio', function(){
$label.removeClass('active');
$label.filter('[for="' + $(this).attr('id') + '"]').addClass('active');
}).filter(':has(:checked)').addClass('active');
});
// Styliser le message Confirm par Bootstrap sur un formulaire
/*
$('body').on('click', '[data-confirm]', function(){
var $this = $(this);
bootbox.confirm($(this).attr('data-confirm'),
function(result){
if(result) {
// Si lien
if($this.attr('href')){
window.location.href = $this.attr('href');
}else{
// Si on doit soumettre un formulaire
var $form = $this.closest("form");
if($form.size() > 0){
$form.submit();
}
}
}
}
);
// Styliser le message Confirm par Bootstrap sur un formulaire
/*
$('body').on('click', '[data-confirm]', function(){
var $this = $(this);
bootbox.confirm($(this).attr('data-confirm'),
function(result){
if(result) {
// Si lien
if($this.attr('href')){
window.location.href = $this.attr('href');
}else{
// Si on doit soumettre un formulaire
var $form = $this.closest("form");
if($form.size() > 0){
$form.submit();
}
}
}
}
);
return false;
});
*/
});
return false;
});
*/
});
})(jQuery);

10
templates/default/assets/less/thelia/global.less
View File

@@ -6,6 +6,16 @@
// Collapse
.no-js .collapse { display: block!important; }
// thumbnail
.thumbnail {
&.active,
&:active {
border-style: solid;
border-width: 2px;
}
&.active { border-color: @gray-light; }
}
// Layout
.main { margin-bottom: @line-height-computed; }
.layout-col-1,

52
templates/default/assets/less/thelia/product.less
View File

@@ -9,11 +9,16 @@
// Availibility
.availability {
display: block;
// In Stock
&.in-stock {}
.in-stock {
font-style: italic;
text-transform: uppercase;
}
// Out of Stock
&.out-of-stock {}
.out-of-stock {}
}
@@ -61,11 +66,33 @@
margin-bottom: @line-height-computed;
}
.product-thumbnails {
> ul {
#product-thumbnails {
.carousel-inner {
margin: 0 auto;
width: 90%;
}
.carousel-control {
background-image: none;
display: none; // Need js
width: 4%; margin-top: -4px;
.icon-prev {
&:before {
.icon(@chevron-left);
}
}
.icon-next {
&:before {
.icon(@chevron-right);
}
}
}
ul {
.list-inline;
li {
width: 20%;
margin: 0;
> li {
margin: 0; padding: 0;
width: 19%;
}
}
}
@@ -80,13 +107,12 @@
}
.product-price {
margin-bottom: @line-height-computed;
.availability {
.availibity-label { .sr-only; }
font-style: italic;
text-transform: uppercase;
position: absolute;
right: 15px;
}
}
.product-cart {
background: @option-bg;
border: 1px solid @option-border;
border-radius: @option-border-radius;
margin-bottom: @line-height-computed; padding: @option-padding;
}
}

40
templates/default/assets/less/thelia/variables.less
View File

@@ -5,7 +5,7 @@
@FontAwesomePath: "../font/fontawesome";
//bootstrap font
@icon-font-path: "../font/bootstrap/";
@icon-font-path: "../font/bootstrap/";
// Grid system
@grid-float-breakpoint: @screen-desktop;
@@ -14,9 +14,9 @@
@legend-border-color: transparent;
// Buttons
@btn-default-color: #333;
@btn-default-bg: #f5f5f5;
@btn-default-border: #ccc;
@btn-default-color: #333;
@btn-default-bg: #f5f5f5;
@btn-default-border: #ccc;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@@ -74,14 +74,14 @@
@block-subheading-font-size: ceil(@font-size-base * 1.1); // 15.4px
// Thelia : Block Links
@block-nav-bg: transparent;
@block-nav-hover-bg: #f7f7f7;
@block-nav-border: #eee;
@block-nav-color: #747474;
@block-nav-bg: transparent;
@block-nav-hover-bg: #f7f7f7;
@block-nav-border: #eee;
@block-nav-color: #747474;
// Thelia : Block Links
@block-links-bg: transparent;
@block-links-hover-bg: #f7f7f7;
@block-links-hover-bg: darken(@body-bg, 8%);
@block-links-border: #fff;
@block-links-color: #747474;
@@ -112,25 +112,3 @@
@option-heading-border: darken(@body-bg, 12.5%); //#dfdfdf
@option-heading-color: @text-color;
@option-heading-font-size: @font-size-base;
// Callout
@callout-bg: @body-bg;
@callout-border: #ddd;
@callout-text: @text-color;
@callout-success-text: @state-success-text;
@callout-success-border: @state-success-border;
@callout-success-bg: @state-success-bg;
@callout-warning-text: @state-warning-text;
@callout-warning-border: @state-warning-border;
@callout-warning-bg: @state-warning-bg;
@callout-danger-text: @state-danger-text;
@callout-danger-border: @state-danger-border;
@callout-danger-bg: @state-danger-bg;
@callout-info-text: @state-info-text;
@callout-info-border: @state-info-border;
@callout-info-bg: @state-info-bg;

73
templates/default/assets/themes/default/less/theme.less
View File

@@ -41,16 +41,6 @@ label { font-weight: 600; }
.box-shadow(none);
}
// thumbnail
.thumbnail {
&.active,
&:active {
border-style: solid;
border-width: 5px;
}
&.active { border-color: @gray-light; }
}
// Navbar
.navbar {
@@ -169,9 +159,9 @@ header {
font-weight: 600;
text-align: left;
text-shadow: none;
@media (min-width: @screen-desktop) { padding: 2px 15px 2px 5px; }
&:hover,
&:focus {
background-color: @brand-primary;
@@ -208,7 +198,7 @@ header {
font-weight: 600;
text-align: left;
text-shadow: none;
@media (min-width: @screen-desktop) { padding: 2px 15px 2px 5px; }
&:hover,
@@ -252,7 +242,7 @@ header {
// Products List
#category-products .btn-cart {
.btn-secondary;
&:before {
content: @shopping-cart;
font-size: 1.3em;
@@ -335,6 +325,9 @@ td.product,
}
}
// Availibility
.availibity-label { .sr-only; }
.products-grid,
.products-list {
@@ -600,6 +593,38 @@ td.product,
margin-bottom: 10px;
}
}
.product-cart {
background-color: #f5f5f5!important;
margin-bottom: @line-height-computed; padding: 10px!important;
}
}
#product-thumbnails {
.carousel-control {
width: 17px!important;
&.left {
border-right: 7px solid #ccc;
color: #ccc;
text-align: left;
> .icon-prev {
left: 0; margin-left: 0; margin-top: -15px;
&:before {
color: inherit;
content: @caret-left!important;
}
}
}
&.right {
border-left: 7px solid #ccc;
text-align: right;
> .icon-next {
left: auto; right: 0; margin-left: 0; margin-top: -15px;
&:before {
content: @caret-right!important;
}
}
}
}
}
@media (min-width: @screen-tablet) {
@@ -613,7 +638,13 @@ td.product,
// Product Details
#product-details {
.group-qty {
.form-control {
display: inline-block;
margin-right: 1em; margin-left: .4em;
width: 100px;
}
}
}
}
}
@@ -896,7 +927,7 @@ td.product,
}
// Add address button
#account-address,
#account-address,
#delivery-address {
.btn-add-address {
.btn-link;
@@ -1021,7 +1052,7 @@ td.product,
margin-right: .3em;
vertical-align: middle;
}
&:hover,
&:focus { color: @link-hover-color; }
}
@@ -1075,7 +1106,7 @@ td.product,
}
.table-cart {
thead,
tbody,
tfoot {
@@ -1139,14 +1170,14 @@ td.product,
padding: 12px;
text-align: left;
width: 100%;
&:hover,
&:focus,
&:active,
&.active {
background-color: @brand-primary;
}
&.disabled,
&[disabled] {
&,
@@ -1158,7 +1189,7 @@ td.product,
}
}
}
@media (min-width: @screen-tablet) {
.btn-step {
border-top: 0;

4
templates/default/assets/themes/default/less/variables.less
View File

@@ -50,8 +50,8 @@
// Pager
@pager-border-radius: 0;
@pager-disabled-color: @gray-light;
@pager-border-radius: 0;
@pager-disabled-color: @gray-light;
// Navbar

4
templates/default/index.html
View File

@@ -40,7 +40,7 @@
<a href="{$URL}" itemprop="url" tabindex="-1" class="product-image">
{ifloop rel="image_product_new" }
<img itemprop="image"
{loop name="image_product_new" type="image" limit="1" product="{$ID}"}
{loop name="image_product_new" type="image" limit="1" product="{$ID}" force_return="1" width="280" height="196" resize_mode="crop"}
src="{$IMAGE_URL}"
{/loop}
alt="Product #{$LOOP_COUNT}" >
@@ -99,7 +99,7 @@
<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}"}
{loop name="image_product_promo" type="image" limit="1" product="{$ID}" force_return="1" width="218" height="146" resize_mode="crop"}
src="{$IMAGE_URL}"
{/loop}
alt="Product #{$LOOP_COUNT}" >

2
templates/default/layout.tpl
View File

@@ -95,7 +95,7 @@ URL: http://www.thelia.net
{/elseloop}
<li class="dropdown">
<a href="cart.html" class="dropdown-toggle cart" data-toggle="dropdown">
Cart <span class="badge">2</span>
Cart <span class="badge">{cart attr="count_item"}</span>
</a>
</li>
</ul>

202
templates/default/product.html Normal file
View File

@@ -0,0 +1,202 @@
{extends file="layout.tpl"}
{block name="breadcrumb"}
<nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
<strong id="breadcrumb-label">You are here: </strong>
<ul class="breadcrumb" itemprop="breadcrumb">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="index.php" itemprop="url"><span itemprop="title">Home</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="category.php" itemprop="url"><span itemprop="title">Category 1</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="category.php" itemprop="url"><span itemprop="title">Category 1.2</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">Product name</span></li>
</ul>
</nav><!-- /.nav-breadcrumb -->
{/block}
{block name="main-content"}
<div class="main">
{loop name="product.details" type="product" id="{product attr="id"}"}
<article id="product" class="col-main" role="main" itemscope itemtype="http://schema.org/Product">
<!-- Use the meta tag to specify content that is not visible on the page in any way -->
<meta itemprop="brand" content="Diesel">
<meta itemprop="productID" content="isbn:925872">
<section id="product-gallery">
<figure class="product-image">
{loop type="image" name="image.main" product="{$ID}" width="560" height="445" resize_mode="crop" limit="1" force_result="1"}
<img src="{$IMAGE_URL}" alt="{$TITLE}" class="img-responsive" itemprop="image" data-toggle="magnify">
{/loop}
</figure>
<div id="product-thumbnails" class="slide" style="position:relative;">
<div class="carousel-inner">
<div class="item active">
<ul>
{loop name="image.carousel" type="image" product="{$ID}" width="560" height="445" resize_mode="crop" limit="5" force_result="1"}
<li>
<a href="{$IMAGE_URL}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}">
{loop type="image" name="image.thumbs" id="{$ID}" product="$OBJECT_ID" width="118" height="85" resize_mode="crop" force_result="1"}
<img src="{$IMAGE_URL}" alt="{$TITLE}">
{/loop}
</a>
</li>
{/loop}
</ul>
</div>
{ifloop rel="image.carouselsup"}
<div class="item">
<ul>
{loop name="image.carouselsup" type="image" product="{$ID}" width="560" height="445" resize_mode="crop" offset="5" force_result="1"}
<li>
<a href="{$IMAGE_URL}" class="thumbnail">
{loop type="image" name="image.thumbssup" id="{$ID}" product="$OBJECT_ID" width="118" height="85" resize_mode="crop" force_result="1"}
<img src="{$IMAGE_URL}" alt="{$TITLE}">
{/loop}
</a>
</li>
{/loop}
</ul>
</div>
{/ifloop}
</div>
{ifloop rel="image.carouselsup"}
<a class="left carousel-control" href="#product-thumbnails" data-slide="prev"><i class="icon-prev"></i></a>
<a class="right carousel-contol" href="#product-thumbnails" data-slide="next"><i class="icon-next"></i></a>
{/ifloop}
</div>
</section>
<section id="product-details">
<div class="product-info">
<h1 class="name"><span itemprop="name">{$TITLE}</span></h1>
<span itemprop="sku" class="sku">{intl l='Ref.'}: {$REF}</span>
<div class="short-description">
<p>{$POSTSCRIPTUM}</p>
</div>
</div>
<div class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="availability"><span class="availibity-label">{intl l="Availability"}: </span><span itemprop="availability" href="http://schema.org/InStock" class="in-stock">In stock</span></div>
<div class="price-container">
<meta itemprop="category" content="Category1">
<meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition"> <!-- List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition -->
<meta itemprop="priceCurrency" content="USD"> <!-- 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
-->
{if $IS_PROMO }
{loop name="productSaleElements_promo" type="product_sale_elements" product="{$ID}" limit="1"}
{assign var="default_product_sale_elements" value="$ID"}
<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}
{else}
<span class="special-price"><span itemprop="price" class="price-label">{intl l="Special Price:"} </span><span class="price">{format_number number="{$BEST_TAXED_PRICE}"} {currency attr="symbol"}</span></span>
{/if}
</div>
</div>
{form name="thelia.cart.add" }
<form id="form-product-details" action="{url path="/cart/add" }" method="post" role="form">
{form_hidden_fields form=$form}
<input type="hidden" name="view" value="product">
<input type="hidden" name="product_id" value="{$ID}">
{if $form_error}<div class="alert alert-error">{$form_error_message}</div>{/if}
{form_field form=$form field='product_sale_elements_id'}
{if $default_product_sale_elements }
<input type="hidden" name="{$name}" value="{$default_product_sale_elements}" {$attr}>
{else}
{loop name="productSaleElements_promo" type="product_sale_elements" product="{$ID}" limit="1"}
<input type="hidden" name="{$name}" value="{$ID}" {$attr}>
{/loop}
{/if}
{/form_field}
{form_field form=$form field="product"}
<input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$ID}" {$attr} >
{/form_field}
<fieldset class="product-options">
<div class="option option-color">
<label for="option-color" class="option-heading">Show</label>
<div class="option-content">
<select id="option-color" name="option-color" class="form-control">
<option value="0">Blue</option>
<option value="1">Red</option>
<option value="2">Purple</option>
</select>
</div>
</div>
<div class="option option-size">
<fieldset>
<legend class="option-heading">Size</legend>
<div class="option-content">
<label class="checkbox-inline" for="size1">
<input type="checkbox" name="size1" id="size1" value="1"> Large
</label>
<label class="checkbox-inline" for="size2">
<input type="checkbox" name="size2" id="size2" value="2"> Medium
</label>
<label class="checkbox-inline" for="size3">
<input type="checkbox" name="size3" id="size3" value="3"> Small
</label>
</div>
</fieldset>
</div>
</fieldset>
<fieldset class="product-cart form-inline">
{form_field form=$form field='quantity'}
<div class="form-group group-qty {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<label for="{$label_attr.for}">{$label}</label>
<input type="number" name="{$name}" id="{$label_attr.for}" class="form-control" value="{$value|default:1}" min="0" required>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
{/form_field}
<div class="form-group group-btn">
<button type="submit" class="btn btn_add_to_cart">{intl l="Add to cart"}</button>
</div>
</fieldset>
</form>
{/form}
</section>
<section id="product-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation"><a id="tab1" href="#description" data-toggle="tab" role="tab">{intl l="Description"}</a></li>
<li role="presentation"><a id="tab2" href="#additional" data-toggle="tab" role="tab">{intl l="Additional Info"}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active in" id="description" itemprop="description" role="tabpanel" aria-labelledby="tab1">
<p>{$DESCRIPTION}</p>
</div>
<div class="tab-pane" id="additional" role="tabpanel" aria-labelledby="tab2">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
</div>
</section>
</article><!-- /product -->
{/loop}
<ul class="pager">
<li class="previous"><a href="#">Previous product</a></li>
<li class="next"><a href="#">Next product</a></li>
</ul
></div>
</div><!-- /.container -->
{/block}