Displaying a list of products on a page - Developer Example

##
## 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:display-items="true"
## uc:item-multimedia-default-used="true"

## uc:theme-attribute-boolean="Hide Sale Banner"
## uc:theme-attribute-boolean="Hide Out of Stock Banner"

<!-- $theme.attr("Hide Sale Banner", "false") -->
<div class="product-list-images small four-up" data-equalizer>
  <ul>
    #set($groupItems = $group.getItemsForPage($page))
    ## $formatHelper.sortByAttribute($groupItems, "sort_order", false)
    ## $formatHelper.removeItemsWithoutCost($groupItems)
    ## $formatHelper.removeOutOfStockItems($groupItems)

    ## Below manually sets the url segment that is used to construct the item path

    ## #set($groupItems = $formatHelper.getItemsForPage($groupItems, $page, 2))

    #foreach($item in $groupItems)

      #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 #if($theme.attr('Hide Out of Stock Banner') == 'false') $stockClass #end">
        <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() && $theme.attr("Hide Sale Banner") == "false")
            <sub>
              <em>Sale!</em>
            </sub>
          #end
          #if($item.isInventoryTracked() && $theme.attr("Hide Out of Stock Banner") == "false")
            #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>