All components live in the DCS-CSR-UI directory under the Nucleus path /atg/commerce/custsvc/
ui/renderers/. There are four components for each renderer:

The BaseNameRenderer identifies the renderer and the renderer information that is used by the targeter, the data and the source map. The renderer contains the properties that are necessary to identify the JSP in particular Web application. The RenderInfo class creates the render information:

package atg.commerce.csr.rendering;
public class RenderInfo
{
// Some ID string
public String getId() {}
// URL to JSP
public String getUrl() {}
// WebApp name which contains the JSP referenced
// in the Url, or null for current web-app
public String getWebAppName() {}
// Values for use in constructing rules
public Map getRuleOptions() {}
// Options for use in customizing page rendering
public Map getPageOptions() {}
}

The renderer uses properties files to represent both the default and a custom product rendering page. For example, the default product renderer might be defined in the DefaultProductRenderer.properties file:

$class=atg.commerce.csr.rendering.RenderInfo
id=default
url=/renderers/product/generic.jsp

And the custom product renderer may be defined the CustomProductRenderer.properties file:

$class=atg.commerce.csr.rendering.RenderInfo
id=default
url=/renderers/product/custom.jsp
webAppName=Custom App 2.0

The BaseNamePageData component is used by the page as a place to store parameters to the targeting rule. For example, to use the product item that you are viewing in the rule that you are going to execute to determine which page fragment to use for the product, you would store the product item in the PageData component. The PageData component is a map whose keys can be referenced in the rule as pageData.key-name where key_name is a key in the map.

The BaseNameSourceMap holds the container component of the associated targeter. For example, the source map for a targeter may contain the following:

$class=atg.targeting.TargetingSourceMap

sourceMap=\
  RuleData=/atg/commerce/custsvc/ui/renderers/ProductViewRendererRuleData

The BaseNameTargeter component is configured to target the RenderInfo configurations, using the ProductREnderer.rules. For example the ProductViewProductRendererTargeter.properties file might contain the following:

$class=atg.targeting.RuleBasedCollectionTargeter
collectionComponents=\
DefaultProductRenderer,\
CustomProductRenderer

# The RuleSet configured above
ruleSetService=ProductViewProductRendererRuleSet

Pages that use renderers reference them using the path and the base name, for example:

<csr: renderer name="/atg/commerce/custsvc/renderers/BaseName">
<csr: renderer name="/atg/commerce/custsvc/renderers/ProductInformation">

There are optional RenderInfo properties, which include:

There is also a subclass RenderInfo for additional custom properties. A contextRoot property is available in the atg.commerce.csr.rendering.RenderInfo class, allowing you to identify a Web application within Commerce Service Center. The Web application is executed when a user’s Web browser references a URL that contains the Web module’s context root.

Because the context root controls the location of all files mentioned in the BasenameRenderer.properties file, whenever you modify a context root, you must ensure that any page that is referenced by the component is also available in that context root.

For example, if you were to modify a renderer component such as /atg/commerce/custsvc/ui/ to identify the contextRoot property of:

contextRoot=/web-app
url=/web-app/test.html

You must ensure that all other pages referenced by this renderer can access the context root. This replaces the contents of the product information panel with whatever would be rendered by visiting http://machine:port/web-app/test.html.