A product card template used for displaying a single product.

Kuvaus

The product card view is used to present a product and its properties in a more detailed manner than on a product list. Usually the decision to purchase the product and add it to the shopping cart is made based on this page.

A good single product page should contain at least the following:

The same tags that can be used in a product card can also be used in the product lists' helper attribute. Therefore, product card functions (e.g. purchase buttons) can also be used in list elements.

Sivupohjan ominaisuudet

Sivupohjan sijainti
themes/shop/THEME/product.html
Sivupohjan URL
/product/ID/tuotteen-nimi
Asetettu näkyvyys
tuote, tuotemerkki, tuoteryhmä

Hyödyllisiä tageja

Toteutus oletusteemassa

{Helper(file:'helpers/header')}
<div id="SidebarBg">
	<div id="Main" class="clearfix">
		{Helper(file:'helpers/sidebar-left')}
		<div id="Primary" class="Column">
			<div id="PageHeader">
				{Path}
				<h1>{PageTitle}</h1>
			</div>
			<div id="ProductBuy" class="BlockForm">
				<div id="ProductShortDesc">
					{ProductShortDesc}
					{ProductBundles}
				</div>
				{ProductPrices}
				{ProductAvailability}
				{ProductBuy(
					variations: 'radio'
				)}
				{AvailabilityNotificationForm(
					before:'
						<div id="AvailabilityNotifications">
							<h2>{%AvailabilityNotificationIntroTitle}</h2>
							<p>{%AvailabilityNotificationIntroText}</p>
							<a href="#AvailabilityNotificationModal" class="Button inlineColorbox">{%SubscribeAvailabilityNotification}</a>
							<div style="display: none;" id="AvailabilityNotificationModalWrapper">
								<div id="AvailabilityNotificationModal">
									<h2>{%AvailabilityNotificationModalTitle}</h2>',
					after: '
								</div>
						</div>
					</div>'
				)}
			</div>
			<div id="ProductImages">
				{ProductImages}
				{ShareButtons}
				<div id="ProductLikes" class="fb-like" data-send="true" data-width="276" data-show-faces="true" data-font="arial"></div>
			</div>
			<div id="ProductFullDesc">
				{ProductFullDesc}

			</div>
			{CrossSaleProducts(
				type: 'normal',
				limit: 12,
				before: '
					<h2 class="BoxHeader Center">{%CrossSalesForProduct}</h2>
					<div class="CrossSaleScroller">
						<div class="CrossSaleProducts">',
				after: '</div></div>',
				helper: 'helpers/listproduct'
			)}
		</div>
		{Helper(file:'helpers/sidebar-right-product')}
	</div>
</div>
{Helper(file:'helpers/footer')}