Product Page Layout/view

gistfile1.txt

{sn_page_start}

	<h1>{exp:stash:title}</h1>
	<p class="product-price">{exp:stash:price}</p>

	<div class="split reversed">
		<div class="split-1">

			<a href="{exp:stash:get name='image'}" class="product-image" title="{exp:stash:get name='title' random}" rel="images">  
				{exp:ce_img:single
					src="{exp:stash:get name='image' random}" 
					alt="{exp:stash:get name='title' random}" 
					width="459" 
					height="459"
					crop="yes"
					parse="inward"
				}
			</a>  

			{if '{exp:stash:has_additional_images}'}
				{exp:stash:get_list name="images"}
					{if count == 1}
					<ul class="image-thumbnails">
					{/if}
						<li {if count == 1}class="active"{/if}>
							<a
								{if count == 1}class="zoomThumbActive"{/if}
								href="{url}" 
								rel="
								{
									gallery: 'images', 
									smallimage: '{exp:ce_img:pair src="{url}" width="459" height="459" crop="yes"}{made}{/exp:ce_img:pair}',
									largeimage: '{url}'
								}"
							>
								{exp:ce_img:single
									src="{url}"
									width="50"
									height="50"
									crop="yes"
								}
							</a>
						</li>
					{if count == total_results}
					</ul>
					{/if}
				{/exp:stash:get_list}
			{/if}

		</div>
		<div class="split-2">

			{exp:stash:description}

			{exp:cartthrob:add_to_cart_form 
				entry_id="{exp:stash:entry_id}"
				return="cart"
				class="add-to-cart form"}			

				<h2>Add to cart</h2>
				<div class="options two">
				{exp:cartthrob:item_options entry_id="{exp:stash:get name='entry_id' random}" parse="inward"}
					{!-- CartThrob outputs an 'Options' option first for some reason. --}
					{if option_label != "Product Options"}
						<p>
							<label for="item-option-{item_options_count}">{option_label}</label>
							{if options_exist}
								<select name="item_options[{option_field}]" id="item-option-{item_options_count}">
								{options}
									<option value="{option_value}">{option_name} {if price != "$0.00"}(+{price}){/if}</option>
								{/options}
								</select>
							{/if}
						</p>
					{/if}
				{/exp:cartthrob:item_options}
				</div>

				<p class="buttons">
					<input type="submit" value="Add to Cart" class="button" />
					<a href="#pricing-availability" class="modal pricing-link">View Pricing &amp; Availability</a>
				</p>
				
			{/exp:cartthrob:add_to_cart_form}

			<div id="pricing-availability" class="reveal-modal">
				<h2>Pricing &amp; Availability</h2>
				<table>
					<thead>
						<tr>
							<th>Product</th>
							<th>Price</th>
							<th>Availability</th>
						</tr>
					</thead>
					<tbody>
					{exp:stash:get_list name="product_options"}
						<tr>
							<td>{name}</td>
							<td>{price}</td>
							<td>{inventory}</td>
						</tr>
					{/exp:stash:get_list}
					</tbody>
				</table>
			</div>
			
		</div>
	</div>

{sn_page_end}