Accueil > L'E-commerce selon Isotools > Marketing et promotions > Opérations promotionnelles
 

Opérations promotionnelles

Personnaliser la mise en avant des produits

 Attention ! L'utilisation de cette fonction requiert sa prise en charge par le décor de votre site.

Pour chaque opération promotionnelle, vous pouvez personnaliser la mise en avant des articles qui sont soumis à cette opération, en y ajoutant automatiquement une illustration. Une classe CSS sera à ajouter pour mettre en overlay une image par le biais d'un background d'image.

 

Pour cela, il est nécessaire que le décor contienne cette classe CSS. Elle doit être dans un DIV autour de l'image vignette des produits. On choisira de surcharger le template de rendu correspondant au style de liste d'articles choisi dans la boutique.

L'un des deux templates suivants peut donc être impacté :

  • gshp:product-ProductShowListItem_Detailed.xml

  • gshp:product-ProductShowListItem_Light.xml

Vous pouvez également impacter les styles de listes de produits du décor.

 

Deux informations seront ajoutées au niveau du DIV contenant l'image :

  • la classe CSS pour la mise en avant des produits soumis à opérations promotionnelles

  • le SPAN supportant les modifications graphiques induites par la CSS.

C'est en effet le SPAN qui va permettre de rajouter cette image au dessus du rendu initial de l'image produit.

 

Dans l'exemple ci-dessous, les parties en rouge correspondent à la mise en avant des articles soumis à opération promotionnelle. Le nom de la classe devra évidemment correspondre à celui de la classe créée dans le décor. Ce qu'il est important de retenir dans cet exemple c'est que marketingOperationCss devra être saisi sur l'onglet Mise en avant des opérations promotionnelles.

 

A noter que pour le 3+1, il est également possible de récupérer via une expression ITL les icones pour les Xs et pour les Ys. L'accès se fait par : 

getGshpMarketingOperationManager().getProductIncentiveUsages(checkoutProcessingCache.getPersistentBasket(basket._oid),  product._oid)

 

Cette fonction renvoie la liste des ProductIncentiveUsage utilisables sur cet article en fonction du panier courant. 

Elle porte deux propriétés :

  • mode qui permet de connaitre la relation entre l'article et la promotion avec les valeurs perimeter (appartient au segment action = article remisant), target (appartient au segment cible = article remisé), both (appartient aux deux).
  • operation qui décrit l'opération.

 

Mise en avant d

 

Exemple pour la surcharge de "gshp:product-ProductShowListItem_Light"

Avant surcharge

<div class="productThumbnailDiv">

  <itl:link href="{currentProductLink}">

    <itl:variable name="thumbnailProduct" select="currentProduct"/>

    <itl:variable name="thumbnailWidth" select="thumbnailProductList_light_Width"/>

    <itl:variable name="thumbnailHeight" select="thumbnailProductList_light_Height"/>

    <itl:call-template mode="thumbnail" className="gshp:product"/>

  </itl:link>

</div>

 

Après surcharge

<div class="{'productThumbnailDiv ' + currentProduct.marketingOperationCss}">

  <itl:link href="{currentProductLink}">

    <itl:variable name="thumbnailProduct" select="currentProduct"/>

    <itl:variable name="thumbnailWidth" select="thumbnailProductList_light_Width"/>

    <itl:variable name="thumbnailHeight" select="thumbnailProductList_light_Height"/>

    <itl:call-template mode="thumbnail" className="gshp:product"/>

  </itl:link>

  <span class="productThumbnailDivOverlay"></span>

</div>

 

 

Pour : Isotools Studio X8

Publiée le 06/07/2012 | ID : KB_2012OP_PERSO

>> Evaluez cette documentation

Image Captcha