Contents

stackTemplate

Displays groups of products.

Overview

Use the stackTemplate element to display, for example, displaying different genres of movies. Each group of products is displayed directly underneath the previous group. Products can be displayed in different ways using carousel, grid, and shelf elements. The following figure shows the basic layout for a stackTemplate page. The theme for the stack template defaults to the system preference.

[Image]

Main Elements

The following listing shows the main elements of the stackTemplate element in TVML format.

<stackTemplate>
    <banner>
        …
    </banner>
    <collectionList>
        <shelf>
            <section>
                <lockup>…</lockup>
            </section>
        </shelf>
    </collectionList>
</stackTemplate>

Element Descriptions

banner

A page description along the top of the screen.

carousel

Element that contains all elements used to display groups of products, such as dramas and comedies, in a horizontal format.

collectionList

Element that contains all elements used to display groups of products, such as dramas and comedies, in a horizontal format.

grid

Element that contains all elements used to display groups of products, such as dramas and comedies, in a grid format.

lockup

Element containing img and title elements used to describe a product.

section

Element containing a group of lockup elements.

shelf

Element containing a group of section elements.

Example

The following listing shows the TVML for a stackTemplate example:

<document>
    <stackTemplate>
        <banner>
            <title>Available Action Movies</title>
        </banner>
        <collectionList>
            <shelf>
                <section>
                    <lockup>
                        <img src="path to images on your server/Car_Movie_250x375_A.png" width="182" height="274" />
                        <title>Movie 1</title>
                    </lockup>
                    <lockup>
                        <img src="path to images on your server/Car_Movie_250x375_B.png" width="182" height="274" />
                        <title>Movie 2</title>
                    </lockup>
                    <lockup>
                        <img src="path to images on your server/Car_Movie_250x375_C.png" width="182" height="274" />
                        <title>Movie 3</title>
                    </lockup>
                </section>
            </shelf>
            <shelf>
                <section>
                    <lockup>
                        <img src="path to images on your servers/Space_Movie/Space_Movie_250x375_B.png" width="182" height="274"></img>
                        <title>Movie 4</title>
                    </lockup>
                    <lockup>
                        <img src="path to images on your server/Space_Movie/Space_Movie_250x375_A.png" width="182" height="274"></img>
                        <title>Movie 5</title>
                    </lockup>
                    <lockup>
                        <img src="path to images on your server/Space_Movie/Space_Movie_250x375_C.png" width="182" height="274"></img>
                        <title>Movie 6</title>
                    </lockup>
                </section>
            </shelf>
        </collectionList>
    </stackTemplate>
</document>

The following figure shows the output for the above example:

[Image]

You can also customize the stack template’s background content. To do so, embed a mediaContent element in a background element, as shown in this example:

<background>
    <mediaContent playbackMode="always">
        <img src="path to images on your server/Car_Movie.png"/>
    </mediaContent>
</background>

When you add a video in the background, playback starts 5 seconds after the page is loaded. The video does not repeat.

Topics

Valid TVML Attributes

See Also

Full-Page Templates