gistfile1.twig

{% extends "store/template/base.html" %}
{% import "macro/head.html" as headMacro %}
{% import "macro/store.html" as storeMacro %}

{% block head %}
	{{ parent() }}
	{{ headMacro.css( "static/css/store/product.css" ) }}
	{{ headMacro.js( "static/js/store/product.js" ) }}
{% endblock %}

{% macro displayStock( stock ) %}
<p class="sf_stock">{% trans "Stock" %}: 
	{% if stock is not none and stock == 0 %}
		<b>{% trans "No more in stock." %}</b>
	{% elseif stock is not none and stock < 5 %}
		<b>	
			{% trans %}
				Only {{stock}} in stock.
			{% endtrans %}
		</b>
	{% else %}
		{{stock}} {% trans "In stock" %}
	{% endif %}
</p>
{% endmacro %}

{% block store_content %}
<div id="sf_product">
	<h3 class="sf_title_bar">{% trans "Product" %}</h3>
	{% for item in items %}
		<div item_id="{{item.Id}}" class="sf_item {% if not loop.first %}sf_hide{% endif %}">
			<div class="sf_info clearfix">
				<div class="sf_images">
					{% for image in item.ImageUrls%}
							{% if loop.first %}								
								{% set image_class = "" %}
							{% else %}
								{% set image_class = "sf_hide" %}
							{% endif %}
							<div class="sf_product_big_image {{image_class}}" image_id="{{image.Id}}">
								<img src="{{ image|image_resize( 250, 250 ) }}" alt="{{item.Name}}"/>
							</div>
					{% else %}
						<div class="sf_product_big_image">
							<img src="static/img/store/no_image.png" alt="Product Image" />
						</div>
					{% endfor %}
					{% if item.ImageUrls|length > 1 %}
						{% for image in item.ImageUrls %}
							<span class="sf_item_thumb_outer {% if loop.first %}sf_selected{% endif %}" image_id="{{image.Id}}">
								<img class="sf_item_thumb" src="{{ image|image_resize( 47, 47 ) }}" alt="{{item.Name}}"/>
							</span>
						{% endfor %}
					{% endif %}
				</div>					
				<div class="sf_purchase">
					{{ storeMacro.displayPrice( item.Price, item.DiscountPrice ) }}
					{% if item.IsActive %}
						<a class="btn sf_button_cart"  href="JavaScript:void(0)"><span>Add To Cart</span></a>
					{% endif %}
				</div>
				<div class="sf_about">
					<span class="sf_title">{{item.Name}}</span>
					{{ _self.displayStock( item.Stock ) }}					
					{% if loop.length > 1 %}
						<div class="sf_items clearfix">
							{% for item in items %}
								{% if loop.first %}
									{% set selected = "sf_selected" %}
								{% else %}
									{% set selected = "" %}
								{% endif %}
								<span class="sf_item_thumb_outer {{selected}}" item_id="{{item.Id}}">
									{% if item.ImageUrls|length > 0 %}
										<img class="sf_item_thumb" src="{{ item.ImageUrls.0|image_resize( 47, 47 ) }}" alt="{{item.Name}}"/>
									{% else %}
										{{ item.Name }}
									{% endif %}										
								</span>
							{% endfor %}
						</div>
					{% endif %}
				</div>		
			</div>
		</div>
	{% endfor %}
	<h4>{% trans "Description" %}</h4>
	<p class="sf_description">
		{{product.Description}}
	</p>
</div>
{% endblock %}