[RESOLU] image produit dans la description de catégorie ?

[communica]

Bonjour,

 

Je souhaiterais mettre des images dans la description des catégories, ces images pointerais vers des produits.

 

donc je vois 2 possibilité,

 

l'une qui semble possible, mais malgré les différents post sur le sujet cela ne me semble pas très clair.

( mettre du html dans la description des catégories)

 

et l'autre qui risque d'avoir un impact sur le reste du site

(modifier le bloc produit qui est présent sur la page de catégorie)

mais il est surement lié à d'autres affichages du bloc produit sur d'autres pages.

 

donc ma questions est

 

Comment mettre des images dans la page de description de catégories ?

[communica]

Bonjour,

 

J'ai trouvé une solution, un peu destructive mais cela semble fonctionner, et ne semble pas avoir modifier l'affichage du reste des blocs du site.

 

J'ai supprimé dans le fichier Product-list.tpl

 

ligne 34 et 35

 

<h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</a></p>

 

ligne 42 à 45

 

<div>
 {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
 {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
</div>

 

 

et ligne 49 à 56

 

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
 {else}
   <span class="exclusive">{l s='Add to cart'}</span>
 {/if}
{/if}
<a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
{if isset($comparator_max_item) && $comparator_max_item}
 <p class="compare"><input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked{/if}/> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>

 

Il me reste à régler quelques détails dans le css cette fois je pense, comme mettre la liste des produits en ligne plutôt qu'en colonne (que les images des produits de cette liste soit cote à cote 4 par ligne)

 

Une autre chose j'aimerais garder le cadre qui est autour des image de la liste, voir encore mieux que toutes les images des produits de la liste soit dans le cadre foncé et toutes rangé 4 par ligne.

 

Si quelqu'un de calé pouvais me donner quelques infos ça serais sympa.

 

Est ce que les suppressions que j'ai fait sur le fichier product-list ont des conséquences sur le reste de l'affichage, je veux dire par là est ce que le fichier product-list est utilisé ailleurs que sur les pages de catégories ou ces produits apparaissent ?

 

Merci d'avance pour vos infos.

[communica]

heuu comment fait on pour mettre du code dans le post sans qu'il aille de l'autre coté du bureau ;o))

[Guest Kaylabs]

pour le code dans les messages, il faut attendre que l'equipe finisse le css du forum (hint: .prettyprint { overflow: scroll } )

 

sinon des images qui pointe vers des produits, ne serait ce pas tout simplement les "scenes" qu'il faut utiliser ? (BO / catalogue / scene )

[communica]

je ne sais pas si les scènes suffiront à la mise en page que je souhaite.

 

j'aimerais mettre 4 images par ligne en dessous de la description de la catégorie à la place de la liste de produit.

 

j'ai réussi en supprimant une partie du product-list.tpl la liste n'affiche plus que l'image dans un fond gris, mais je n'ai pas trouvé comment les mettre 4 par ligne, la fonction demande une liste avec 1 produit par ligne et je ne sais pas comment les mettre par 4 ^^

 

comme je disais plus haut, l'ideal serais que je puisse faire apparaitre tous les produits dans le meme bloc au lieu d'une liste

 

Pour le moment la liste affiche ceci :

 

 

 

et je souhaiterais l'afficher ainsi :

 

 

je peux pas mieux expliquer ce que je cherche a faire ^^

[communica]

au pire un cadre par image ça serais déjà bien mais toutes dans le même ce serait parfait ^^

[communica]

merci kaylabs mais je viens de regarder du coté des scène

 

le problème est que je veux que les images affiché soit celle des produits présent dans la catégorie ou le visiteur se trouve ^^ c'est pour cela que je voulais conserver le système de liste de produit dans la catégorie mais affiché que leurs image en ligne de 4 comme sur la simulation que j'ai faite sur illustrator plus haut.

 

mais c'etait une bonne idée.

[communica]

personne ne sais ou se trouve le code qui défini l'affichage d'un seul produit par ligne dans la liste des produit disponible dans la categorie ?

 

j'aimerais regrouper les deux partie du code (celui du premier produit et celui qui défini les suivant) cela devrais résoudre mon problème en partie, du moins pour la première ligne après je sais pas lol

 

j'ai beau bidouiller dans tous les sens rien n'y fait !

[Guest Kaylabs]

ok, pour ce que tu veux il s'agit simplement d'une modification de css (product-list.css) et notamment la taille de la balise <li> de chaque produit

par contre pour t'en dire plus, ca va etre tres difficile sans voir la boutique

[communica]

je t'ai MP le liens pour ne pas polluer ici ^^

[Guest Kaylabs]

tu peux quand meme mettre le lien ici, ca peut aider d'autres qui lisent a comprendre la manip

 

donc:

* product-list.tpl tu peux enlever aussi <div class="right_block"></div> et/ou supprimer la rule css correspondante ul#product_list li div.right_block (inutile de le laisser puisqu'il est vide)

* product-list.tpl , il faut supprimer la class clearfix de la balise <li>

* product-list.css supprimer la rule css ul#product_list li div.center_block

* product-list.css dans la rule css ul#product_list a.product_img_link enlever margin-right

* product-list.css dans la rule css ul#product_list li, il faut enlever clear: both, mettre float: left, et modifier le padding a 3px

 

cela devrait faire l'affaire "en gros", pour le reste je te laisse peaufiner (notamment rajouter class="clear" dans la balise <form> du bouton comparer pour le ramener a la ligne

 

ces modifications touchant product-list.tpl et product-list.css, elles vont donc s'appliquer a TOUTES les categories (ainsi qu'aux pages promotions, nouveaux et meilleures ventes)

 

PS: a noter quand meme que cette modification va etre nuisible au referencement de tes categories puisqu'elles ne contiendront que des images, plus aucun texte, ni description de tes produits.

[communica]

ok merci pour toutes ces info je me met au travail pour faire les modif, je mettrais le lien aussi si ca peux aider a voir le resultats de la manip

 

pour ce qui est du referencement je ne pense pas que cela change beaucoup pour cette partie vue que les descrip sur chaque produit a deja les balises necessaire au referencement. certes ca va enlever du contenu mais bon sinon je ne peux pas mettre en place comme je veux les produits via le systeme de grp d'attribut.

 

cela semble donc une bonne option pour mon cas.

 

je teste tout ca et je posterais le resultat et mettrais (j'espere) le post en RESOLU ^^

[communica]

c'est parfait, merci a toi c'est exactement ce qu'il fallait faire.

 

reste le bouton que je voudrais supprimer il est déjà présent en haut de page. mais je ne le trouve que dans global.css et je ne veux pas le modifier partout.

 

mais je ne trouve pas sa regle ?

[Guest Kaylabs]

le bouton comparer c'est {include file="$tpl_dir./product-compare.tpl"} dans category.tpl

 

si tu enleves le bouton, n'oublie pas d'editer pagination.tpl pour rajouter la class="clear" sinon la pagination sera a droite de la derniere image et pas en dessous: <div id="pagination" class="pagination"> a modifier en <div id="pagination" class="pagination clear">

[communica]

d'accord je cherchais pas dans le bon fichier

 

La c'est parfait, un grand merci à toi pour ton aide car il m'aurait fallu un moment avant de trouver !

 

Je met le lien vers la page ou se trouve la modif pour ceux qui voudraient voir le résultat.

 

http://www.communicaprint.fr/fr/6-creation