202 lines
13 KiB
HTML
202 lines
13 KiB
HTML
{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} |