/
Sample Product Page with Heavy Comments - Developer Example

Sample Product Page with Heavy Comments - Developer Example

Jul 01, 2015

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>&nbsp;&nbsp;&nbsp;
            <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">&#215;</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">&#215;</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")