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:
mespeche
2013-09-16 12:56:47 +02:00
parent 5e8749e054 dd2ba89a4c
commit 4929e6f88a
46 changed files with 1423 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
templates/admin/default/ajax/template-attribute-list.html
View File

@@ -1,15 +1,102 @@
<div class="form-group">
{ifloop rel="free_attributes"}
<select name="free_attributes" id="free_attributes" class="form-control">
<option value="">Select an attribute...</option>
{loop name="free_attributes" type="attribute" template="$template_id" backend_context="1" lang="$edit_language_id"}
<option value="{$ID}">{$TITLE}</option>
{/loop}
</select>
<span class="help-block">{intl l='Select an attribute and click (+) to add it to this template'}</span>
<form action="{url path='/admin/configuration/templates/attributes/add'}">
<input type="hidden" name="template_id" value="{$template_id}" />
<div class="input-group">
<select required="required" name="attribute_id" id="attribute_id" class="form-control">
<option value="">Select an attribute...</option>
{loop name="free_attributes" type="attribute" exclude_template="$template_id" backend_context="1" lang="$edit_language_id"}
<option value="{$ID}">{$TITLE}</option>
{/loop}
</select>
<span class="input-group-btn">
<button class="btn btn-default btn-primary action-btn" type="submit"><span class="glyphicon glyphicon-plus-sign"></span></button>
</span>
</div>
<span class="help-block">{intl l='Select an attribute and click (+) to add it to this template'}</span>
</form>
{/ifloop}
{elseloop rel="free_attributes"}
<div class="alert alert-info">There is currently no available attributes.</div>
{/elseloop}
</div>
<table class="table table-striped table-condensed table-left-aligned">
<thead>
<tr>
<th>{intl l='ID'}</th>
<th>{intl l='Attribute title'}</th>
{module_include location='template_attributes_table_header'}
<th class="actions">{intl l="Actions"}</th>
</tr>
</thead>
<tbody>
{loop name="assigned_attributes" type="attribute" template="$template_id" backend_context="1" lang="$edit_language_id"}
<tr>
<td>{$ID}</td>
<td>
{$TITLE}
</td>
{module_include location='template_attributes_table_row'}
<td class="actions">
<div class="btn-group">
{loop type="auth" name="can_create" roles="ADMIN" permissions="admin.configuration.template.attribute.delete"}
<a class="btn btn-default btn-xs delete-attribute" title="{intl l='Delete this attribute'}" href="#delete_attribute_dialog" data-id="{$ID}" data-toggle="modal">
<span class="glyphicon glyphicon-trash"></span>
</a>
{/loop}
</div>
</td>
</tr>
{/loop}
{elseloop rel="assigned_attributes"}
<tr>
<td colspan="3">
<div class="alert alert-info">
{intl l="This template contains no attributes"}
</div>
</td>
</tr>
{/elseloop}
</tbody>
</table>
{* Delete value confirmation dialog *}
{capture "delete_attribute_dialog"}
<input type="hidden" name="template_id" value="{$template_id}" />
<input type="hidden" name="attribute_id" id="attribute_delete_id" value="" />
{/capture}
{include
file = "includes/generic-confirm-dialog.html"
dialog_id = "delete_attribute_dialog"
dialog_title = {intl l="Remove attribute"}
dialog_message = {intl l="Do you really want to remove this attribute from the template ?"}
form_action = {url path='/admin/configuration/templates/attributes/delete'}
form_content = {$smarty.capture.delete_attribute_dialog nofilter}
}
<script>
$(function() {
// Set proper attribute ID in delete attribute from
$('a.delete-attribute').click(function(ev) {
$('#attribute_delete_id').val($(this).data('id'));
});
});
</script>

102
templates/admin/default/ajax/template-feature-list.html Normal file
View File

@@ -0,0 +1,102 @@
<div class="form-group">
{ifloop rel="free_features"}
<form action="{url path='/admin/configuration/templates/features/add'}">
<input type="hidden" name="template_id" value="{$template_id}" />
<div class="input-group">
<select required="required" name="feature_id" id="feature_id" class="form-control">
<option value="">Select an feature...</option>
{loop name="free_features" type="feature" exclude_template="$template_id" backend_context="1" lang="$edit_language_id"}
<option value="{$ID}">{$TITLE}</option>
{/loop}
</select>
<span class="input-group-btn">
<button class="btn btn-default btn-primary action-btn" type="submit"><span class="glyphicon glyphicon-plus-sign"></span></button>
</span>
</div>
<span class="help-block">{intl l='Select an feature and click (+) to add it to this template'}</span>
</form>
{/ifloop}
{elseloop rel="free_features"}
<div class="alert alert-info">There is currently no available features.</div>
{/elseloop}
</div>
<table class="table table-striped table-condensed table-left-aligned">
<thead>
<tr>
<th>{intl l='ID'}</th>
<th>{intl l='Feature title'}</th>
{module_include location='template_features_table_header'}
<th class="actions">{intl l="Actions"}</th>
</tr>
</thead>
<tbody>
{loop name="assigned_features" type="feature" template="$template_id" backend_context="1" lang="$edit_language_id"}
<tr>
<td>{$ID}</td>
<td>
{$TITLE}
</td>
{module_include location='template_features_table_row'}
<td class="actions">
<div class="btn-group">
{loop type="auth" name="can_create" roles="ADMIN" permissions="admin.configuration.template.feature.delete"}
<a class="btn btn-default btn-xs delete-feature" title="{intl l='Delete this feature'}" href="#delete_feature_dialog" data-id="{$ID}" data-toggle="modal">
<span class="glyphicon glyphicon-trash"></span>
</a>
{/loop}
</div>
</td>
</tr>
{/loop}
{elseloop rel="assigned_features"}
<tr>
<td colspan="3">
<div class="alert alert-info">
{intl l="This template contains no features"}
</div>
</td>
</tr>
{/elseloop}
</tbody>
</table>
{* Delete value confirmation dialog *}
{capture "delete_feature_dialog"}
<input type="hidden" name="template_id" value="{$template_id}" />
<input type="hidden" name="feature_id" id="feature_delete_id" value="" />
{/capture}
{include
file = "includes/generic-confirm-dialog.html"
dialog_id = "delete_feature_dialog"
dialog_title = {intl l="Remove feature"}
dialog_message = {intl l="Do you really want to remove this feature from the template ?"}
form_action = {url path='/admin/configuration/templates/features/delete'}
form_content = {$smarty.capture.delete_feature_dialog nofilter}
}
<script>
$(function() {
// Set proper feature ID in delete feature from
$('a.delete-feature').click(function(ev) {
$('#feature_delete_id').val($(this).data('id'));
});
});
</script>

4
templates/admin/default/template-edit.html
View File

@@ -108,8 +108,8 @@
<script>
$(function() {
$('#attribute_list_management').load("{admin_viewurl view='ajax/template-attribute-list' template_id=$template_id}");
$('#feature_list_management').load("{admin_viewurl view='ajax/template-feature-list' template_id=$template_id}");
$('#feature_list_management').load("{url path='/admin/configuration/templates/features/list' template_id=$template_id}");
$('#attribute_list_management').load("{url path='/admin/configuration/templates/attributes/list' template_id=$template_id}");
});
</script>
{/block}

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}