Column Display of Multiple IDs in RTML

A common method for displaying a long list of products shows thumbnails arranged in rows and columns. It’s pretty easy to do if you hand code each item in each row and column. But what if you want to use a variable number of columns and products, like using the Yahoo! store Columns variable and the Specials homepage variable? This example demonstrates a Yahoo! store template which outputs the thumbnail, name and sale-price of a sequence of IDs in rows and columns using <DIV> tags. The sequence and number of columns are passed to the template. It will also check for the presence of and icon or image in the product and render a global “blank-image” image with name if there are none.

(in calling template)

CALL Contents-Rows
     @Contents
     @Columns

(in template)

Contents-Rows (ids cols)

WHEN ids
 FOR-EACH var item
          sequence SEGMENTS length cols
                            sequence ids
   WITH= variable itemlen
         value LENGTH item
     DIV class "box"
         id "content-list"
       PARAGRAPH class "nom"
         FOR variable x
             initial 0
             test < value1 x
                    value2 itemlen
             update x + 1
           WITH-OBJECT ELEMENT position x
                               sequence item
             IF test @icon
                then MULTI
                       DIV class "product"
                         WITH-LINK TO id
                           IMAGE source RENDER image @icon
                                               max-height @thumb-height
                                               max-width @thumb-width
                                 alt @name
                                 title @name
                         DIV class "title"
                           WITH-LINK TO id
                             TEXT @name
                         IF test > value1 ELEMENT position 0
                                                  sequence @sale-price
                            value2 0
                            then MULTI
                                   DIV class "price"
                                     PRICE number ELEMENT position 0
                                                          sequence @sale-price
                                           currency @currency
                            else nil
                else IF test @image
                        then MULTI
                               DIV class "product"
                                 WITH-LINK TO id
                                   IMAGE source RENDER image @image
                                                       max-height @thumb-height
                                                       max-width @thumb-width                                           
                                         alt @name
                                         title @name                                                
                                 DIV class "title"                      
                                   WITH-LINK TO id
                                     TEXT @name
                                 IF test > value1 ELEMENT position 0               
                                                          sequence @sale-price 
                                    value2 0 
                                    then MULTI
                                           DIV class "price"
                                             PRICE number ELEMENT position 0
                                                                  sequence @sale-price
                                                   currency @currency
                                    else nil
                        else MULTI 
                               DIV class "product" 
                                 WITH-LINK TO id 
                                   IMAGE source RENDER image @blank-image 
                                                       text @name
                                                       text-color @link-color
                                                       text-align :center
                                                       max-height @thumb-height
                                                       min-height @thumb-height 
                                                       max-width @thumb-width
                                                       crop :left    
                                         alt @name
                                         title @name           
                                 DIV class "title"
                                   WITH-LINK TO id
                                     TEXT @name
                                 IF test > value1 ELEMENT position 0
                                                          sequence @sale-price
                                    value2 0
                                    then MULTI
                                           DIV class "price"
                                             PRICE number ELEMENT position 0
                                                                  sequence @sale-price
                                                   currency @currency
                                    else nil