Featuring product on your home page - Developer Example

TODO-UC: Explain how to set a page (group) attribute for featured items and then looping through it on the page.

 

## uc:page-attribute-itemset="home slider items"
 
<div class="featured-products-gallery">
#set($featuredItems = $group.attrItemSet("home slider items"))
   <ul>
   #if($featuredItems.size() > 0)

     #foreach($item in $featuredItems)


       #if ( $item.getMultimediaByCode("featured") )
         #set( $featuredImage = $item.getMultimediaByCode('featured') )
         #set( $featuredClass = "UC-item-multimedia-code-featured")
       #else
         #set( $featuredImage = $item.getDefaultMultimedia('Image') )
         #set( $featuredClass = "UC-default-item-multimedia")
       #end
           <li style="background-image: url($featuredImage.getViewSsl());" class="$featuredClass">
             #if($item.getPath()) ## we do this so the link doesn't 404 if an item is assigned to the slider, but not actually assigned anywhere in the catalog
               <a href="${item.getPath()}">
             #end
               #if(($item.getAttribute('featured-title') && $item.getAttribute('featured-title').length() > 0) || ($item.getAttribute('featured-subtitle') && $item.getAttribute('featured-subtitle').length() > 0))
               <div class="featured-overlay" style="height:100%;">
                 #if($item.getAttribute('featured-title'))
                   <h1 class="UC-item-attribute-featured-title">$item.getAttribute('featured-title')</h1>
                 #end
                 #if($item.getAttribute('featured-subtitle'))
                   <h2 class="UC-item-attribute-featured-subtitle">$item.getAttribute('featured-subtitle')</h2>
                 #end
               </div>
               #end
             #if($item.getPath())
               </a>
             #end
           </li>
     #end

   #else
     <li style="background-image: url(${baseUrl}/assets/imgs/feature-slide-1.jpg);">
       <h1>Welcome to Mr Teas</h1>
       <h2>Subtitle</h2>
     </li>
   #end
   </ul>

 </div>