Homepage 1 colonne et le reste du site en 3 colonnes

Tchupa · December 5, 2011

Bonsoir ,

mon tunnel de commande sur toute la largeur du site sauf quand on choisi le paiement par chèque vu que c'est un module je n'arrive pas a mettre cette partie sur toute la largeur du site.

Voici ce que j'ai mis dans mon header.tpl enfin la condition:

<div id="columns">

   {if $page_name != 'order' && $page_name !='authentication' && $page_name !='payment'}
   <!-- Left -->
   <div id="left_column" class="column">
 {$HOOK_LEFT_COLUMN}
   </div>
   {/if}

Auriez vous une idée svp?

merci.

Tchupa · December 7, 2011

Personne ne peut me venir en aide?

Tchupa · January 4, 2012

Bonjour,

je nn'ai toujours pas résolu ce problème et les e-mails des clients affluent tout les jours pour me dire que la page est toute déformé

j'ai même essayé ceci:

{if $page_name != './modules/cheque/payment'}

Mais ça ne fonctionne pas, c'est un problème de chemin? ou totalement autre chose?

Merci de me venir en aide , depuis le temps que sa traine

storeofshop · February 24, 2012

Bonjour,

je suis nouveau sur presta depuis hier

Perso j'ai fait le partis pris de dégager la gestion des colonne des fichiers Header.tpl et footer.tpl pour les gérer directement dans les fichiers qui m'interresse.

Voici un exemple pour une page d'accueil avec colonne uniquement a gauche (ps je bosse sur la 1.5.05 qui gère les tailles de colonne direct avec un framewoks css ):

header.tpl

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
 <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
</head>

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}
 <div id="page" class="container_9 clearfix">
  <!-- Header -->
  <div id="header" class="grid_9 alpha omega">
   <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
   </a>
   <div id="header_right" class="grid_6 omega">
 {$HOOK_TOP}
   </div>
  </div>
{/if}

footer.tpl

{if !$content_only}
<!-- Footer -->
<div id="footer" class="grid_9 alpha omega clearfix">{$HOOK_FOOTER}</div>
</div>
{/if}
</body>
</html>

index.tpl

{if !$content_only}
<div id="columns" class="grid_9 alpha omega clearfix">
 <!-- Left -->
 <div id="left_column" class="column grid_2 alpha">
  {$HOOK_LEFT_COLUMN}
 </div>
 <!-- Center -->
 <div id="center_column" class=" grid_7 omega">
  {$HOOK_HOME}
 </div>
</div>
{/if}

Je trouve cela plus simple de gérer ça comme ça car ça évite de s'embêter avec des exceptions.

Du coup je profite aussi de cette tribune pour faire un appel à la team prestashop:

N'y a til pas une solution a envisager pour simplifier cette démarche de gestion des colonnes. Cette fonctionnalité est très importante au niveau de l'ergonomie d'un site e-commerce. L'espace de la fiche produit n'a pas le même objectif que la page catégorie.

On petit coup d'oeil vers magento qui gère très bien cette notion avec 4 templates (empty, 1colum, 2colum-left, 2colum-right et 3colum) que l'on applique à n'importe quelle page

Vinc3nzo · August 13, 2012

J'ai trouvé, j'ai changé la condition:

		{if $page_name != 'index' && $page_name != 'order-opc'}
<!-- Right -->
		<div id="right_column" class="column">
			{$HOOK_RIGHT_COLUMN}
		</div>
	{/if}

Par contre niveau css ça passe pas snif

body #order-opc #center_column {with:100%;}

Fonctionne parfaitement sous Prestashop RC2 1.5.0.15!! Merci beaucoup!!

Pour "index", "catégory" et "product" (la colonne droite sera suprimé uniquement les page_name choisi:

	   [color=#ff0000] {if $page_name != 'index' && $page_name != 'category' && $page_name != 'product'}[/color]
<!-- Right -->
		<div id="right_column" class="column">
			{$HOOK_RIGHT_COLUMN}
		</div>
	{/if}

Pour "index", "catégory" et "product" #center_column (global.css) ajouter:

#index #center_column {width:100%}
#category #center_column {width:100%}
#product #center_column {width:100%}

Edited August 13, 2012 by Vinc3nzo (see edit history)

Fred D. · September 10, 2012

Salut Vienc3nzo,

J'ai essayé ton code pour supprimer la colonne de droite et ça marche très bien, merci à toi.

En revanche le redimensionnement de la colonne centrale avec :

#product #center_column {width:100%}

dans le fichier global.css fait apparaître la colonne centrale sous la colonne de gauche.

Comment faire pour utiliser la place libérée par la colonne de droite sans toucher au reste?

Merci par avance pour ta réponse.

Cordialement,

Fred.

Edited September 10, 2012 by Fred D. (see edit history)

aerosolair · September 26, 2012

Salut easybuisness,

Pour répondre à ton MP, je donne la réponse ici pour en faire profiter les petits copains...

La solution n'est pas forcément THE solution mais elle fonctionne parfaitement.

1°/ Editer le fichier Header.tpl du theme et ajouté cela juste avant l'appel de la colonne de gauche :
{if $page_name != 'index'}
blabla
{/if}
ça donne cela :
{if $page_name != 'index'}


{$HOOK_LEFT_COLUMN}

{/if}
Ensuite pendant que l'on est encore sur la page header modifions la class de la colonne centrale pour s'adapter à la largeur de la boutique en fonction des colonnes :

Avant :
Après

Avant d'oublier allons modifier le css pour ajouter les nouvelles class :

D'abord supprimons la largeur width: 556px; de la colonne centrale dans l'id center_column et ajoutons en dessous les nouvelles class avec les bonnes largeurs:
#center_column {
margin: 0 0 30px 0;
overflow: hidden;
}
.classiccolumn{width: 556px;}
.totalcolumn{width: 100%;}
Maintenant supprimons la colonne de droite qui se trouve dans le footer.tpl
{if $page_name != 'index'}



{$HOOK_RIGHT_COLUMN}
{/if}
Et vloia votre site à une page d'accueil qui fait 100% de la largeur de la boutique et 3 colonnes ensuite...

Attention pour la page d'accueil il faudra retoucher le css du module produits phares par exemple pour modifier la largeur etc....

V++

Atch


<!-- Left -->
   {if $page_name != 'index'}
<div id="left_column" class="column grid_2 alpha"></div>
<!-- Center -->
<div id="center_column" class=" grid_5">
			{else}
			<div id="center_column" class=" grid_7">
			{/if}

Edited September 26, 2012 by aerosolair (see edit history)

nico476 · January 16, 2013

slt à tous désolé mais cette fonction marche sur 1.5.3 car quand j'ouvre le header tpl je n'est pas du tous le même fichier il me semble

Sign In

Homepage 1 colonne et le reste du site en 3 colonnes

Recommended Posts

Tchupa

Link to comment

Share on other sites

Tchupa

Link to comment

Share on other sites

Tchupa

Link to comment

Share on other sites

storeofshop

Link to comment

Share on other sites

Vinc3nzo

Link to comment

Share on other sites

Fred D.

Link to comment

Share on other sites

aerosolair

Link to comment

Share on other sites

nico476

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com