Jump to content

Modification liste des produits

emanu30
 Share

Recommended Posts

emanu30 Newbie

emanu30

Posted
Posted

bonjour,

Je voudrais modifier la page de présentation des produits pour qu'lle s'affiche en colonne de 3 et sans les bouton ajouter au panier ni voir, ni même de description
En clair je veux juste la photo, le titre et le prix.
un peu comme çà: http://www.tartine-et-chocolat-boutique.com/7-vetements-naissance/tous-les-modeles
J'ai cherché comment faire, mais n’étant pas un pro je sèche un peu.
J'ai modifier le css product-list, j'y suis partiellement arrivé, par contre pour enlever les descriptions et boutons, je dois modifier la page tpl non ? laquelle ?

merci de votre aide.

Link to comment
Share on other sites
Edern Newbie

Edern

Posted
Posted

Bonjour,

Je debute aussi dans PrestaShop et j'essaye de faire la meme chose que vous.
Pour enlever la description et les bouton, il faut supprimer les lignes correspondantes dans product-list.tpl
Pour ma part j'ai reussi a changer la taille des 'cases' de chaque produit, mais je n'arrive pas a les mettre sur la meme ligne, il y a toujours un seul produit par ligne.
Comment avec-vous modifie le css?

Merci d'avance pour votre retour !

Link to comment
Share on other sites
Broceliande Newbie

Broceliande

Posted
Posted

pour emanu30 , il faut en effet supprimer les lignes adéquates dans product-list.tpl.
Pour edern , peut être pour vous deux je sais pas ...

Pour avoir 2 , 3 colonnes peut importe , tout se fait en css :

Un 'bloc produit' au complet est un , sa classe est ajax_block_product.
Le conteneur est un , il a l'id "product_list"


On un donc besoin d'un css sous cette forme (j'essaye de détailler les valeurs essentielles)

ul#product_list{
width: xxxpx; /* largeur totale dispo en pixels , à ajuster ... */
}

li.ajax_block_product{
display:block; /* le li se comporte désormais comme un bloc */
width: yyypx[; /* largeur d'un seul bloc produit */
height: hhhpx; /* hyper important d'avoir une hauteur fixe pour que la ligne qui suit permette un alignement régulier */
float:left; /* chaque bloc viendra se loger à la gauche du précédent : si il y a la place, sinon à gauche sur la ligne suivante */
}



Ce qu'il faut savoir :

la largeur d' (un seul bloc + les marges) * 3 doit être inférieure à xxx/3

Si ça ne marche pas , c'est que UL , le bloc parent , a un padding > 0 , dans ce cas , il faut augmenter xxx (mais normalement on peut pas car vous avez bien mis la taille maxi , hein ?), ou alors simplement réduire le padding left et right dans ul#product_list{}
Padding est la marge interne d'un bloc html : les éléments à l'intérieur ne seront pas systématiquement collés au bord si le padding est >0
Si ça ne marche toujours pas , c'est que vous avez oublié de compter une marge dans vos calculs, celle du bloc ul , ou celle du bloc li.

Link to comment
Share on other sites
Edern Newbie

Edern

Posted
Posted

Merci a nouveau Broceliande !
Malheureusement je n'arrive toujours pas a avoir les produits sur la meme ligne :/
Comme j'avais deja teste pas mal de trucs je suis reparti des product-list.tpl et product-list.css d'origine, mais ca ne suffit pas apparemment..
je ne pense pas avoir de probleme avec les marges (je n'ai qu'une colonne de 980px et j'ai mis 150px de large pour les produits)
..des idees ?

Link to comment
Share on other sites
Broceliande Newbie

Broceliande

Posted
Posted
Merci a nouveau Broceliande !
Malheureusement je n'arrive toujours pas a avoir les produits sur la meme ligne :/
Comme j'avais deja teste pas mal de trucs je suis reparti des product-list.tpl et product-list.css d'origine, mais ca ne suffit pas apparemment..
je ne pense pas avoir de probleme avec les marges (je n'ai qu'une colonne de 980px et j'ai mis 150px de large pour les produits)
..des idees ?


hmmm .... Un lien ? :)
Link to comment
Share on other sites
Broceliande Newbie

Broceliande

Posted
Posted
oui : http://www.smalldevil.net/prestashop2/fr/5-events
desole pour la reponse tardive


Pas de pb, c'est pour toi... ;-)

Dans product-list.css, ligne 19, c'est le clear qui t'embête , passe le à none :

ul#product_list li {
background: #D0D3D8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #D0D3D8;
padding: 6px;
min-height: 280px;
height: auto;
clear: none;
margin-bottom: 0.3em;
}



Dans la foulée , autant regrouper les propriété , tu peux supprimer ligne 8 

li.ajax_block_product {
display: block;
width: 150px;
height: 280px;
float: left;
}



puis pourquoi pas ajouter un margin-right pour espace tes blocs (tu peux ajuster après)
et donc tout regrouper, au final on a :


ul#product_list li {
background: #D0D3D8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #D0D3D8;
padding: 6px;
min-height: 280px;
height: auto;
clear: none;
margin-bottom: 0.3em;
margin-right: 5px; 
display: block;
width: 150px;
height: 280px;
float: left;
}

Link to comment
Share on other sites
  • 2 weeks later...
  • 4 weeks later...
Broceliande Newbie

Broceliande

Posted
Posted
bonjour,
je souhaite aussi retirer prix et boutons qd on voit les listes de produits, j'ai modifié le tpl... rien de changé :(
je rame, pourriez vous s il vous plait m'aider ?


Salut,
En générale "j'ai modifié le tpl et rien n'a changé" = j'ai oublié de vider le cache smarty ;)
faut vider tous les fichiers (sauf index.php) présents dans /tools/smarty/compile. ..
Link to comment
Share on other sites
JudithL Newbie

JudithL

Posted
Posted

Bonjour,
J'ai réussi à mettre mes produits sur deux colonnes (grâce à Brocéliande, merci !) mais je voudrais en fait faire une colonne avec trois produits et l'autre colonne avec un seul produit. Actuellement, j'en ai deux de chaque côté... Je sais que je suis difficile mais le problème c'est que je dois suivre une maquette...
Merci
Judith

Link to comment
Share on other sites
anaislys Newbie

anaislys

Posted
Posted

Bonjour patax,

je me permets de revenir vers vous car il ne reste rien d'autre que l'index.php comme dit et rien ne change
voici mon product_list.tpl original, que dois je changer pour que, quand les produits sont tous affichés par liste, il n'y aient ni le prixs, ni les boutons acheter et détails ? merci d'avance et bon we à vous :)

>{if isset($products)}
   <!-- Products list -->
</pre>
<ul>
   {foreach from=$products item=product name=products}


getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />
{if $product.new == 1}{l s='new'}{/if}{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

           <!-- bloc pour promo, prix, disponibilité -->
           <!-- 
               {if $product.on_sale}
{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $product.reduction_from))}
{l s='Price lowered!'}
               {/if}

{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}

{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}

               {if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}

               {else}
{l s='Add to cart'}
               {/if}
{l s='View'}
 -->
           <!-- fin de bloc pour promo, prix, disponibilité -->

   {/foreach}
</ul>
<br>   <!-- /Products list --><br

Link to comment
Share on other sites
anaislys Newbie

anaislys

Posted
Posted

Bonjour,

Merci à tous pour vos messages
Je me rends compte désormais que mon problème vient de smarty, comme ce qui est expliqué sur ce thread
Même avec le force_compile = true les modifications des fichiers .tpl ne sont pas pris en compte et en vidant le cache de tools/smarty/compile ca ne fonctionne pas !
C'est curieux car je n'ai je crois rien changé qui aurait pu générer ce problème

Est ce que ça vient d' OVH ? je ne sais pas...
Étrange, j’espère trouver une solution à ce problème qui affecte beaucoup de changements que je souhaiterai faire sur mon site.

Link to comment
Share on other sites
  • 3 months later...
anaislys Newbie

anaislys

Posted
Posted

Je me permets de revenir vers vous pour une question à mes yeux insoluble

qd on arrive sur mon site, on voit les produits phares en colonne principale, et la colonne de droite...a droite! mais des que l'on clique sur une catégorie de produits, on voit les produits plus espacés, et la colonne de droite....passée sous les produits!! j'ai trifouillé le product list du css mais ne sait pas où resserrer les images afin qu'elles prennent moins de place et donc ne "virent" pas la colonne de droite.

D'ailleurs, comment se fait il que la colonne centrale n'ait pas une largueur fixe (elle s'adapte à son contenu selon les rubriques et la colonne de droite se rapproche conséquemment... )

 

 

merci d'avance

 

Anaïs

Link to comment
Share on other sites
  • 4 months later...
yauby Newbie

yauby

Posted
Posted

Bonjour,

 

J'ai installé la version 1.4.4.1 est je deviens un peu fou car je ne trouve pas la class "ajax_block_product" dans aucun css.

J'ai bien trouvé :

ul#product_list li Dans "Product_list.css" mais c'est tout

:mellow:

Quelqu'un pour me guider ? ca serait ... comment dire ... salvateur pour moi.

Link to comment
Share on other sites
yauby Newbie

yauby

Posted
Posted

Oui j'utilise Firebug mais il fait référence aux fichiers global.css et product_list.css, il n'y aucun trace de la class "ajax_block_product" dans aucun de ces deux fichiers, j'ai aussi fait une recherche via mon éditeur dans tous les fichiers du theme et aussi incroyable que ça puisse paraitre je n'ai rein trouvé...

Link to comment
Share on other sites
yauby Newbie

yauby

Posted
Posted

Alleluia !!! j'ai créé la class ajax_block_product dans product_liste.css (j'ai juste fait un copier collé d'un des posts de Broceliande- merci à lui)

 

 

ul#product_list li {
background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #d0d3d8;
padding: 6px;
min-height: 130px;
height: auto;
clear: none;
margin-bottom: 0.3em
}
li.ajax_block_product{
display:block; /* le li se comporte désormais comme un bloc */
width: 150px; /* largeur d'un seul bloc produit */
height: 150px; /* hyper important d'avoir une hauteur fixe pour que la ligne qui suit permette un alignement régulier */
float:left; /* chaque bloc viendra se loger à la gauche du précédent : si il y a la place, sinon à gauche sur la ligne suivante */
}

 

j'ai changer le paramètre clear de ul#product_list li en none et voila !!!

 

Je suis super content ! merci JudithL pour ton aide !

 

je ne m'explique tjs pas pourquoi je n'ai pas trouvé la class ajax_block_product avant d'en créer une moi mm, mais bon ..

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...