Bienvenue sur le forum de THELIA.
Vous n'êtes pas identifié.
Pages: 1 2
Bonjour,
comment afficher plusieurs produits sur la page d'accueil ?
Merci.
Hors ligne
Bonjour Flayd,
En mettant une boucle produit et en utilisant 'num' pour indiquer le nombre de produits que tu veux afficher.
du style:
<THELIA_PROD type="PRODUIT" ref="#PRODUIT_REF" num="8" classement="date">
cela te renverra les 8 derniers produits modifier ou rentres dans ta BO
Reg
Hors ligne
Bonjour,
J'ai du mal a comprendre, j'utilise le template par defaut que j'ai un modifié, pour afficher 6 produits, 4 Nouveautés et 2 Promo. J'ai dupliquer les 3 boucles, mais par moments je me trouves avec les même produits, comment faire ?
Merci
Voici mon code:
<div class="blocNouveaute"><!-- .blocNouveaute -->
<THELIA_NOUVEAUTE type="PRODUIT" aleatoire="1" nouveaute="1" num="1">
<h3><a href="rubrique.php?nouveaute=1">Nouveautés</a></h3>
<div class="contenu"><!-- .blocNouveaute .contenu -->
<a href="#URL" onmouseover="return escape('<h5>#TITRE</h5>#PRIX €')" >
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
</THELIA_IMAGE>
</a>
<div class="description"> <!-- .blocNouveaute .contenu .description ligne 790 805 816 826 -->
<h4><a href="#URL">#TITRE</a></h4>
<span class="chapo">#CHAPO</span>
<span class="prixProduit">#PROMO[#PRIX2 €<br/><span class="chapo">au lieu de #PRIX €</span>][#PRIX €]</span>
<p><a class="acheter" href="#PANIER"><span><span>Ajouter au panier</span></span></a></p>
<p><a class="acheter" href="#URL"><span><span>En savoir +</span></span></a></p>
</div><!-- FIN DE DIV ****** .blocNouveaute .contenu .description -->
</div> <!-- FIN **** .blocNouveaute .contenu -->
<a href="rubrique.php?nouveaute=1" class="toutesLesNouveautes">Voir toutes les nouveautés</a></THELIA_NOUVEAUTE>
</div> <!-- FIN ** .blocNouveaute 1 -->
<!-- *************** FIN DE BLOC ***blocNouveaute 1********************* -->
<!-- ************************************ -->
<!-- *************** DEBUT DE BLOC 2 de premiere ligne *** Bloc Promo 1********************* -->
<div class="blocPromo"><!-- #BlocPromo 1 -->
<THELIA_PROMO type="PRODUIT" aleatoire="1" promo="1" num="1">
<h3><a href="rubrique.php?promo">Promotions</a></h3>
<div class="contenu">
<a href="#URL" onmouseover="return escape('<h5>#TITRE</h5>#PRIX €')" >
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
</THELIA_IMAGE>
</a>
<div class="description">
<h4><a href="#URL">#TITRE</a></h4>
<span class="chapo">#CHAPO</span>
<span class="prixProduit">#PROMO[#PRIX2 €<br/><span class="chapo">au lieu de #PRIX €</span>][#PRIX €]</span>
<p><a class="acheter" href="#PANIER"><span><span>Ajouter au panier</span></span></a></p>
<p><a class="acheter" href="#URL"><span><span>En savoir +</span></span></a></p>
</div>
</div>
<a href="rubrique.php?promo=1" class="toutesLesPromos">Voir toutes les promotions</a>
</THELIA_PROMO>
</div>
<!-- *************** FIN DE BlocPromo 1********************* -->
<!-- ************************************ -->
<!-- *************** DEBUT DE blocNouveaute 2 ********************* -->
<div class="blocNouveaute"><!-- blocNouveaute 2-->
<THELIA_NOUVEAUTE type="PRODUIT" aleatoire="1" nouveaute="1" num="1">
<h3><a href="rubrique.php?nouveaute=1">Nouveautés</a></h3>
<div class="contenu">
<a href="#URL" onmouseover="return escape('<h5>#TITRE</h5>#PRIX €')" >
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
</THELIA_IMAGE>
</a>
<div class="description">
<h4><a href="#URL">#TITRE</a></h4>
<span class="chapo">#CHAPO</span>
<span class="prixProduit">#PROMO[#PRIX2 €<br/><span class="chapo">au lieu de #PRIX €</span>][#PRIX €]</span>
<p><a class="acheter" href="#PANIER"><span><span>Ajouter au panier</span></span></a></p>
<p><a class="acheter" href="#URL"><span><span>En savoir +</span></span></a></p>
</div>
<!-- IMAGE Nouveaute <img src="imag/nouveaute.png" style="float:right;vertical-align:top;margin:-182px 0 0 0;/margin:-76px 0 0 0;" />-->
</div>
<a href="rubrique.php?nouveaute=1" class="toutesLesNouveautes">Voir toutes les nouveautés</a>
</THELIA_NOUVEAUTE>
</div><!-- FIN blocNouveaute 2-->
</div>Hors ligne
J'ai du mal m'expliquer, je voudrais juste s'avoir:
comment afficher de façon aléatoire en page d'accueil 4 nouveautés et 2 promotions.
merci.
Hors ligne
Salut,
c'est le paramètre num="x" qui détermine le nombre de produits affichés dans la boucle. Pour 4 nouveautés, num="4", pour 2 promos, num="2"
Ne donne pas dans la même page, le même nom à des boucles différentes.
<THELIA_NOUVEAUTE1 ...
<THELIA_NOUVEAUTE2 ...
Pour éviter des problèmes avec le parseur.
Hors ligne
Bonjour,
j'affiche mes 4 blocs promo sans probleme mais je n'arrive pas à les afficher horizontalement, problème de css.
Impossble de trouver la solutions.
Merci à tous pour votre aide.
Hors ligne
je l'ai fais, j'utilise le template par defaut. Voici un extrait de mon code:
Désolé, c'est long !
Merci.
<div id="contenu"><!-- #CONTENU -->
<div class="blocNouveaute"><!-- .blocNouveaute -->
<h3><a href="produit.php?nouveaute=1">Nouveautés</a></h3>
<THELIA_NOUVEAUTE_PREM type="PRODUIT" aleatoire="1" nouveaute="1" num="2">
<div class="contenu"><!-- .blocNouveaute .contenu -->
<a href="#URL" onmouseover="return escape('<h5>#TITRE</h5>#PRIX €')" >
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
</THELIA_IMAGE>
</a>
<div class="description"> <!-- .blocNouveaute .contenu .description -->
<h4><a href="#URL">#TITRE</a></h4>
<span class="chapo">#CHAPO</span>
<span class="prixProduit">#PROMO[#PRIX2 €<br/><span class="chapo">au lieu de #PRIX €</span>][#PRIX €]</span>
<p><a class="acheter" href="#PANIER"><span><span>Ajouter au panier</span></span></a></p>
<p><a class="acheter" href="#URL"><span><span>En savoir +</span></span></a></p>
</div><!-- FIN DE DIV ****** .blocNouveaute .contenu .description -->
</div> <!-- FIN **** .blocNouveaute .contenu -->
<a href="rubrique.php?nouveaute=1" class="toutesLesNouveautes">Voir toutes les nouveautés</a></THELIA_NOUVEAUTE_PREM>
</div> <!-- FIN ** .blocNouveaute -->
--------------------------
------------------------------------------
CSS:
#contenu {
float: right;
width:710px;
padding: 0 20px;
margin: 25px 20px;
}
.blocNouveaute {
float: left;
margin: 0 20px 20px 0;
width:220px;
text-align: center;
}
.blocPromo {
float: right;
margin: 0 0 20px 0;
width:220px;
text-align: center;
}
.blocNouveaute h3, .blocPromo h3{
margin:0;
}
/* 805 bloc Nouveaute Titre
-------------------------------------------------------*/
.blocNouveaute h3 a, .blocNouveaute h3 a:visited, .blocPromo h3 a, .blocPromo h3 a:visited {
color:#ffffff;
display:block;
padding: 3px 0 3px 0px;
margin:0;
height: 20px;
background-color: #ff8000;
}
.blocNouveaute h3 a:hover, .blocPromo h3 a:hover {
color:#000040;
text-decoration:none;
background-color: #ff8000;
}
.blocNouveaute h4 a, .blocNouveaute h4 a:visited,.blocPromo h4 a, .blocPromo h4 a:visited {
color:#000040; /*Titre du produit presenter*/
}
.blocNouveaute h4 a:hover, .blocPromo h4 a:hover {
text-decoration: underline;
}
.blocNouveaute .contenu {
float:right;
width: 214px;
margin:0;
padding: 2px;
background-color: #fff;
border:solid 1px #c0c0c0;
}
.blocPromo .contenu {
float:left;
width: 214px;
_float:none;
margin:0 ;
padding: 2px;
background-color: #fff;
border:solid 1px #c0c0c0;
}
/*rajout hover sur contenu
---------------------------------------------------*/
.blocNouveaute .contenu:hover, .blocPromo .contenu:hover {
/*width: 212px;*/
background-color: #e0e1e2;
border:solid 1px #c0c0c0;
}
.blocNouveaute .contenu a.image, .blocNouveaute .contenu a.image:visited, .blocPromo .contenu a.image, .blocPromo .contenu a.image:visited {
border: 0px solid #bbbdbf;
margin: 0;
padding:1px;
height: 130px;
width:130px;
float:left;
text-align:center;
display:block;
background-color:#fff;
overflow: hidden;
}
.blocNouveaute .contenu a.image:hover, .blocPromo .contenu a.image:hover {
border: 0px solid #88888b; /*bloc interne de l'image*/
background-color: transparent !important;
padding:0;
}
.blocNouveaute .contenu .description { /*blocNouveaute*/
/*float:right;*/
font-size: 12px;
text-align: center;
padding: 0;
width: 173px;
_width: 158px;
}
.blocPromo .contenu .description { /*blocPromo*/
font-size: 12px;
padding: 0;
width: 173px;
_width: 158px;
text-align: center;
}
/*-------------Texte: au lieu de ....
---------------------------------------*/
.blocNouveaute .contenu .description .chapo, .blocPromo .contenu .description .chapo {
color:red; /*Texte: au lieu de ....*/
font-weight:normal;
text-align: center;
font-size: 12px;
font-style: italic;
text-decoration: line-through; /*Barré: line-through*/
padding: 0;
}
/*--------------Prix
---------------------------------------*/
.blocNouveaute .contenu .description .prixProduit, .blocPromo .contenu .description .prixProduit{
color:red; /*Prix*/
font-weight:bold;
text-align: center;
font-size: 18px;
margin:2px 0 0 0;
padding: 0;
display:block;
}
.blocNouveaute .contenu .description p, .blocPromo .contenu .description p {
margin:0;
padding: 0;
}Hors ligne
Hello,
Ceci n'a rien à voir avec le shmilblick ![]()
Il te faut paramétrer le fichier style.css : dans ton fichier html, repère le nom du div qui contient les données à mettre horizontalement et modifie les css correspondant à ce div. en jouant sur le width et le float.
Hors ligne
Comment affiche dans le bloc "blocMozaique" la description comme le bloc nouveauté.
Prix, ajouter au panier, etc...
Merci.
Dernière modification par flayd (13-02-2010 22:56:57)
Hors ligne
Tu mets le contenu de cette boucle (c'est-à-dire chaque produit rendu par cette boucle) dans un div que tu nommes et dont tu contrôles le comportement via css.
Hors ligne
Merci,
Personne n'aurait déjà créer la même chose, sa me donnerai un sacré coup de pouce, voir plus, lol. (et je pense que sa pourrait etre utile a d'autre personne aussi.)
Je suis un peux perdu dans le css. Je ne suis pas encore un as du css mais j'y bosse dur.
Merci encore.
Dernière modification par flayd (12-02-2010 06:17:35)
Hors ligne
Comment affiche dans le bloc "blocMozaique" la description comme le bloc nouveauté.
Prix, ajouter au panier, etc...
Hors ligne
Bonjour,
j'aimerais loesque je clic sur une rubrique ou sous rubrique ... que seulement 6 produits apparaissent sur ma page. J'ai bien compris la théorie mais pour la pratique c'est autre chose.
Dans mon <div class="blocProduit"> j'ai rajouté le num et le classement, mais cela ne fait aucun effet.
<THELIA_PROD type="PRODUIT" ref="#PRODUIT_REF" num="6" classement="manuel">
Si quelqu'un peut me dire où est mon erreur.
Merci
Hors ligne
Bonjour,
L'erreur vient de ref="#PRODUIT_REF" qui n'est pas alimenté sur une page rubrique.
Il faut mettre rubrique="#RUBRIQUE_ID"
Alfouine,
Hors ligne
Bonjour,
j'ai essayé comme tu me l'a dit de modifier ref="#PRODUIT-REF" par rubrique="#RUBRIQUE_ID", mais cela ne change rien. Peut-être ai-je mis ma boucle au mauvais endroit? Elle se situe dans "produit.html" dans <div class="blocProduit">.
Cette div class correspond bien à l'affichage des produits lorsque que l'on se trouve dans une rubrique ou sous rubrique????
Hors ligne
Bonjour,
Voici ma réalisation de 2 fois 4 blocs (avec la effet over au passage de la souris) en page d'accueil si sa peux aider quelqu'un:
<!-- *************** DEBUT DE BLOC blocMozaique_1 NOUVEAUTES ********************* -->
<div class="blocMozaique_1">
<div class="contenu_1">
<ul class="image">
<THELIA_DECOUVREZ_A type="PRODUIT" aleatoire="1" nouveaute="1" num="4">
<li>
<!--Liens vers NOUVEAUTES-->
<div class="bloc1"><h3><a href="produit.php?nouveaute=1">Les Nouveautés</a></h3>
<a href="#URL" onmouseover="return escape('<h5>#TITRE</h5>#PRIX €')">
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
</THELIA_IMAGE>
</a>
<div class="description"> <!-- .blocNouveaute .contenu .description -->
<h4><a href="#URL">#TITRE</a></h4>
<span class="chapo">#CHAPO</span>
<span class="prixProduit">#PRIX €</span>
<p><a class="acheter" href="#PANIER"><span><span>Ajouter au panier</span></span></a></p>
<p><a class="savoir" href="#URL"><span><span>En savoir +</span></span></a></p>
</div></div>
</li></THELIA_DECOUVREZ_A>
</ul></div >
<!--toutes les nouveautes-->
<div><a href="rubrique.php?nouveaute=1" class="toutesLesNouveautes">Voir toutes les nouveautés</a>
</div>
</div >
<!-- *************** FIN DE BLOC blocMozaique_1 NOUVEAUTES ********************* -->
<!-- *************** DEBUT DE BLOC blocMozaique_1 PROMO ********************* -->
<div class="blocMozaique_1">
<div class="contenu_1">
<ul class="image">
<THELIA_DECOUVREZ_B type="PRODUIT" aleatoire="1" promo="1" num="4">
<li>
<!--Liens vers PROMO-->
<div class="bloc1"><h3><a href="rubrique.php?promo">Promotions</a></h3>
<a href="#URL" onmouseover="return escape('<h5>#TITRE</h5>#PRIX €')">
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
</THELIA_IMAGE>
</a>
<div class="description"> <!-- .blocNouveaute .contenu .description -->
<h4><a href="#URL">#TITRE</a></h4>
<span class="chapo">#CHAPO<br/></span>
<span class="prixProduit">#PROMO[#PRIX2 €<br/><span class="chapo">au lieu de #PRIX €</span>][#PRIX €]</span>
<p><a class="acheter" href="#PANIER"><span><span>Ajouter au panier</span></span></a></p>
<p><a class="savoir" href="#URL"><span><span>En savoir +</span></span></a></p>
</div></div>
</li></THELIA_DECOUVREZ_B>
</ul></div>
<div><a href="rubrique.php?promo=1" class="toutesLesNouveautes">Voir toutes les promotions</a>
</div></div>
<!-- *************** FIN DE BLOC blocMozaique_1 PROMO ********************* -->Le Css:
.blocMozaique_1 {
float: left;
margin: 10px 0 0 0; /*Marge ext*/
padding:0;
text-align: center;
}
.blocMozaique_1 h4 a, .blocMozaique_1 h4 a:visited { /*----------- A VERIFIER --------*/
color:#000040; /*Titre du produit presenter*/
}
.blocMozaique_1 h4 a:hover {
text-decoration: underline; /*underline*/
}
/*--------------CONTENU ------ Gros bloc*/
.blocMozaique_1 .contenu_1 {
float:left;
width:740px; /*largueur du bloc pour les bordures*/
margin:0 auto 0 auto; /*Marge ext*/
padding: 0px; /*Marge int gros bloc ---------------*/
background-color: #fff;
border:none; /*border:solid 1px #ff0000; */ /*Contour gros bloc*/
}
/*-----------------Emsemble du BLOC image--------------- */
.blocMozaique_1 .contenu_1 ul.image {
margin: 0 auto 0 auto; /*Marge ext*/
padding:0 ;/*Marge int*/
list-style:none;
border:none;/*border:solid 1px #008000;*/
width: 740px;
/* float:left; */
}
.blocMozaique_1 .contenu_1 ul.image li { /* APPARENCE des pt bloc image-- ---------------------------------------------------------*/
width:160px; /* défini la taille des bloc */
margin: 0 16px 0 0; /*Marge ext*/
padding:0 0 5px 0;/*Marge int*/
float:left;
background-color:#fff; /*rouge*/
text-align:center;
overflow: hidden;
border-top:none;
border-right:solid 1px #c0c0c0;
border-bottom:solid 1px #c0c0c0;
border-left:solid 1px #c0c0c0;
}
.blocMozaique_1 .contenu_1 ul.image li:hover { /* APPARENCE DE TOUTES LA CLASS DESCRIPTION -- ---------------------------------------------------------*/
background-color: #e0e1e2; /* #e0e1e2 gris tres claire*/
}
.blocMozaique_1 .contenu_1 ul .image li a,
.blocMozaique_1 .contenu_1 ul.image li a:visited {
border: 0px solid #88888b;
margin:0px; /*Marge ext*/
_margin:1px;
_padding:1px;
padding:1px;
/* height: 130px; */
width:130px;
float:left;
display:block;
background-color:#fff;
overflow: hidden;
zoom:0;/* */
text-align:center;
}
.blocMozaique_1 .contenu_1 ul.image li a:hover {
border: 0px solid #88888b; /*bloc interne de l'image*/
background-color: transparent !important;
padding:0;
}
/* Titre
-------------------------------------------------------*/
.bloc1 {
/*float: left;*/
margin: 0; /*Marge ext*/
padding:0;/*Marge int*/
text-align: center;
}
.bloc1 h3 {
/*float: left;*/
width: 160px;
font-size:16px;
font-weight: bold;
margin:0;
padding: 5px 0 7px 0px;
height: 20px;
color: #ffffff;
background-color: #ff8000;
border-bottom: solid 1px #c0c0c0;
}
.bloc1 h3 a, .bloc1 h3 a:visited {
color:#ffffff;
/* display:inline; */
/*background: url(images_menu/nouveaute_h3.jpg) no-repeat;*/
/*-height:1%; ------ Solution miracle pour afficher les images sous ie*/
background-color: transparent !important;
}
.bloc1 h3 a:hover {
color:#fff; /*txt hover*/
text-decoration:none;
}
.blocMozaique_1 .contenu_1 ul .description ul {
/*float:right;*/
font-size: 12px;
text-align: center;
padding: 0;
width: 173px;
_width: 158px;
}
/* SUPRIME L'ESPACE ENTRE LES LIGNE TEXTE*/
.blocMozaique_1 .contenu_1 ul .description p {
margin:0; /*Marge ext*/
padding: 0;
}
/*-------------Texte: TITRE PRODUITS h4
---------------------------------------*/
.blocMozaique_1 .contenu_1 ul.image li .description h4 a {
color:#000040; /*Prix*/
font-weight:bold;
font-size: 14px;
text-decoration:none;
}
.blocMozaique_1 .contenu_1 ul.image li .description h4 a:hover {
text-decoration:none;
}
/*-------------Texte: CHAPO
---------------------------------------*/
.blocMozaique_1 .contenu_1 ul.image li .description .chapo {
color:#000040; /*Prix*/
font-weight:normal;
font-size: 12px;
}
/*-------------Texte: PRIX du PRODUITS
---------------------------------------*/
.blocMozaique_1 .contenu_1 ul.image li .description .prixProduit {
color:red; /*Prix*/
font-weight:normal;
font-size: 14px;
}
/*-------------Texte: au lieu de ....
---------------------------------------*/
.blocMozaique_1 .contenu_1 ul.image li .description .prixProduit .chapo{
color:red; /*Texte: au lieu de ....*/
font-weight:normal;
font-size: 12px;
font-style: italic;
text-decoration: line-through; /*Barré: line-through*/
padding: 0;
}
/*-----------------------Ajouter au panier*/
.blocMozaique_1 .contenu_1 ul.image li .description a.acheter,
.blocMozaique_1 button.acheter {
color:#ff8000; /*Texte:*/
font-weight:bold;
font-size: 12px;
font-style: normal;
text-decoration: none; /*Barré: line-through*/
padding: 0;
margin:5px 0 0 0;
}
/*----------------------- HOVER */
.blocMozaique_1 .contenu_1 ul.image li .description a.acheter:hover,
.blocMozaique_1 button.acheter:hover {
color:#4169e1;
font-weight:bold;
font-size: 12px;
font-style: normal;
text-decoration: none; /*Barré: line-through*/
padding: 0;
margin:5px 0 0 0;
}
/*----------------------- En savoir +*/
.blocMozaique_1 .contenu_1 ul.image li .description a.savoir,
.blocMozaique_1 button.savoir {
color:#ff8000; /*Texte:*/
font-weight:bold;
font-size: 12px;
font-style: normal;
text-decoration: none; /*Barré: line-through*/
padding: 0;
margin:5px 0 0 0;
background-color:#ffffff;
border:none;
}
/*------------Petit bloc bas Nouveaute*/
.blocMozaique_1 a.toutesLesNouveautes, .blocNouveaute a.toutesLesNouveautes:visited {
display:block;
/* float:left; */
width:218px;
margin: 0 auto 0 auto; /*Marge ext*/
padding: 0; /*Marge int*/
color:#515053;
font-weight:bold;
text-indent:10px;
background-color:#ffffff;
border: none;/* border: 1px dashed #ff8000;*/
}
/*------------Petit bloc bas Nouveaute*/
.blocMozaique_1 a.toutesLesNouveautes:hover {
color:#ffffff;
text-decoration:none;
background-color:#ff8000;
}Merci à tous pour votre aide !
Hors ligne
Bonjour,
Alfouine j'ai essayé comme tu me l'a dit de modifier ref="#PRODUIT-REF" par rubrique="#RUBRIQUE_ID", mais cela ne change rien. Peut-être ai-je mis ma boucle au mauvais endroit? Elle se situe dans "produit.html" dans <div class="blocProduit">.
Cette div class correspond bien à l'affichage des produits lorsque que l'on se trouve dans une rubrique ou sous rubrique????
Hors ligne
C'est quoi l'url de ta page ?
Alfouine,
Hors ligne
C:\xampp\htdocs\thelia_1.4.2.1\thelia_1.4.2.1\produit.html
Hors ligne
C'est pas possible, normalement c'est produit.php avec des paramètres ou rubrique.php
Alfouine,
Hors ligne
Dis moi l'url de quelle page précisément, que tu veux!! Parce que là je ne vois pas.
Hors ligne
Pour vérifier si la boucle fonctionne, tu affiches le résultat dans le navigateur.
Ce que je veux c'est l'url du navigateur.
Alfouine,
Hors ligne
Est-ce que quelqu'un aurait une solution à mon problème?
Hors ligne
Pages: 1 2