Article

productTemplate

Displays detailed information about a single product.

Overview

Use the productTemplate element to display, for example, a page that describes a movie, including information about the actors, ratings, and like movies. The page displays general information about the product is displayed in the top two-thirds of the screen with a row of related products directly below. The user can scroll down and access detailed information about the product, including critical reviews, actor biographies, and information about any included extras. The following figure shows the basic layout for a productTemplate page. The default theme for a product template is dark when a background image is specified; otherwise, the product template defaults to the system preference.

Layout diagram showing an info list area on the left side of the screen, a stack area in the middle, and a banner area on the right. A shelf area is at the bottom of the screen. A second shelf area is shown as being off the bottom of the screen.

Main Elements

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

<productTemplate>
    <banner>
        <infoList>
        </infoList>
        <stack>
            <title>…</title>
            <subtitle>…</subtitle>
            <row>
            </row>
            <description>…</description>
            <buttonLockup>
            </buttonLockup>
        </stack>
        <heroImage src="…" />
    </banner>
    <shelf>
    </shelf>
    <!—- Everything following is under the fold —->
        <shelf>
        </shelf>
        <productInfo>
        </productInfo>
    </productTemplate>

Element Descriptions

banner

Element containing subelements that provide primary information about a product, such as a movie title, description, credits, and purchase information.

buttonLockup

A type of button that can contain an image (the badge element) as well as text.

description

Text that describes the product in detail; for example, a movie synopsis.

heroImg

An image of the product.

infoList

Product information such as actors, directors, and producers.

productInfo

Technical information about the product such as runtime, language availability, and accessibility information.

row

A group of information elements.

shelf

An element containing row elements. Several shelves are used to display information like shows other users have watched and extra features provided by this product.

stack

Basic information about the product, including the title, rating, and a description.

subtitle

Text that provides additional information about its containing element.

title

The title describing its containing element.

Example

The following listing shows the TVML for a productTemplate example:

<document>
   <productTemplate>
      <background>
      </background>
      <banner>
         <infoList>
            <info>
               <header>
                  <title>Director</title>
               </header>
               <text>John Appleseed</text>
            </info>
            <info>
               <header>
                  <title>Actors</title>
               </header>
               <text>Anne Johnson</text>
               <text>Tom Clark</text>
               <text>Maria Ruiz</text>
            </info>
         </infoList>
         <stack>
            <title>WWDC Road Trip</title>
            <row>
               <text><badge src="resource://tomato-fresh"/> 99%</text>
               <text>1hr 54min</text>
               <text>Comedy</text>
               <text>2015</text>
               <badge src="resource://mpaa-pg" class="badge" />
               <badge src="resource://cc" class="badge" />
            </row>
            <description handlesOverflow ="true">An aspiring developer gets a ticket to WWDC, but can't afford to fly there. Now he needs to get across country in time for the keynote, and the only person who can help him is his slacker roommate.</description>
            <text>Language information can go here</text>
            <row>
               <buttonLockup>
                  <badge src="resource://button-preview" />
                  <title>Preview</title>
               </buttonLockup>
               <buttonLockup type="buy">
                  <text>$9.99</text>
                  <title>Buy</title>
               </buttonLockup>
            </row>
         </stack>
         <heroImg src="path to images on your server/Car_Movie_720x1080.png" />
      </banner>
      <shelf>
         <header>
            <title>Viewers Also Watched</title>
         </header>
         <section>
            <lockup>
               <img src="path to images on your server/Car_Movie_250x375_A.png" width="150" height="226" />
               <title>Turn</title>
            </lockup>
            <lockup>
               <img src="path to images on your server/Car_Movie_250x375_B.png" width="150" height="226" />
               <title>Road</title>
            </lockup>
            <lockup>
               <img src="path to images on your server/Car_Movie_250x375_C.png" width="150" height="226" />
               <title>Helicopter</title>
            </lockup>
         </section>
      </shelf>
<!—- Everything past this is below the fold —->
      <shelf>
         <header>
            <title>Reviews & Ratings</title>
         </header>
         <section>
            <ratingCard>
               <title>4.1 / 5</title>
               <ratingBadge value="0.7"></ratingBadge>
               <description>Average of 2,241 iTunes user ratings and reviews.</description>
            </ratingCard>
            <ratingCard>
               <title><badge src="resource://tomato-fresh" /> 99%</title>
               <text>Tomatometer</text>
               <infoTable>
                  <info>
                     <header>
                        <title>175</title>
                     </header>
                     <text>Reviews</text>
                  </info>
                  <info>
                     <header>
                        <title>173</title>
                     </header>
                     <text>Fresh</text>
                  </info>
                  <info>
                     <header>
                        <title>2</title>
                     </header>
                     <text>Rotten</text>
                  </info>
               </infoTable>
            </ratingCard>
            <reviewCard>
               <badge src="resource://tomato-fresh-m" />
               <title>WWDC Review</title>
               <description>Brief review here</description>
               <text>Ravi Patel June, 8 2015</text>
            </reviewCard>
         </section>
      </shelf>
      <shelf>
         <header>
            <title>Cast and Crew</title>
         </header>
         <section>
            <monogramLockup>
               <monogram firstName="Anne" lastName="Johnson"/>
               <title>Anne Johnson</title>
               <subtitle>Actor</subtitle>
            </monogramLockup>
            <monogramLockup>
               <monogram firstName="Tom" lastName="Clark"/>
               <title>Tom Clark</title>
               <subtitle>Actor</subtitle>
            </monogramLockup>
            <monogramLockup>
               <monogram firstName="Maria" lastName="Ruiz"/>
               <title>Maria Ruiz</title>
               <subtitle>Actor</subtitle>
            </monogramLockup>
         </section>
      </shelf>
      <productInfo>
         <infoTable>
            <header>
               <title>Information</title>
            </header>
            <info>
               <header>
                  <title>Studio</title>
               </header>
               <text>Apple</text>
            </info>
            <info>
               <header>
                  <title>Runtime</title>
               </header>
               <text>1:54</text>
            </info>
            <info>
               <header>
                  <title>Format</title>
               </header>
               <text>Widescreen</text>
            </info>
         </infoTable>
         <infoTable>
            <header>
               <title>Languages</title>
            </header>
            <info>
               <header>
                  <title>Primary</title>
               </header>
               <text>English (Dolby 5.1), Subtitles, CC</text>
            </info>
            <info>
               <header>
                  <title>Additional</title>
               </header>
               <text>Cantonese (Subtitles)</text>
            </info>
         </infoTable>
         <infoTable style="tv-line-spacing:10;">
            <header>
               <title>Accessibility</title>
            </header>
            <info>
               <header>
                  <textBadge>SDH</textBadge>
               </header>
               <text>Subtitles for the deaf and Hard of Hearing (SDH) refer to subtitles in the original lanuage with the addition of relevant non-dialog information.</text>
            </info>
         </infoTable>
      </productInfo>
   </productTemplate>
</document>

The following figures show the ouput for the above example. The first figure shows the output for the example when it first appears on screen. The second figure shows the output below the fold as the user scrolls down the screen.

Screenshot showing a sample product. Director and actor information is on the left, a description in the middle, and an image of the product on the right. A row of similar movies is at the bottom.
Screenshot showing the second page of the product. The top row contains review and ratings, the middle row contains actor information, and the bottom row contains general information about the product.

Topics

Valid TVML Attributes

binding

Associates information in a data item with an element.

itemID

Mark elements for reuse during DOM updates.

layoutDirection

Specifies the direction in which text is displayed.

prototype

Associates a data item type with an element.

theme

Sets the color scheme for an element.

See Also

Full-Page Templates

alertTemplate

Displays important information to the user.

catalogTemplate

Displays groups of items along one side of a page and images of a group's contents on the other side.

compilationTemplate

Displays information about a single media item and its components.

descriptiveAlertTemplate

Displays large amounts of important information to the user.

divTemplate

Provides the ability to create pages that don't conform to a layout defined by another template.

formTemplate

Provides the ability to gather information from the user.

listTemplate

Displays a list of items along one side of a page and the corresponding image on the other side.

loadingTemplate

Displays a spinner and description on the screen.

mainTemplate

Displays user options for a media item.

menuBarTemplate

Creates a page with items along the top and related information below.

oneupTemplate

Creates a page that allows users to navigate between full-screen images.

paradeTemplate

Displays a groups of items along one side of a page and scrolling images on the other side.

productBundleTemplate

Displays information for a group of related media items.

ratingTemplate

Displays a rating for an item.

searchTemplate

Searches for a media item based on user input.

showcaseTemplate

Displays images the user can navigate between.

stackTemplate

Displays groups of products.

Using the productUberTemplate with scrollable regions

Specify regions in a page that are scrollable and not scrollable to use the the new product uber template