Instructions de personnalisation de styles CSS de ruban publicitaire

Vous pouvez définir des styles CSS pour mettre en forme des rubans publicitaires de la boutique en ligne. Lorsque les professionnels créent des attributs de ruban publicitaire dans le Centre de gestion et les affectent à des entrées de catalogue, les rubans publicitaires utilisent les styles CSS définis.

Structure HTML par défaut de rubans publicitaires

Voici un exemple de code HTML pour des rubans publicitaires de magasins types :

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

Les rubans publicitaires sont fournis avec un style par défaut. Pour ajouter un ruban publicitaire et l'attribuer à un produit, créez un nouvel attribut. La valeur Code est ajoutée comme classe à la balise <div> avec la classe RibbonAdDefault. Voici un exemple de structure HTML montrant un attribut associé à la valeur de code "ExclusivePromo" et à la valeur d'attribut "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>

Modification de styles CSS pour remplacer des styles de ruban publicitaire par défaut

Pour remplacer le style de ruban publicitaire par défaut, modifiez l'élément approprié dans le fichier styles.css. Par exemple, pour modifier le style de ruban publicitaire du produit affecté à la valeur de code d'attribut "ExclusivePromo", utilisez le code CSS suivant :

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

Personnalisation de fichiers JSP existants pour prendre en charge des styles de ruban publicitaire personnalisés

Dans la vue de grille, pour chaque entrée de catalogue (CatalogEntry), le widget commun d'entrée de catalogue est utilisé pour le rendu de l'affichage d'une entrée de catalogue unique. Les fragments de code suivants montrent comment les rubans publicitaires sont codés dans le magasin Aurora.

Pour stocker tous les rubans publicitaires, une mappe de hachage liée, adRibbonMap, est créée dans le fichier de widget principal.

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

Dans un fichier JSP de données, le code suivant est exécuté pour parcourir en boucle tous les attributs d'un produit. Lorsque l'indicateur storeDisplay a pour valeur TRUE, cela signifie que l'attribut est marqué comme ruban publicitaire. Ces attributs sont collectés et stockés dans la mappe de hachage liée.

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

Pour afficher la vue de grille produit, le code suivant est exécuté dans le fichier JSP d'interface utilisateur :

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