Customization guidelines for ribbon ad CSS styles

You can define CSS styles to format ribbon ads on your storefront. When business users create ribbon ad attributes in Management Center and assign the attributes to catalog entries, the ribbon ads use the CSS styles that you define.

Default HTML structure for ribbon ads

Here is an example of the HTML code for ribbon ads for starter stores:

<div class="product_image">	<!--Wraps the entire image thumbnail-->
	<div class="image">
		<a title="Title Text" href="url" id="catalogEntry_img10019">
			<img src="/wcsstore/Aurora/images/catalog/wcl000_036.jpg" alt="Alt Text">
			<div class="RibbonAdDefault AttributeCode">Attribute Value</div>
		</a>
	</div>
</div>

Ribbon ads come with a default style. To add a ribbon ad and assign it to a product, create a new attribute. The Code value is added as a class to the <div> tag with the class of RibbonAdDefault. Here is an example of the HTML structure for an attribute with the Code value, "ExclusivePromo" and an attribute Value, "Exclusive":

<div class="product_image">	<!--Wraps the entire image thumbnail-->
	<div class="image">
		<a title="Title Text" href="url" id="catalogEntry_img10019">
			<img src="/wcsstore/Aurora/images/catalog/wcl000_036.jpg" alt="Alt Text">
			<div class="RibbonAdDefault ExclusivePromo">Exclusive</div>
		</a>
	</div>
</div>

Overriding default ribbon ad styles by modifying CSS styles

To override the default ribbon ad style, modify the appropriate element in the styles.css file. For example, to modify the ribbon ad style for the product that is assigned with the "ExclusivePromo" attribute Code value, use the following CSS code:

.product_image .RibbonAdDefault.ExclusivePromo {
	background-color: #2C2C2C;
	background: -webkit-gradient(linear, left top, right top, color-stop(0.76, rgba(202, 67, 0, 1)), color-stop(1, rgba(255, 255, 255, 0)));
	background: linear-gradient(to right, rgba(202, 67, 0, 1) 76%, rgba(255, 255, 255, 0) 100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=1, startColorStr='#FFCA4300', endColorStr='#00FFFFFF')";
	bottom: 70px;
}

Customizing existing JSP files to support custom ribbon ad styles

For every CatalogEntry in the grid view, the catalog entry common widget is used to render the display of a single catalog entry. The following code snippets show how ribbon ads are coded in the Aurora store.

To store all ribbon ads, a linked hash map, adRibbonMap, is created in the main widget file.

<jsp:useBean id="adRibbonMap" class="java.util.LinkedHashMap" type="java.util.Map" scope="page"/>

In a data JSP file, the following code is run to loop through all the attributes for a product. When the storeDisplay flag is TRUE, it means that the attribute is marked as a ribbon ad. These attributes are collected and stored in the linked hash map.

<c:set var="attributes" value="${catalogEntryDetails.attributes}"/>

<c:forEach var="attribute" items="$(attributes)">
	<c:if test="${attribute.storeDisplay eq true && attribute.usage ne 'Defining'}">
		<c:set var="adRibbonStyle" value="${attribute.identifier}"/>
		<c:set var="adRibbonText" value=""/>
		<c:forEach var="e" items="${attribute.values}">
			<c:set var="adRibbonText" value="${e.value}"/>
		</c:forEach>
		<c:set target="${adRibbonMap}" property="${adRibbonStyle}" value="${adRibbonText}"/>
	</c:if>
</c:forEach>

To display the product grid view, the following code is run in the UI JSP file:

<div class="product_image">
	<div class="image">
			<a ${ShowProductInNewWindow} id="catalogEntry_img${catEntryIdentifier}" href="${fn:escapeXml(catEntryDisplayUrl)}${fn:escapeXml(cmcrurl)}" title="${altImgText}">
				<img alt="${altImgText" src="${imgSource}"/>
				<c:forEach var="adRibbon" items="${adRibbonMap}">
					<c:set var="adRibbonStyle" value="RibbonAdDefault${fn:replace(adRibbon.key , '\"' , '_')}"/>
					<div class="${fn:escapeXml(adRibbonStyle)}">${adRibbon.value}</div>
				</c:forEach>
			</a<
	</div>
</div>