Tuotekortin sivupohja, jolla näytetään yksi tuote.

Kuvaus

Tuotekorttinäkymää käytetään tuotteen ja sen ominaisuuksien esittelyyn tuotelistaa laajemmin. Tämä on sivu, jonka pohjalta ostopäätös yleensä tehdään ja tuote siirretään ostoskoriin.

Yleensä yksittäisen tuotteen sivulta on hyvä löytyä ainakin seuraavat elementit:

Kaikki tagit jotka toimivat tuotekortissa toimivat myös tuotelistojen helper-attribuutissa. Tuotekortin toimintoja (esim. ostopainikkeita) on siis mahdollista käyttää myös listalementeillä.

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')}