Sample Product Page with Heavy Comments - Developer Example
TODO-UC: Add those heavy comments. Explain everything. details details details.
## ## UltraCart - Mr Teas Template ## http://www.ultracart.com/ ## ## Copyright (c) 2015 BPS Info Solutions Inc. ## License located here: ## http://www.ultracart.com/storefront/license/ ## ## Designed by Level 2 Design, LLC http://www.level2d.com/ ## ## uc:contains-velocity="true" ## uc:page-type="item" ## uc:item-multimedia-default-used="true" ## uc:theme-attribute-boolean="Show Options" ## uc:site-attribute-string="facebookAccount" ## uc:site-attribute-string="twitterAccount" ## uc:site-attribute-string="pinterestAccount" ## uc:site-attribute-boolean="shareFacebook" ## uc:site-attribute-boolean="shareTwitter" ## uc:site-attribute-boolean="sharePinterest" ## uc:theme-attribute-boolean="Information Only Theme" #parse("/snippets/checkout_only_redirect.vm") #set($bodyClass = "product-page") #set($outOfStock = false) #if($item.isInventoryTracked()) #if($item.getAvailableQuantity() && $item.getAvailableQuantity() < 1) #set($outOfStock = true) #end #end #parse("/snippets/google_base_offer_id.vm") #parse("/snippets/top.vm") <div class="row no-margin"> <div class="columns small-16"> #parse("/snippets/breadcrumbs.vm") </div> </div> <div class="row"> <div class="columns small-16 medium-6"> <div class="product-list-images viewer"> <ul> #if($item.getMultimedia("Image") && $item.getMultimedia("Image").size() > 0) #foreach($img in $item.getMultimedia("Image")) #if($formatHelper.notNull($img.getCode()) != 'featured') <li class="#if($outOfStock)out-of-stock#{end} product-image" #if($velocityCount > 1) style="display:none;" #end > <a href="$img.getViewSsl()"> <strong>$formatHelper.notNull($img.getDescription())</strong> <span class="link">View</span> <img src="$baseThumbnailUrl${img.getThumbnail(100, 100, false)}" data-large="$baseThumbnailUrl$img.getThumbnail(360, 360, false)" width="100" height="100" alt="$formatHelper.notNull($img.getDescription())" /> #if($outOfStock) <sub> <em>Out of stock</em> </sub> #end </a> </li> #end #end #else <li #if($outOfStock)class="out-of-stock product-image" #{end}> <strong>$item.getTitle()</strong> <span class="link">View</span> <img src="$baseThemeUrl$theme.attr('Item No Image Available Image URL')" data-large="$baseThemeUrl$theme.attr('Item No Image Available Image URL')" width="100" height="133" alt="$item.getTitle()" /> #if($outOfStock) <sub> <em>Out of stock</em> </sub> #end </li> #end </ul> </div> </div> <article class="product-item columns small-16 medium-8 medium-push-1"> <h1>$item.getDescriptionNoEscape()</h1> <div class="row"> <div class="columns small-8 small-half-margin-bottom medium-half-margin-bottom large-no-margin-bottom"> #if($item.getSaleCost()) ## <span class="price uc-variation-cost-${item.getMerchantItemID()}"><strike>$item.getRegularCostLocalized()</strike></span> <span class="price sale uc-variation-cost-${item.getMerchantItemID()}">$item.getSaleCostLocalized()</span> <span class="#if($item.getSaleCost())has-sale#end price uc-variation-cost-${item.getMerchantItemID()}"><del>$item.getRegularCostLocalized()</del></span> <span class="#if(!$item.getSaleCost())no-sale#end sale price uc-variation-sale-cost-${item.getMerchantItemID()}">$item.getSaleCostLocalized()</span> #else <span class="price uc-variation-cost-${item.getMerchantItemID()}">$item.getCostLocalized()</span> #end </div> <div class="columns small-16 medium-16 large-8 large-text-right"> #if($item.isReviewable()) #if (!$item.hasApprovedReview()) <a href="#panel-product-review" id="item-show-reviews" class="review-stars"> No Reviews ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> </a> #else <a href="#panel-product-review" id="item-show-reviews" class="review-stars"> $item.getReviewOverallAsHtml([ "<span class='icon-star-0-4'></span>", "<span class='icon-star-1-4'></span>", "<span class='icon-star-2-4'></span>", "<span class='icon-star-3-4'></span>", "<span class='icon-star-4-4'></span>" ]) ($item.getReviews().size() Reviews) </a> #end #end </div> </div> <hr class="small-pad"> #if ($item.getExtendedDescription().length() > 300) $formatHelper.excerptXhtml($formatHelper.removeHtml($item.getExtendedDescriptionNoEscape()), 300) <br> <a href="#panel-product-description" id="item-read-more">Read More</a> <hr class="small-pad"> #else $formatHelper.removeHtml($item.getExtendedDescriptionNoEscape()) #end #if($theme.attr("Information Only Theme", "false") != "true") <form method="POST" action="$checkoutUrlHttps" id="add-cart-form"> <input type="hidden" name="merchantId" value="${merchantID}"/> <input type="hidden" name="ADD" value="${item.getMerchantItemID()}"/> #if($theme.attr('Show Options') == 'true') #foreach ($itemOption in $item.getOptions()) <div class="label-group"> #if($itemOption.getType() == "dropdown") <label for="option-select$velocityCount">$itemOption.getLabel()</label> <input type="hidden" name="OptionName$velocityCount" value="$formatHelper.escapeHtml($itemOption.getName())" /> <select id="option-select$velocityCount" name="OptionValue$velocityCount"> #foreach ($dropDownValue in $itemOption.getDropDownValues()) <option value="$formatHelper.escapeHtml($dropDownValue)">$formatHelper.escapeHtml($dropDownValue)</option> #end </select> #end #if($itemOption.getType() == "single") <label for="option-single$velocityCount">$itemOption.getLabel()</label> <input type="hidden" name="OptionName$velocityCount" value="$formatHelper.escapeHtml($itemOption.getName())" /> <input id="option-single$velocityCount" type="text" name="OptionValue$velocityCount" /> #end #if($itemOption.getType() == "multiline") <label for="option-multiline$velocityCount">$itemOption.getLabel()</label> <input type="hidden" name="OptionName$velocityCount" value="$formatHelper.escapeHtml($itemOption.getName())" /> <textarea id="option-multiline$velocityCount" type="text" name="OptionValue$velocityCount"></textarea> #end #if($itemOption.getType() == "radio") <label>$itemOption.getLabel()</label> <br> <ul class='option-group'> #foreach($radioValues in $itemOption.getValues()) <li> <label for="option-radio$velocityCount"> <input type="hidden" name="OptionName$velocityCount" value="$formatHelper.escapeHtml($itemOption.getName())" /> <input type="radio" name="OptionValue$velocityCount" value="$formatHelper.escapeHtml($radioValues.value)" />$formatHelper.escapeHtml($radioValues.value)</label> </li> #end </ul> #end #if($itemOption.getType() == "file attachment") <label for="option-file$velocityCount">$itemOption.getLabel()</label> <input id="option-file$velocityCount" type="file" name="$formatHelper.escapeHtml($itemOption.getName())" /> #end </div> #end #end <!-- Variation Form --> #set($hasVariations = $item.getVariations().size() > 0) #if($hasVariations) #foreach($variation in $item.getVariations()) ## <div> <label class="label-group"><span>${variation.getName()}</span> <input type='hidden' name="VariationName${velocityCount}" value="${variation.getName()}"/> <select name="VariationValue${velocityCount}" id="uc-variation-field-${velocityCount}-${item.getMerchantItemID()}" class='variationSelectBox'> </select> </label> ## </div> #end #end ## <div class="columns small-16"> <div class="row"> ## <div class="label-group"> ## </div> <div class="columns small-4"> <label for="item-quantity" class="label-group"> <span>Quantity</span> <input id="item-quantity" type="number" name="Quantity" value="1" min="1" /> </label> </div> <div class="columns small-8 medium-8 large-6 half-margin-top"> <button type="submit" class="postfix item-qty-btn half-margin-top" #if($outOfStock) disabled #{end} title="Submit">ADD TO CART</button> <small> #if($item.isInventoryTracked() && $hasVariations == false) #if($item.getAvailableQuantity() && $item.getAvailableQuantity() < 1) Out of stock #end #end </small> </div> </div> <div class="row"> <div class="small columns small-8"> SKU: $item.getMerchantItemID() </div> <div class="text-right columns small-8 large-6"> <a id="wishlist-btn" data-reveal-id="#{if}($cart.isLoggedIn())wishlist-modal#{else}wishlist-not-loggedin#{end}">Add to wishlist</a> <div id="wishlist-not-loggedin" class="reveal-modal" data-reveal aria-labelledby="Not Logged In" aria-hidden="true" role="dialog"> <h2 id="modalTitle">You must be logged in to access the wishlist feature.</h2> <a href="${myAccountUrlHttps}&OVERRIDECONTINUESHOPPINGURL=$baseUrl">Login or Register</a> </div> <div id="wishlist-modal" class="reveal-modal" data-reveal aria-labelledby="Add To Wishlist" aria-hidden="true" role="dialog"> <h2 id="modalTitle">Add $item.getTitle() to your wishlist</h2> <form action="#" method="post"> <input type="hidden" name="itemId" id="wishlist-itemId" value="$item.getMerchantItemID()" /> <label class="label-move"> <span>Priority</span> <select name="priority" id="wishlist-priority"> <option value="1">Lowest</option> <option value="2">Low</option> <option value="3" selected>Medium</option> <option value="4">High</option> <option value="5">Highest</option> </select> </label> <label class="label-move"> <span>Comments</span> <textarea name="comments" id="wishlist-comments"> </textarea> </label> <a class="close-reveal-modal" aria-label="Close">×</a> <button id="js-add-to-wishlist" title="Add To Wishlist" >Add To Wishlist</button> </form> </div> <div id="wishlist-added-modal" class="reveal-modal" data-reveal aria-labelledby="Successfully Added To Wishlist" aria-hidden="true" role="dialog"> <h2 id="wishlistAddedTitle">Wishlist Updated</h2> <p>$item.getTitle() has been added successfully to your wishlist.</p> <a class="close-reveal-modal" aria-label="Close">×</a> </div> </div> </div> ## </div> </form> <hr class="small-pad"> #end <ul class="social-buttons inline"> ## $item.getDescriptionNoEscape() #if($site.attr('facebookAccount', '') != '' && $site.attr('shareFacebook') == 'true') <li class="facebook" data-url="$baseUrl$requestURI" data-text="$formatHelper.removeNewLines($formatHelper.removeHtml($item.getExtendedDescriptionNoEscape()))" data-title="$formatHelper.trimIfTooLong($formatHelper.singleLine($item.getTitle()), 250)"> </li> #end #if($site.attr('twitterAccount', '') != '' && $site.attr('shareTwitter') == 'true') <li class="twitter" data-url="$baseUrl$requestURI" data-text="$formatHelper.excerpt($formatHelper.removeNewLines($formatHelper.removeHtml($item.getExtendedDescriptionNoEscape())), 115)" data-title="$formatHelper.trimIfTooLong($formatHelper.singleLine($item.getTitle()), 250)"> </li> #end #if($site.attr('pinterestAccount', '') != '' && $site.attr('sharePinterest') == 'true') <li class="pinterest" data-url="$baseUrl$requestURI" data-text="$formatHelper.removeNewLines($formatHelper.removeHtml($item.getTitle()))" data-title="$formatHelper.trimIfTooLong($formatHelper.singleLine($item.getTitle()), 250)"> </li> #end </ul> </article> <div class="columns small-16"> <dl class="tabs" data-tab> #if ($item.getExtendedDescription().length() > 300) <dd class="active"> <a href="#panel-product-description" id="product-description-tab" title="View this"> <span class="show-for-medium-up">Product </span> Description </a> </dd> #if($item.isReviewable()) <dd> <a href="#panel-product-reviews" id="product-reviews-tab" title="View this"> <span class="show-for-medium-up">Product </span> Reviews </a> </dd> #end #else #if($item.isReviewable()) <dd class="active"> <a href="#panel-product-reviews" id="product-reviews-tab" title="View this"> <span class="show-for-medium-up">Product </span> Reviews </a> </dd> #end #end </dl> </div> <div class="tabs-content columns small-16"> #if ($item.getExtendedDescription().length() > 300) <section class="content active" id="panel-product-description"> <article> <h1>$item.getDescriptionNoEscape()</h1> <div class="half-margin-top">$item.getExtendedDescriptionNoEscape()</div> </article> </section> #end #if($item.isReviewable()) #parse("/snippets/review.vm") #end </div> </div> #if($item.getRelatedItems() && $item.getRelatedItems().size() > 0) <div class="row"> <div class="columns small-full"> <div class="title"><span>Related Items</span> </div> <div class="product-list-images small gallery"> <ul> #foreach($item in $item.getRelatedItems()) #if($item.getSaleCost()) #set($saleClass = "sale") #else #set($saleClass = "") #end #if($item.isInventoryTracked()) #if($item.getAvailableQuantity() && $item.getAvailableQuantity() < 1) #set($stockClass = "out-of-stock") #else #set($stockClass = "") #end #else #set($stockClass = "") #end <li data-equalizer-watch class="$saleClass $stockClass"> <a href="${baseUrl}${item.getPath()}" title="$item.getTitle()" class="product-photo"> <strong>${item.getTitle()}</strong> <span class="link">View</span> #if($item.getDefaultMultimedia('Image')) <img src="$baseThumbnailUrl$item.getDefaultMultimedia('Image').getThumbnail(220, 220)" class="UC-default-item-multimedia" width="220" height="220" alt="$item.getTitle()" /> #else <img src="$baseThemeUrl$theme.attr('Item No Image Available Image URL')" width="220" height="220" alt="$item.getTitle()" /> #end #if($item.getSaleCost()) <sub> <em>Sale!</em> </sub> #end #if($item.isInventoryTracked()) #if($item.getAvailableQuantity() && $item.getAvailableQuantity() < 1) <sub> <em>Out of stock</em> </sub> #end #end </a> <div class="product-info"> <a href="${baseUrl}${item.getPath()}" title="" class="product-title">${item.getTitle()}</a> #if($item.isReviewable()) #if (!$item.hasApprovedReview()) <div class="review-stars"> No Reviews ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> ## <span class='icon-star-0-4'></span> </div> #else <div class="review-stars"> $item.getReviewOverallAsHtml([ "<span class='icon-star-0-4'></span>", "<span class='icon-star-1-4'></span>", "<span class='icon-star-2-4'></span>", "<span class='icon-star-3-4'></span>", "<span class='icon-star-4-4'></span>" ]) </div> #end #end <p class="product-description">$formatHelper.excerpt($formatHelper.removeHtml(${item.getExtendedDescriptionNoEscape()}), 130)</p> #if($item.getSaleCost()) <span class="price"><strike>$item.getRegularCostLocalized()</strike></span> <span class="price sale">$item.getSaleCostLocalized()</span> #else <span class="price">$item.getCostLocalized()</span> #end </div> </li> #end </ul> </div> </div> </div> #end #parse("/snippets/bottom.vm")