Booc ReadyTheme - Product Display Layout :: UPDATED

product_display_layout.html

<section class="bg--white h-corners product-details">
	<article itemscope itemtype="http://schema.org/Product">
		<div class="row h-nm">
			<div class="column whole">
				<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:product_flags">
					<mvt:if expr="l.settings:product:customfield_values:customfields:product_flags EQ 'On Sale'">
						<mvt:assign name="l.settings:product:flagColor" value="'bg--red color--white'" />
					<mvt:elseif expr="l.settings:product:customfield_values:customfields:product_flags EQ 'New'">
						<mvt:assign name="l.settings:product:flagColor" value="'bg--green'" />
					<mvt:else>
						<mvt:assign name="l.settings:product:flagColor" value="'border--red color--red'" />
					</mvt:if>
					<span class="tag &mvt:product:flagColor; font--uppercase">&mvt:product:customfield_values:customfields:product_flags;</span>
				</mvt:if>
				<h1 class="font--uppercase h2 h-nm" itemprop="name">&mvt:product:name;</h1>
			</div>
			<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:author">
				<div class="column whole small-half font--small font--uppercase">By &mvt:product:customfield_values:customfields:author;</div>
				<div class="column whole small-half font--small font--uppercase h-align-right---s">&mvt:product:code;</div>
			<mvt:else>
				<div class="column whole small-half font--small font--uppercase">&mvt:product:code;</div>
			</mvt:if>
		</div>
		<hr class="border--secondary">
		<form class="row h-nm product-details__purchase" id="js-purchase-product" data-hook="product-details__purchase" method="post" action="&mvte:urls:BASK:auto;" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			<div class="product-details__purchase__processing bg--white" data-hook="product-details__purchase__processing">
				<span class="processing-indicator color--primary"></span>
			</div>
			<div class="message message--warning product-details__purchase__message" data-hook="product-details__purchase__message"></div>
			<input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
			<input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
			<input type="hidden" name="Action" value="ADPR" />
			<input type="hidden" name="Product_Code" value="&mvte:product:code;" data-hook="product-code" />
			<input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
			<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
			<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
			<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
			<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
			<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
			<div class="column whole" id="js-product-discounts"></div>
			<div class="column half small-one-sixth">
				<span class="product-details__price">
					<span data-hook="product-details__price" id="js-price-value" itemprop="price" content="&mvt:product:price;">&mvt:product:formatted_price;</span>
					<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
						<span class="font--regular product-details__price-additional"> &nbsp;Was: <s id="js-price-value-additional">&mvt:product:formatted_base_price;</s></span>
					</mvt:if>
				</span>
			</div>
			<div class="column one-fourth small-one-eighth large-one-twelfth h-align-right h-nrp">
				<label class="font--bold font--uppercase input--medium" for="l-quantity">Qty</label>
			</div>
			<div class="column one-fourth small-one-eighth large-one-twelfth">
				<input id="l-quantity" class="border--gray h-align-center input--medium" type="tel" name="Quantity" value="1">
			</div>
			<div class="column whole small-seven-twelfths large-one-third">
				<mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
					<div class="product-details__inventory-message" id="js-inventory-message">
						<link itemprop="availability" href="http://schema.org/&mvt:product:inv_short;">
						&mvt:product:inv_long;
					</div>
				</mvt:if>
				<div class="product-details__attributes" id="js-product-attributes">
					<mvt:item name="product_attributes" param="product:id" />
				</div>
			</div>
			<div class="h-breaker h-clear h-all-hidden---s"></div>
			<div class="column two-thirds x-small-half small-five-twelfths medium-one-third large-one-fourth h-align-center---l">
				<mvt:item name="buttons" param="AddToBasket" />
			</div>
			<div class="column one-third x-small-half small-one-sixth large-one-twelfth">
				<mvt:item name="buttons" param="AddToWishList" />
			</div>
		</form>
		<hr class="border--secondary">
		<div class="row h-nm">
			<div class="column whole small-half h-align-center product-details__images">
				<figure class="product-details__main-image" data-hook="main-image-zoom" data-index="0">
					<img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" />
				</figure>
				<div class="product-details__additional-images" id="js-thumbnails" data-hook="thumbnails"></div>
				<mvt:item name="product_display_imagemachine" param="body:product:id" />
			</div>
			<div class="column whole small-half product-details__description">
				<h5>Product Details</h5>
				<div itemprop="description">
					&mvt:product:descrip;
				</div>
			</div>
		</div>
	</article>
</section>
<div class="h-breaker"></div>
<!-- end .product-details -->