Jump to content

Modifier un thème 2 colonnes pour en faire un 3 colonnes ?

Apprenti Ecommerçant
 Share

Recommended Posts

Apprenti Ecommerçant Newbie

Apprenti Ecommerçant

Posted
Posted

Hello,

je suis débutant sur Prestashop, et je suis entrain de préparer ma nouvelle boutique.

 

Je cherche désespèrement un thème, mais c'est trés dur de trouver quelque chose correspondant à SON besoin.

Je veux absolument faire du 3 colonnes (choix perso), mais je trouve beaucoup de thème qui ne sont que sur 2 colonnes.

 

Ma question est donc la suivante : si j'achète un thème tout fait sur 2 colonnes, pourrais-je facilement le modifier (ou faire modifier) pour passer sur 3 colonnes ?

 

Merci de vos lumières :)

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

Bonsoir,

 

Attention car ce n'est pas si simple : une fois la troisième colonne ajoutée, il faudra adapter les différentes largeurs des éléments du site et bien vérifier sur toutes les pages que tout est bien adapté.

  • Like 1
Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Bonjour Divine,

 

Je confirme, car moi récemment j'ai fait l'inverse. Ca s'est relativement bien passé dans l'ensemble, j'utilise l'un de vos modules : Nouveaux produits. Et maintenant que j'ai passé ma colonne centrale à 760 px + 191 px pour la colonne de droite. Il faudrait que j'égalise la largeur du bloc qui est par défaut de 536 px. Eventuellement en ajoutant un produit de plus sur la ligne, ce qui ferait 5*2, dix produits d'affichés dans le bloc.

 

Quelles seraient les modifications à faire ?

 

Je suis sous prestashop 1.4.4.0

 

Cordialement

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Rebonjour Divine,

 

Le réagencement de mon site est récent, donc j'ai encore un peu de boulot ;)

 

Le bloc nouveaux produits est sur l'accueil, si je parviens à l'élargir, je pourrais le remonter et le remettre au-dessus du slide, parce que sinon ça ferait déséquilibrer, voilà pourquoi je l'ai descendu.

 

Sinon afficher qu'une ligne de produits : 4 actuellement par défaut, me fait apparaitre un vilain morceau de bloc juste dessous, voilà pourquoi j'en affiche 8. Sinon c'est pas joli. Allez hop, un p'tit tour par là ;) : myshoppinglove.com

 

D'avance merci.

 

Cordialement

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Comment s'appelle la ligne ? Car d'une version de presta à une autre, ça change :(

 

Ensuite est-ce que ça ne va pas modifier la largeur des colonnes à l'intérieur de ce bloc ? Et comment lui dire d'en ajouter une 5ème si cela est faisable.

 

Je suis donc condamnée à vie, à afficher deux lignes de produits, à cause du défaut que je n'ai jamais réussi à comprendre comment l'enlever. :-)

 

Enfin il y a un ou deux navigateurs qui voit encore l'espace descriptif qu'il y avait dans ce bloc, bien que je l'ai supprimé afin de sortir de la présentation de base, de presta :(

 

Merci pour votre aide.

 

Cordialement

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Je crois qu'on ne s'est pas bien comprise toutes les deux. Si j'élargis la largeur total du bloc, sachant qu'il fait 536 px et que les 4 colonnes + marges intérieures ont été calculée sur cette largeur.

 

Ils faut aussi les modifier en conséquence. Et je n'utilise pas les modules d'origines de Prestashop, mais les vôtres, c'est donc aussi sur vos fichiers que je dois faire un changement mais où ?

 

- PRESTACREA - Home New Products v1.2 par PRESTACREA

- PRESTACREA - Home Specials v1.2 par PRESTACREA

 

Cordialement

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

Non les colonnes ne sont pas calculées en fonction de la largeur du bloc.

C'est plutôt la hauteur du bloc qui est calculée par rapport au nombre de produits par ligne et par rapport à la hauteur d'une ligne.

 

Donc pour modifier le nombre de produits par ligne ainsi que la hauteur d'une ligne, c'est dans les fichiers TPL de ces modules.

Ces variables sont renseignées dans les premières lignes des fichiers TPL.

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Merci pour la réponse. Je vais essayer de résumer afin d'être sûre d'avoir tout compris ;)

 

Il faut donc que j'aille dans le fichier global.css changer une ligne, comment s'appelle-t-elle et quelle largeur lui donner ?

 

Sachant que la nouvelle largeur centrale est de 760 px. Est-ce que 600 px serait correct ou il faut moins vu que je veux afficher une colonne de plus ?

 

Pas de marge intérieur à rectifier ? Donc vos modules sont plus simple que ceux d'origine, cf ici : http://www.prestashop.com/forums/topic/108955-resolu-produits-phares-changement-de-largeur-des-colonnes/ ;)

 

Ensuite je vais dans les fichiers tpl des modules concernés et je modifie bien cette variable ? : {assign var='nbItemsPerLine' value=4}

 

Et je n'ai rien d'autre à changer ? Qu'entendez-vous par la hauteur d'une ligne sur votre module ?

 

Cordialement

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

C'est à toi d'adapter tout cela donc tu mets la largeur que tu veux.

 

La ligne en question :

 

#center_column div.block {
   margin: auto;
   width: 536px;
}

 

Mes modules ne sont pas plus simples ou plus compliqués que le module HomeFeatured d'origine de Prestashop, ils sont identiques. Donc si tu modifies la largeur du bloc et le nombre de produits par ligne, tu adaptes également les largeurs et les marges des colonnes en fonction du résultat que tu souhaites obtenir.

 

Les variables en question :

 

{assign var='liHeight' value=292} => hauteur d'une ligne

{assign var='nbItemsPerLine' value=4} => nombre de produits par ligne

 

Le mieux pour vraiment comprendre c'est de procéder à des tests car en visualisant directement le résultat, tu comprendra tout de suite à quoi correspond telle ou telle ligne.

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Mission Réussie ! ;)

 

Mais il fallait enlever le : no ; devant repeat-left pour le background du titre "NOUVEAUX PRODUIT"

 

Ensuite la largeur ancienne étant de 536 px ; il faut diviser cette largeur par le nombre de produits existant : 536/4 = 134 px.

 

Soit la largeur d'une colonne, de la remultiplier par 5 = 670 px.

 

De changer juste : {assign var='nbItemsPerLine' value=4} PAR LA VALEUR : 5 - Dans le fichier tpl du module.

 

De retourner en bo de presta, choisir : Afficher nombre de produit : 10.

 

De recompiler, et le changement est bon.

 

Cordialement.

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Dans ce bout de code, je ne vois pas ce que vous me disiez pour la hauteur des lignes :

 

 

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=0}

{assign var='nbItemsPerLine' value=5}

{assign var='nbLi' value=$products|@count}

{assign var='nbLines' value=$nbLi/$nbItemsPerLine|ceil}

{assign var='ulHeight' value=$nbLines*$liHeight}

 

<ul style="height:{$ulHeight}px;">

{foreach from=$products item=product name=homeNewProducts}

<li class="ajax_block_product {if $smarty.foreach.homeNewProducts.first}first_item{elseif $smarty.foreach.homeNewProducts.last}last_item{else}item{/if}

{if $smarty.foreach.homeNewProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeNewProducts.iteration%$nbItemsPerLine == 1}first_item_of_line{/if} {if $smarty.foreach.homeNewProducts.iteration > ($smarty.foreach.homeNewProducts.total - ($smarty.foreach.homeNewProducts.total % $nbItemsPerLine))}last_line{/if}">

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

La hauteur d'une ligne est définie par cette variable :

 

{assign var='liHeight' value=0}

 

Si tu mets par exemple "100" à la place de 0, cela veut dire qu'une ligne aura une hauteur de 100px.

Si tu a réglé 5 produits par ligne et que tu as en tout 10 produits affichés, tu obtiendra donc 2 lignes et la hauteur totale du bloc sera donc de 200px (le module calcule la hauteur en fonction de la hauteur d'une ligne et du nombre de produits par ligne)

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Je posais cette question, juste en fait parce que le résultat me paraît un serré graphiquement parlant.

 

Et je me demandais s'il était possible d'aérer le contenu des colonnes, quitte à élargir la taille du bloc, et donc la hauteur des colonnes et un peu plus de largeur, mais tout se suit, et c'est pas évident ....

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Bonjour Divine

 

J'ai quand même un souci avec votre module sous les navigateurs, autres que google chrome où là je vous l'accorde l'affichage est parfait. En dehors du redimensionnement, et de passer la valeur à 5 produits par ligne. Je n'ai touché à rien d'autre, j'ai trouvé la ligne qui y correspond dans le global css grâce à firefox, mais du coup ça détraque l'affichage sous google chrome :(

 

Donc si vous pouviez jeter un coup d'oeil. J'apprécierai un peu d'aide de votre part.

 

Cordialement

Link to comment
Share on other sites
BoutikShop69 Newbie

BoutikShop69

Posted
Posted

Problème résolu : il fallait remplacer overflow: hidden par heigth: auto!important; heigth-min ..... heigth-max .......

 

dans le fichier global css ici : la ligne product_desc.

 

Un deuxième petit tour dans les élargissements bloc et colonne, et c'est de nouveau équilibré !

 

Merci internet, et les cours sur le css, sinon j'y serais encore à chercher !

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...