Jump to content

Mise en page catégorie produits


Recommended Posts

Bonjour à tous,

Bon il est 6h40 du matin, j'y ai passé la nuit et je ne trouve pas la solution, alors peut être pourrez vous m'aider..

 

Je cherche à modifier la présentation de la page catégorie.

 

Je souhaiterais que le titre de la catégorie et l'image occupe la totalité du conteneur, puis que seulement après il y ai le menu de gauche et et les produits à coté.

 

Ce que j'ai essayé :

J'ai ajouté des div dans le header.tpl avec des if page.

Ok j'arrive à avoir mes blocs, mais comment je fais pour "appeler" l'image de la catégorie ou le titre depuis header.tpl

 

En fait je ne sais pas si je suis clair.

Ce que je voudrais c'est un résultat un peu comme ce site pour les catégories :

http://www.instantluxe.com/accessoires

 

Si quelqu'un me trouve une soluce, je luis serait redevable parce que la clairement cela depasse mes compétences.

  • Like 1

Share this post


Link to post
Share on other sites

Personne n'a d'idée sur le fait de mettre le titre et l'image de la categorie en plein largeur puis le deroulement classique, je m'arrache les cheveux la dessus (enfin ce qu'il me reste).

Je suis un tetu je vais trouver, mais c'est une belle galère.

Share this post


Link to post
Share on other sites

Salut,

 

c'est ça que tu as déplacé (ou une partie) dans une div au dessus du hook left ?

 

<h1>
  {strip}
{$category->name|escape:'htmlall':'UTF-8'}
{if isset($categoryNameComplement)}
 {$categoryNameComplement|escape:'htmlall':'UTF-8'}
{/if}
<span class="category-product-count">
 {include file="$tpl_dir./category-count.tpl"}
</span>
  {/strip}
 </h1>
 {if $scenes}
  <!-- Scenes -->
  {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
 {else}
  <!-- Category image -->
  {if $category->id_image}
  <div class="align_center">
<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
  </div>
  {/if}
 {/if}
 {if $category->description}
  <div class="cat_desc">{$category->description}</div>
 {/if}

 

 

Quelle version de Presta ?

 

Sinon tu peux faire ça en CSS

 

A+

Share this post


Link to post
Share on other sites

Salut, merci de prendre du temps,

 

Dernière version de prestashop 1.4.8.2

en fait j'ai d' abord essayé d'ajouter dans le header.tpl des nouvelles div avec un ifpage ==category.

Cela fonctionnait mais pas moyen de mettre quoi que ce soit dedans.

 

Donc la j'ai tranché dans le vif, j'ai enlever HOOK LEFT du header.tpl et je l'appelle dans le category.tpl.

et la pas de souci, je peut ajouter des div et faire ce que je veut en css (enfin surtout ce que je peux lol)

 

Par contre je ne voudrais pas afficher mes nouvelles div sur les pages de "sous categories", une idée ?

 

 

Comment j'aurais pu traiter cela en css ? Je suis en pleine phase d'apprentissage donc ca m'interesse grandement !

Share this post


Link to post
Share on other sites

Salut,

 

En css tu aurais pu mettre +/- :

 

#columns {position:relative}

 

#NEW_DIV {position:absolute;top:0;}

 

#left_column {margin-top: TA HAUTEUR NEW_DIV}

 

Et pour ne pas voir ta new_div dans l'exploration d'une sous-categorie tu peux utiliser ça :

 

{if $category->level_depth == 1} new_div {/if}

 

A+

Share this post


Link to post
Share on other sites

Ok, mais pour ma problématique première cette nouvelle div, je la met ou ? dans le header.tpl?

Parce qu'ensuite dans cette div, j'ai pas mal de div à mettre pour présenter tout comme je le souhaite.

Ce n'est pas un peu lourd de mettre ca dans le header ? et je risque de galérer à appeler les fonctions php.

Share this post


Link to post
Share on other sites

j'ai essayé de poster le fichier mais j'ai pas réussi.

 

seulement en modifiant category.tpl

 

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}
{if isset($category)}
{if $category->id AND $category->active}
{if $category->level_depth == 1}

<div id="new_div"></div>

{else}
 <h1>
  {strip}
{$category->name|escape:'htmlall':'UTF-8'}
{if isset($categoryNameComplement)}
 {$categoryNameComplement|escape:'htmlall':'UTF-8'}
{/if}
<span class="category-product-count">
 {include file="$tpl_dir./category-count.tpl"}
</span>
  {/strip}
 </h1>
 {if $scenes}
  <!-- Scenes -->
  {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
 {else}
  <!-- Category image -->
  {if $category->id_image}
  <div class="align_center">
<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
  </div>
  {/if}
 {/if}
 {if $category->description}
  <div class="cat_desc">{$category->description}</div>
 {/if}
 {if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
  <h3>{l s='Subcategories'}</h3>
  <ul class="inline_list">
  {foreach from=$subcategories item=subcategory}
<li>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {else}
   <img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {/if}
 </a><br />
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
</li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>
 {/if}
{/if}
 {if $products}
{include file="$tpl_dir./product-compare.tpl"}
{include file="$tpl_dir./product-sort.tpl"}
{include file="$tpl_dir./product-list.tpl" products=$products}
{include file="$tpl_dir./product-compare.tpl"}
{include file="$tpl_dir./pagination.tpl"}
  {elseif !isset($subcategories)}
<p class="warning">{l s='There are no products in this category.'}</p>
  {/if}
{elseif $category->id}
 <p class="warning">{l s='This category is currently unavailable.'}</p>
{/if}
{/if}

 

si category de premier niveau -> la nouvelle div s'affiche

si category à partir du deuxième niveau -> affichage normal

 

Puis du CSS et cela doit-être bon :)

Share this post


Link to post
Share on other sites

Franchement merci beaucoup !

Il n'existe pas une espèce de Memento Prestashop, parce que pour savoir que pour q'une partie ne s'affiche pas il faut taper ca...

 

Ou alors si je connaissais le php cela serait logique ?

  • Like 1

Share this post


Link to post
Share on other sites

Salut,

juste une question Médéric, en comparant ton code à celui de categoty.tpl, en fait il n'y a que ces 3 lignes à rajouter ?

 

"{if $category->level_depth == 1}

 

<div id="new_div"></div>

 

{else}"

 

est-il possible dans le même esprit d'afficher ou pas la right_column en fonction de la catégorie active ?

merci pour tes réponses

Share this post


Link to post
Share on other sites

Salut,

 

Il y a ces 3 lignes + la fermeture du if (sinon page blanche) avant les include :

 

...
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
</li>
{/foreach}
</ul>
<br class="clear"/>
</div>

{/if} // ICI ligne 80 d'origine

{/if}
{if $products}

{include file="$tpl_dir./product-compare.tpl"}
{include file="$tpl_dir./product-sort.tpl"}
...

 

Pour la colonne de droite en fonction de l' ID de la catégorie active, par exemple :

 

<div id="right_column" class="column" {if $category->id == 3}style="display:none"{/if}>
{$HOOK_RIGHT_COLUMN}
</div>

 

A+

Share this post


Link to post
Share on other sites

Salut Médéric,

tout fonctionne très bien avec ton code, merci

j'ai voulu faire la même chose avec la div "center_column" mais elle ne semble pas prendre en compte la condition " {if $category->id == 3}" alors que ça fonctionne avec "{if $page_name == index}" par exemple,

aurais-tu une idée ?

merci

 

mon code :

<div id="center_column" {if ($category->id == 6)||($category->id == 8)||($category->id == 9)||($category->id == 10)||($category->id == 11)||($category->id == 12)}style="width:100%"{/if}>

 

sur "footer.tpl"

 

<div id="right_column" class="column"{if ($category->id == 6)||($category->id == 8)||($category->id == 9)||($category->id == 10)||($category->id == 11)||($category->id == 12)}style="display:none"{/if}>

{$HOOK_RIGHT_COLUMN}</div>

 

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More