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