Directrices de personalización para estilos CSS de cinta publicitaria

Puede definir estilos CSS para formatear cintas publicitarias en el escaparate. Cuando los usuarios de empresa crean atributos de cinta publicitaria en el Centro de gestión y asignan los atributos a las entradas de catálogo, los anuncios de la cinta utilizan los estilos CSS que usted defina.

Estructura HTML predeterminada para cintas publicitarias

A continuación, se muestra un ejemplo del código HTML para cintas publicitarias en las tiendas de inicio:

<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>

Las cintas publicitarias vienen con un estilo predeterminado. Para añadir una cinta publicitaria y asignarla a un producto, cree un nuevo atributo. El valor de código se añade como una clase al código <div> con la clase de RibbonAdDefault. A continuación, se muestra un ejemplo de la estructura HTML para un atributo con el valor de código, "ExclusivePromo" y un valor de atributo, "Exclusivo":

<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>

Alteración temporal de estilos de cinta publicitarias modificando estilos CSS

Para alterar temporalmente el estilo de cinta publicitaria predeterminado, modifique el elemento adecuado en el archivo styles.css. Por ejemplo, para modificar el estilo de cinta publicitaria para el producto al que se ha asignado el valor de código de atributo "ExclusivePromo", utilice el siguiente código CSS:

.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;
}

Personalización de los archivos JSP existentes para dar soporte a estilos de cinta publicitaria personalizados

Para cada CatalogEntry de la vista de cuadrícula, se utiliza el widget común de la entrada de catálogo para representar la visualización de una entrada de catálogo individual. Los siguientes fragmentos de código muestran cómo se codifican las cintas publicitarias en la tienda Aurora.

Para almacenar todas las cintas publicitarias, se crea una correlación hash vinculada, adRibbonMap en el archivo de widget principal.
<jsp:useBean id="adRibbonMap" class="java.util.LinkedHashMap" type="java.util.Map" scope="page"/>
En un archivo JSP de datos, el siguiente código se ejecuta en bucle por todos los atributos de un producto. Cuando el distintivo storeDisplay es TRUE, significa que el atributo está marcado como una cinta publicitaria. Estos atributos se recopilan y se almacenan en la correlación hash enlazada.
<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>
Para visualizar la vista de cuadrícula del producto, se ejecuta el código siguiente en el archivo JSP de la interfaz de usuario: 
<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>