Le module de vente flash permet de mettre en avant des produits sur une durée donnée. Sur ces produits vous pourrez appliquer une réduction (en pourcentage ou en numéraire), un nouveau prix, ou aucune de ces promotions.

Pour accéder à l'écran de gestion des ventes flash, vous rendre dans Ma boutique > Booster vos ventes, dans le menu de gauche vous trouverez alors Ventes flash > Gestion des ventes flash.

À l'ajout d'une vente flash un nouvel écran apparait avec les différents éléments à remplir pour la création d'un vente flash.

Les paramètres généraux de la configuration des ventes flash se trouvent dans Ma boutique > Vente flash. Vous pourrez ainsi déterminer le format de la date, l'affichage d'un compte à rebours, les visuels à afficher et les comportements par défaut des ventes flash.

De nouveau comportements ont été ajoutés pour la méthode de publication Publier des produits, vous pouvez donc ajouter un filtre Ventes flash en cours et Ventes flash à venir. Les mêmes filtres ont été mis en place pour le widget Mise en avant de produits.

Par ailleurs un nouveau widget Nombre de ventes flash a été développé, il s'agit d'un éditeur WYSIWYG qui permet d'ajouter des balises 0 et 0 qui permettent d'afficher respectivement le nombre de ventes flash en cours et le nombre de ventes flash à venir. 

De nouvelles balises mx sont disponibles et permettent d'ajouter des éléments concernant les ventes flash. Ces balises peuvent être mises en place dans product.html et short_product.html.

 
    <div class="flashSale">
        <,-- Si fin de vente flash -->
        <mx:bloc id="flash_sale_end_text">
            <div class="flashSaleEndText">
                <mx:text id="end_text" />
            </div>
        </mx:bloc id="flash_sale_end_text">
   
        <,-- Icone de la vente flash définie dans configuration du catalogue -->
        <mx:bloc id="flash_sale_icon">
            <div class="flashSaleIcon">
                <mx:text id="icon" />
            </div>
        </mx:bloc id="flash_sale_icon">
       
        <div class="flashSaleDetails">   
            <,-- Stock restant de la vente flash -->
            <mx:bloc id="flash_sale_stock">
                <div class="flashSaleStock">
                    Plus que <strong><mx:text id="stock" /></strong> en stock ,
                </div>
            </mx:bloc id="flash_sale_stock">
           
            <,-- Texte affiché si une vente flash est terminée -->
            <mx:bloc id="flash_sale_text">
                <div class="flashSaleText">
                    <mx:text id="text" />
                </div>
            </mx:bloc id="flash_sale_text">   
       
            <,-- Pourcentage de la réduction -->
            <mx:bloc id="flash_sale_rate">
                <div class="flashSaleRate">
                    <span mXattribut="class:class"><mx:text id="rate" /></span> de remise ,
                </div>
            </mx:bloc id="flash_sale_rate">
           
            <,-- Prix du produit (avec la réduction %, ou prix remisé) -->
            <mx:bloc id="flash_sale_price">
                <div class="flashSalePrice">
                    Prix spécial vente flash : <mx:text id="price" />
                </div>
            </mx:bloc id="flash_sale_price">
           
            <,-- Date de fin de la vente flash -->
            <mx:bloc id="flash_sale_date">
                <div class="flashSaleFate">
                    Jusqu'au <strong><mx:text id="date" /></strong> ,
                </div>
            </mx:bloc id="flash_sale_date">
        </div>
       
        <script type="text/javascript">
            var specifsOption = {
                labels: ['Années', 'Mois', 'Semaines', 'Jours', 'Heures', 'Minutes', 'Secondes'],
                labels1: ['Année', 'Mois', 'Semaine', 'Jour', 'Heure', 'Minute', 'Seconde']
            };
        </script>
        <,-- Compte à rebours de la vente flash -->
        <mx:bloc id="flash_sale_countdown">
            <,-- affichage du décompte javascript -->
            <div mXattribut="id:divID">
            <,-- div utilisé par le javascript pour afficher le compte à rebours -->
            </div>
            <mx:text id="js" />
        </mx:bloc id="flash_sale_countdown">
 
    </div>

Comme vous le constatez il y a la possibilité de personnaliser les labels du compte à rebours en ajoutant une variable javascript. Ce bout de code doit impérativement être placé avant l'instanciation du compte à rebours pour être prit en compte.

var specifsOption = {
    labels: ['Années', 'Mois', 'Semaines', 'Jours', 'Heures', 'Minutes', 'Secondes'],
    labels1: ['Année', 'Mois', 'Semaine', 'Jour', 'Heure', 'Minute', 'Seconde']
};

labels correspond au libelle si il y a plusieurs éléments, et labels1 s'il ne reste qu'une seule journée (par exemple).

Si vous le souhaitez nous avons aussi mis à disposition des règles CSS pour le compte à rebours.

 
/* ----------
VENTE FLASH
-------------*/
.hasCountdown {
	border: 1px solid #ccc;
	background-color: #eee;
	overflow: hidden;
	padding: 10px 0;
	clear: both;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.countdown_rtl {
	direction: rtl;
}
.countdown_holding span {
	background-color: #ccc;
}
.countdown_row {
	clear: both;
	width: 100%;
	padding: 0px 2px;
	text-align: center;
}
.countdown_show1 .countdown_section {
	width: 98%;
}
.countdown_show2 .countdown_section {
	width: 48%;
}
.countdown_show3 .countdown_section {
	width: 32.5%;
}
.countdown_show4 .countdown_section {
	width: 24.5%;
}
.countdown_show5 .countdown_section {
	width: 19.5%;
}
.countdown_show6 .countdown_section {
	width: 16.25%;
}
.countdown_show7 .countdown_section {
	width: 14%;
}
.countdown_section {
	display: block;
	float: left;
	font-size: 100%;
	text-align: center;
	color: red;
}
.countdown_amount {
	font-size: 200%;
}
.countdown_descr {
	display: block;
	width: 100%;
}	
/* Vente flash dans fiche résumée */
.short_product .flashSaleIcon img{
	max-width: 48px;
}
.short_product .flashSaleIcon{
	position: absolute;
	top:0;
	right: 0;
	z-index: 2;
}
.short_product .hasCountdown {
	padding: 0;
	width:140px;
	font-size: 70%;
	line-height: 10px;
	position: absolute;
	top:5px;
	right: 40px;
	z-index: 1;
	padding-top: 4px;
}