MAJ - Ajout sur la page d'accueil des sélections : soldes, promotions et nouveautés

Information :

Quels logiciels utiliser ?

Cette mise à jour vous permet d'ajouter sur la page d'accueil des sélections soldes, promotions et nouveautés.

Pour afficher les sélections rendez-vous dans votre administration : Administration > Apparence & Personnalisation > Page d'accueil > Sélection de produits

Préparatif

Important :

Vous allez dans un premier temps faire une sauvegarde du fichier index.html qui se trouve dans le dossier html sur votre ordinateur.

Les fichiers sont encodés en UTF-8, n'oubliez pas de configurer votre éditeur de texte.

Information :

Tous les templates sont différents, les exemples ci-dessous ne respectent pas forcément la structure de votre template, il faut donc les adapter.

Mise à jour

index.html

3 nouvelles boucles font leurs apparitions dans la boucle SELEC. La boucle PROMO pour les promotions la boucle SOLDE pour les soldes et la boucle NOUVEAUTE pour les nouveautés.

L'intégration est assez simple il suffit de copier la boucle ACCUEIL déjà présente et de la modifier pour chaque boucle dans la boucle SELEC. Il suffit donc de renommer les variables et de modifier le titre de chaque sélection.

Ex : la variable ACCUEIL.URL devient pour la boucle PROMO : PROMO.URL

Voici le code pour les 3 boucles

La boucle PROMO :
<!-- DEBUT PROMO -->
<!-- SI PROMO.PREM_LIGNE -->
<div class="ListProd">
	<h2>{L_NOS_PROMOTIONS}</h2>
<!-- FINSI -->
	<!-- SI PROMO.PREM_LIGNE ou PROMO.NUM_LIGNE est divisible par 4 -->
	<div class="BlockProd">
	<!-- FINSI -->
		<div<!-- SI (PROMO.NUM_LIGNE + 1) est divisible par 4 --> class="end"<!-- FINSI -->>
			<p class="imgProd">
				<a href="{PROMO.URL}"><img src="{PROMO.IMG_100}" alt="{PROMO.NOM}" />
					<!-- SI PROMO.PROMO_PRIX et PROMO.SOLDE egal 1 -->
					<span class="etatPrix">{L_SOLDE} <strong>-{PROMO.PROMO_POUR_ROUND}%</strong></span>
					<!-- SINONSI PROMO.PROMO_PRIX et PROMO.SOLDE egal 0 -->
					<span class="etatPrix">{L_PROMOTION}</span>
					<!-- SINONSI PROMO.NOUVEAUTE -->
					<span class="etatPrix">{L_NOUVEAU}</span>
					<!-- FINSI -->
				</a>
			</p>
			<h3><a href="{PROMO.URL}">{PROMO.NOM}</a></h3>
			<p class="Prix">
				<!-- SI PROMO.VARIATION et PROMO.VARIATION_PRIX -->
				<span>{L_A_PARTIR_DE}</span>
					<!-- SI PROMO.PROMO_PRIX -->
					<br />
					<!-- FINSI -->
				<!-- FINSI -->
				<!-- SI PROMO.PROMO_PRIX -->
				<strong>{DEVISE_PRE}{PROMO.PROMO_PRIX}{DEVISE_POST}</strong>
				<del>{DEVISE_PRE}{PROMO.PRIX}{DEVISE_POST}</del>
				<!-- SINON -->
				<strong>{DEVISE_PRE}{PROMO.PRIX}{DEVISE_POST}</strong>
				<!-- FINSI -->
			</p>
		</div>
	<!-- SI (PROMO.NUM_LIGNE + 1) est divisible par 4 ou PROMO.DERN_LIGNE -->
	</div>
	<!-- FINSI -->
<!-- SI PROMO.DERN_LIGNE -->
</div>
<!-- FINSI -->
<!-- FIN PROMO -->
La boucle SOLDE :
<!-- DEBUT SOLDE -->
<!-- SI SOLDE.PREM_LIGNE -->
<div class="ListProd">
	<h2>{L_SOLDES}</h2>
<!-- FINSI -->
	<!-- SI SOLDE.PREM_LIGNE ou SOLDE.NUM_LIGNE est divisible par 4 -->
	<div class="BlockProd">
	<!-- FINSI -->
		<div<!-- SI (SOLDE.NUM_LIGNE + 1) est divisible par 4 --> class="end"<!-- FINSI -->>
			<p class="imgProd">
				<a href="{SOLDE.URL}"><img src="{SOLDE.IMG_100}" alt="{SOLDE.NOM}" />
					<!-- SI SOLDE.PROMO_PRIX et SOLDE.SOLDE egal 1 -->
					<span class="etatPrix">{L_SOLDE} <strong>-{SOLDE.PROMO_POUR_ROUND}%</strong></span>
					<!-- SINONSI SOLDE.PROMO_PRIX et SOLDE.SOLDE egal 0 -->
					<span class="etatPrix">{L_PROMOTION}</span>
					<!-- SINONSI SOLDE.NOUVEAUTE -->
					<span class="etatPrix">{L_NOUVEAU}</span>
					<!-- FINSI -->
				</a>
			</p>
			<h3><a href="{SOLDE.URL}">{SOLDE.NOM}</a></h3>
			<p class="Prix">
				<!-- SI SOLDE.VARIATION et SOLDE.VARIATION_PRIX -->
				<span>{L_A_PARTIR_DE}</span>
					<!-- SI SOLDE.PROMO_PRIX -->
					<br />
					<!-- FINSI -->
				<!-- FINSI -->
				<!-- SI SOLDE.PROMO_PRIX -->
				<strong>{DEVISE_PRE}{SOLDE.PROMO_PRIX}{DEVISE_POST}</strong>
				<del>{DEVISE_PRE}{SOLDE.PRIX}{DEVISE_POST}</del>
				<!-- SINON -->
				<strong>{DEVISE_PRE}{SOLDE.PRIX}{DEVISE_POST}</strong>
				<!-- FINSI -->
			</p>
		</div>
	<!-- SI (SOLDE.NUM_LIGNE + 1) est divisible par 4 ou SOLDE.DERN_LIGNE -->
	</div>
	<!-- FINSI -->
<!-- SI SOLDE.DERN_LIGNE -->
</div>
<!-- FINSI -->
<!-- FIN SOLDE -->
La boucle NOUVEAUTE :
<!-- DEBUT NOUVEAUTE -->
<!-- SI NOUVEAUTE.PREM_LIGNE -->
<div class="ListProd">
	<h2>{L_NOUVEAUTES}</h2>
<!-- FINSI -->
	<!-- SI NOUVEAUTE.PREM_LIGNE ou NOUVEAUTE.NUM_LIGNE est divisible par 4 -->
	<div class="BlockProd">
	<!-- FINSI -->
		<div<!-- SI (NOUVEAUTE.NUM_LIGNE + 1) est divisible par 4 --> class="end"<!-- FINSI -->>
			<p class="imgProd">
				<a href="{NOUVEAUTE.URL}"><img src="{NOUVEAUTE.IMG_100}" alt="{NOUVEAUTE.NOM}" />
					<!-- SI NOUVEAUTE.PROMO_PRIX et NOUVEAUTE.SOLDE egal 1 -->
					<span class="etatPrix">{L_SOLDE} <strong>-{NOUVEAUTE.PROMO_POUR_ROUND}%</strong></span>
					<!-- SINONSI NOUVEAUTE.PROMO_PRIX et NOUVEAUTE.SOLDE egal 0 -->
					<span class="etatPrix">{L_PROMOTION}</span>
					<!-- SINONSI NOUVEAUTE.NOUVEAUTE -->
					<span class="etatPrix">{L_NOUVEAU}</span>
					<!-- FINSI -->
				</a>
			</p>
			<h3><a href="{NOUVEAUTE.URL}">{NOUVEAUTE.NOM}</a></h3>
			<p class="Prix">
				<!-- SI NOUVEAUTE.VARIATION et NOUVEAUTE.VARIATION_PRIX -->
				<span>{L_A_PARTIR_DE}</span>
					<!-- SI NOUVEAUTE.PROMO_PRIX -->
					<br />
					<!-- FINSI -->
				<!-- FINSI -->
				<!-- SI NOUVEAUTE.PROMO_PRIX -->
				<strong>{DEVISE_PRE}{NOUVEAUTE.PROMO_PRIX}{DEVISE_POST}</strong>
				<del>{DEVISE_PRE}{NOUVEAUTE.PRIX}{DEVISE_POST}</del>
				<!-- SINON -->
				<strong>{DEVISE_PRE}{NOUVEAUTE.PRIX}{DEVISE_POST}</strong>
				<!-- FINSI -->
			</p>
		</div>
	<!-- SI (NOUVEAUTE.NUM_LIGNE + 1) est divisible par 4 ou NOUVEAUTE.DERN_LIGNE -->
	</div>
	<!-- FINSI -->
<!-- SI NOUVEAUTE.DERN_LIGNE -->
</div>
<!-- FINSI -->
<!-- FIN NOUVEAUTE -->

La mise en forme des promotions est décrite dans l'article : MAJ - Ajout des soldes

« MAJ - Ajout des soldesMAJ - Ajouter Cards Off v2 »