MAJ - Ajout des soldes
Information :
Cette mise à jour vous permet d'ajouter les soldes sur l'ensemble du site.
Pour ajouter un produit en solde rendez vous dans votre administration sur la fiche produit dans les options avancées.
Nous allons modifier le code des listes produits et de la fiche produit de façon à rajouter un bloc qui intégrera aussi bien les soldes que les promotions et les nouveautés.
Préparatif
Important :
Vous allez dans un premier temps faire une sauvegarde des fichiers index.html, liste_cat.html, liste_marq.html, liste_prod.html, panier.html, produit.html et recherche.html qui se trouvent dans le dossier html et de screen.css dans le dossier css 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
Cherchez la boucle de sélection de produit SELECT de la page d'accueil. Dans cette boucle nous allons modifier le bloc produit.
<a href="{ACCUEIL.URL}"><img src="{ACCUEIL.IMG_100}" alt="{ACCUEIL.NOM}" /></a>
<h3><!-- SI ACCUEIL.NOUVEAUTE --><span>{L_NOUVEAU}</span> - <!-- FINSI --><a href="{ACCUEIL.URL}">{ACCUEIL.NOM}</a></h3>
<p class="Prix"><!-- SI ACCUEIL.PROMO_PRIX et ACCUEIL.SOLDE egal 0 --><strong>{ACCUEIL.PROMO_PRIX} {DEVISE}</strong> <del>{ACCUEIL.PRIX} {DEVISE}</del><!-- SINONSI ACCUEIL.PROMO_PRIX et ACCUEIL.SOLDE egal 1 --><strong>{ACCUEIL.PROMO_PRIX} {DEVISE}</strong> <del>{ACCUEIL.PRIX} {DEVISE}</del> <span class="listSolde">-{ACCUEIL.PROMO_POUR_ROUND}%</span><!-- SINON --><strong>{ACCUEIL.PRIX} {DEVISE}</strong> <!-- FINSI --></p>
Modifiez ce bloc par celui-ci :
<p class="imgProd"><a href="{ACCUEIL.URL}"><img src="{ACCUEIL.IMG_100}" alt="{ACCUEIL.NOM}" /></a></p>
<p class="promoProd">
<!-- SI ACCUEIL.PROMO_PRIX et ACCUEIL.SOLDE egal 1 -->
<span class="etatPrix">{L_SOLDE} <strong>-{ACCUEIL.PROMO_POUR_ROUND}%</strong></span>
<!-- SINONSI ACCUEIL.PROMO_PRIX et ACCUEIL.SOLDE egal 0 -->
<span class="etatPrix">{L_PROMOTION}</span>
<!-- SINONSI ACCUEIL.NOUVEAUTE -->
<span class="etatPrix">{L_NOUVEAU}</span>
<!-- FINSI -->
</p>
<h3><a href="{ACCUEIL.URL}">{ACCUEIL.NOM}</a></h3>
<p class="Prix">
<!-- SI ACCUEIL.VARIATION et ACCUEIL.VARIATION_PRIX -->
<span>{L_A_PARTIR_DE}</span>
<!-- SI ACCUEIL.PROMO_PRIX -->
<br />
<!-- FINSI -->
<!-- FINSI -->
<!-- SI ACCUEIL.PROMO_PRIX -->
<strong>{DEVISE_PRE}{ACCUEIL.PROMO_PRIX}{DEVISE_POST}</strong>
<del>{DEVISE_PRE}{ACCUEIL.PRIX}{DEVISE_POST}</del>
<!-- SINON -->
<strong>{DEVISE_PRE}{ACCUEIL.PRIX}{DEVISE_POST}</strong>
<!-- FINSI -->
</p>
liste_cat.html, liste_marq.html, liste_prod.html et recherche.html
Dans toutes ces pages la modification est la même. La structure est identique à la page d'accueil seul la boucle change. Ce n'est plus la boucle SELECT mais la boucle PROD.
Remplacez donc le code ci-dessous
<a href="{PROD.URL}"><img src="{PROD.IMG_100}" alt="{PROD.NOM}" /></a>
<h3><!-- SI PROD.NOUVEAUTE --><span>{L_NOUVEAU}</span> - <!-- FINSI --><a href="{PROD.URL}">{PROD.NOM}</a></h3>
<p class="Prix"><!-- SI PROD.PROMO_PRIX --><strong>{DEVISE_PRE}{PROD.PROMO_PRIX}{DEVISE_POST}</strong> <del>{DEVISE_PRE}{PROD.PRIX}{DEVISE_POST}</del><!-- SINON --><strong>{DEVISE_PRE}{PROD.PRIX}{DEVISE_POST}</strong> <!-- FINSI --></p>
par :
<p class="imgProd"><a href="{PROD.URL}"><img src="{PROD.IMG_100}" alt="{PROD.NOM}" /></a></p>
<p class="promoProd">
<!-- SI PROD.PROMO_PRIX et PROD.SOLDE egal 1 -->
<span class="etatPrix">{L_SOLDE} <strong>-{PROD.PROMO_POUR_ROUND}%</strong></span>
<!-- SINONSI PROD.PROMO_PRIX et PROD.SOLDE egal 0 -->
<span class="etatPrix">{L_PROMOTION}</span>
<!-- SINONSI PROD.NOUVEAUTE -->
<span class="etatPrix">{L_NOUVEAU}</span>
<!-- FINSI -->
</p>
<h3><a href="{PROD.URL}">{PROD.NOM}</a></h3>
<p class="Prix">
<!-- SI PROD.VARIATION et PROD.VARIATION_PRIX -->
<span>{L_A_PARTIR_DE}</span>
<!-- SI PROD.PROMO_PRIX -->
<br />
<!-- FINSI -->
<!-- FINSI -->
<!-- SI PROD.PROMO_PRIX -->
<strong>{DEVISE_PRE}{PROD.PROMO_PRIX}{DEVISE_POST}</strong>
<del>{DEVISE_PRE}{PROD.PRIX}{DEVISE_POST}</del>
<!-- SINON -->
<strong>{DEVISE_PRE}{PROD.PRIX}{DEVISE_POST}</strong>
<!-- FINSI -->
</p>
panier.html et produit.html
De la même façon que précédement, seule la boucle change puisque nous modifions dans ce cas les produits des ventes croisées. Il faut donc remplacer le code ci-dessous :
<a href="{LIST_CROSS.URL}"><img src="{LIST_CROSS.IMG_100}" alt="{LIST_CROSS.IMG_NOM}" /></a>
<h3><!-- SI LIST_CROSS.NOUVEAUTE --><span>{L_NOUVEAU}</span> - <!-- FINSI --><a href="{LIST_CROSS.URL}">{LIST_CROSS.NOM}</a></h3>
<p class="Prix"><!-- SI LIST_CROSS.PROMO_PRIX et LIST_CROSS.SOLDE egal 0 --><strong>{LIST_CROSS.PROMO_PRIX} {DEVISE}</strong> <del>{LIST_CROSS.PRIX} {DEVISE}</del><!-- SINONSI LIST_CROSS.PROMO_PRIX et LIST_CROSS.SOLDE egal 1 --><strong>{LIST_CROSS.PROMO_PRIX} {DEVISE}</strong> <del>{LIST_CROSS.PRIX} {DEVISE}</del> <span class="listSolde">-{LIST_CROSS.PROMO_POUR_ROUND}%</span><!-- SINON --><strong>{LIST_CROSS.PRIX} {DEVISE}</strong> <!-- FINSI --></p>
par :
<p class="imgProd"><a href="{LIST_CROSS.URL}"><img src="{LIST_CROSS.IMG_100}" alt="{LIST_CROSS.NOM}" /></a></p>
<p class="promoProd">
<!-- SI LIST_CROSS.PROMO_PRIX et LIST_CROSS.SOLDE egal 1 -->
<span class="etatPrix">{L_SOLDE} <strong>-{LIST_CROSS.PROMO_POUR_ROUND}%</strong></span>
<!-- SINONSI LIST_CROSS.PROMO_PRIX et LIST_CROSS.SOLDE egal 0 -->
<span class="etatPrix">{L_PROMOTION}</span>
<!-- SINONSI LIST_CROSS.NOUVEAUTE -->
<span class="etatPrix">{L_NOUVEAU}</span>
<!-- FINSI -->
</p>
<h3><a href="{LIST_CROSS.URL}">{LIST_CROSS.NOM}</a></h3>
<p class="Prix">
<!-- SI LIST_CROSS.VARIATION et LIST_CROSS.VARIATION_PRIX -->
<span>{L_A_PARTIR_DE}</span>
<!-- SI LIST_CROSS.PROMO_PRIX -->
<br />
<!-- FINSI -->
<!-- FINSI -->
<!-- SI LIST_CROSS.PROMO_PRIX -->
<strong>{DEVISE_PRE}{LIST_CROSS.PROMO_PRIX}{DEVISE_POST}</strong>
<del>{DEVISE_PRE}{LIST_CROSS.PRIX}{DEVISE_POST}</del>
<!-- SINON -->
<strong>{DEVISE_PRE}{LIST_CROSS.PRIX}{DEVISE_POST}</strong>
<!-- FINSI -->
</p>
produit.html
Dans la fiche produit nous allons ajouter le bloc des soldes, promotions ou nouveautés au dessus du prix.
Cherchez le code ci-dessous :
<p id="PrixFiche"><!-- SI PROD.VARIATION et PROD.VARIATION_PRIX -->A partir de <!-- FINSI --><!-- SI PROD.PROMO_PRIX --><strong>{PROD.PROMO_PRIX} {DEVISE}</strong> <del>{PROD.PRIX} {DEVISE}</del><!-- SINON --><strong>{PROD.PRIX} {DEVISE}</strong> <!-- FINSI --><!-- SI PROD.SOLDE egal 1 --> <span id="prodSolde">-{PROD.PROMO_POUR_ROUND}%</span><!-- FINSI --></p>
Remplacez le par :
<!-- SI PROD.PROMO_PRIX et PROD.SOLDE egal 1 -->
<p class="etatPrixFiche"><span>{L_SOLDE} <strong>-{PROD.PROMO_POUR_ROUND}%</strong></span></p>
<!-- SINONSI PROD.PROMO_PRIX et PROD.SOLDE egal 0 -->
<p class="etatPrixFiche"><span>{L_PROMOTION}</span></p>
<!-- SINONSI PROD.NOUVEAUTE -->
<p class="etatPrixFiche"><span>{L_NOUVEAU}</span></p>
<!-- FINSI -->
<p id="PrixFiche">
<!-- SI PROD.VARIATION et PROD.VARIATION_PRIX -->
A partir de
<!-- FINSI -->
<!-- SI PROD.PROMO_PRIX -->
<strong>{DEVISE_PRE}{PROD.PROMO_PRIX}{DEVISE_POST}</strong>
<del>{DEVISE_PRE}{PROD.PRIX}{DEVISE_POST}</del>
<!-- SINON -->
<strong>{DEVISE_PRE}{PROD.PRIX}{DEVISE_POST}</strong>
<!-- FINSI -->
</p>
screen.css
Ajoutez dans le css au niveau de la mise en forme de la liste des produits (souvent appelée listProd) :
.promoProd span {
background: #B40076;
padding: 0.2em 0.5em;
color: #fff;
}
Pour la fiche produit ajoutez le code ci-dessous :
.etatPrixFiche {
margin-bottom: 1em;
}
.etatPrixFiche span {
background: #B40076;
color: #fff;
padding: 0.2em 0.5em;
}
Nous avons presque fini, pour vous assurer que le navigateur de vos visiteurs voit bien les modifications que nous venons de faire et qu'il mette à jour le cache, ouvrez le fichier header.html et cherchez l'appel au CSS qui se trouve dans le <head>
<link media="screen" type="text/css" href="{W_CSS_PATH}/screen.css?6" rel="stylesheet" />
Pour terminer, modifiez le chiffre qui se trouve après le point d'interrogation en ajoutant 1. dans l'exemple ci-dessus modifiez le 6 en 7.
