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