Mise en page catégorie produits

[DPOD]

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.

[DPOD]

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.

[DPOD]

une journée de plus, la dessus et je suis persuadé que c'est un truc à la con, sur ce site il ont aussi cette presentation http://www.obaz.fr/21-millet

[Médéric]

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+

[DPOD]

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 !

[Médéric]

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+

[DPOD]

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.

[Médéric]

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

[DPOD]

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 ?

[Empreinte]

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

[Médéric]

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+

[Empreinte]

ok merci, je vais tester ça !

à +

[Empreinte]

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>

 

[Médéric]

Désolé, je n'avais pas vu ton message.

 

Alors est-ce que tu as pu résoudre le problème ?

Normalement il n'y a pas de raison que cela ne fonctionne pas avec la center_column.

[DPOD]

En fait j'ai changé d'idée pour ma présentation, par contre a présent je galère sur une présentation du module navigation a facette en horizontal...