Styling the Wiper Renderer

What is the Wiper Renderer?

The ATG Recommendations service uses a configurable renderer to display your recommendations. The Wiper Renderer is a flashier renderer that uses animation to “wipe” recommendations, changing them in real time on your site. Just like the other renderers, wiper can be configured using HTML and CSS to fit the look and feel of your website.

Deciding what to render

To use the Wiper Renderer you must specify an extra parameter in the Container <DIV> Element for Recommendations. To do this, add the renderer parameter and set wiper as its value.

The Wiper Renderer is highly configurable with six additional options that can be changed.

• The -wiper-groupsize sets the number of recomendations per wiper group (default 3)
• The -wiper-timer sets the number of milliseconds between wiper changes (default 7000)
• The -wiper-fade sets the number of milliseconds each wipe takes to complete (default 1000)
• The -wiper-dir sets the wipe direction (up, down, left, right) (default up)

• The -wiper-more option will show the more link. The more link kills the interval timer, and manual advances to the next recommendation. (default off)
• The -inc-price option will include the price in the recommendations. (default off)

  <div id="cs-recslot" class="cs-slot">
    <dl class="cs-cfg" style="display: none">
      <dt>headerText</dt><dd>Your Text</dd>    
      <dt>numRecs</dt><dd>Number of Recommendations</dd>
      <dt>renderer</dt><dd>wiper</dd>

      <dt>-wiper-groupsize</dt><dd>3</dd>
      <dt>-wiper-timer</dt><dd>7000</dd>
      <dt>-wiper-fade</dt><dd>1000</dd>
      <dt>-wiper-dir</dt><dd>up</dd>
      <dt>-wiper-more</dt>
      <dt>-inc-price</dt>
    </dl>
  </div>

Styling using CSS

The Wiper Renderer has six classes that should be modified to suit your needs.

• cs-header-text — a <div> tag that contains the header text defined in the Container Element
• cs-rec — <div> tags that contain the individual product recommendations
• cs-title — <span> tags that contain the titles of each product recommendation
• cs-price — <span> tags that contain the prices of each product recommendation
• wipe-container — <div> tag that contains each wipe-group
• wipe-group — <div> tag that contains each wiper recommendation group

A further good idea is to style the <img> and <a> tags, as well as the container <div>.

  #cs-recslot {text-align:left; padding:0; font:12px Arial, sans-serif;}

  #cs-recslot .cs-header-text {font: bold 17px Arial, sans-serif; color:#000;}

  #cs-recslot .cs-rec {float:left; width:125px; text-align:center; padding:3px; margin:10px;}

  #cs-recslot .cs-title {margin:0; padding:0; color:#333;}

  #cs-recslot .cs-price {margin:0; padding:0; padding-top:3px; font-weight:bold;}
  #cs-recslot a:hover .cs-price {color: #000;}

  #cs-recslot .wipe-container {margin:0; padding:0; width:465px; height:165px; overflow:hidden;}
  #cs-recslot .wipe-group {margin:0; padding:0; width:465px; height:165px;}

  #cs-recslot img {width:100px; padding:3px; border:0;}
  #cs-recslot a {color:#000; text-decoration:none; margin:5px;}
  #cs-recslot a:hover {color:#999;}
  #cs-recslot a span {display:block; clear:both;}

Visual Reference