Modifier le nombre de colonnes sur thème Craft

[TonydInstArt]

Bonjour,

 

J'utilise le thème Craft sous Prestashop 1.6.0.9 et j'aimerais modifier le nombre de colonnes du module

"Produits mis en avant sur la page d'accueil" pour passer de 2 à 3 colonnes.

 

Une bonne âme pourrait me donner de l'aide ou un lien à suivre ? 

 

J'imagine devoir intervenir dans le CSS via mon FTP mais où et que faire ?

 

Quelles infos seraient utiles pour m'aider ?

 

Merci d'avance

 

 

 

 

 

[TonydInstArt]

Je me réponds mais après quelques heures de lecture/recherche sur le forum...

 

Je crois comprendre que je dois modifier homefeatured.tpl ? Je vois bien certaines solutions pour modifier des valeurs (nbItemsPerLine) mais elles n'apparaissent pas quand j'ouvre ce fichier dans mon FTP...

 

Je coince et ne voudrais pas faire n'importe quoi par dépit.

 

L'url si ça peut aider : www.InstArt.be

 

Merci par avance à toi ô sauveteur de mon petit site et de ma santé mentale.

[DeyDDy]

Bonjour,

 

Il faut modifier la valeur col-md-6 à col-md-4

 

les modifications sont a faire dans le fichier product-list.tpl de ton thème 

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-2{else} col-xs-12 col-sm-6 col-md-6{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine...........

[TonydInstArt]

Merci pour ta réponse DeyDDy ! 

 

Je viens d'effectuer la modif et du coup plus d'images affichées...

 

Je démarre vraiment donc je te dis mon step-by-step pour être sûr de pas faire de bêtise :

 

Via mon Ftp, j'ai édité product-list.tpl comme indiqué en remplaçant la valeur col-md. J'ai enregistré mon fichier et un tour sur ma home, refresh... Plus d'images.

 

Dans l'après-midi j'ai désactivté le module "Produits phares" et activé le module "Nouveaux produits". C'est lié ? Désolé si ça interfère, je voulais essayer d'avancer à force de lecture... mais j'ai des lacunes quoi.

 

Merci en tout cas !

[TonydInstArt]

EDIT

 

Voici mon product-list.tpl tel qu'il est maintenant. J'ai bien 3 colonnes possibles sur ma Home maintenant (j'ai remodifié les valeurs après mon dernier post pour revenir sur mes pas et c'est visiblement pas ce que j'ai fait...).

J'ai donc les 3 colonnes mais juste 2 produits sur la même ligne...

 

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'}  col-xs-12 col-sm-6 col-md-4 {else}   col-xs-12 col-sm-6 col-md-6{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

<div class="product-container" itemscope itemtype="http://schema.org/Product">

 

 

Est-ce que je dois m'intéresser à ce bout de code aussi : 

 

{if isset($products) && $products}

{*define number of products per line in other page for desktop*}

{if $page_name !='index' && $page_name !='product'}

{assign var='nbItemsPerLine' value=2}

{assign var='nbItemsPerLineTablet' value=2}

{assign var='nbItemsPerLineMobile' value=1}

{else}

{assign var='nbItemsPerLine' value=2}

{assign var='nbItemsPerLineTablet' value=2}

{assign var='nbItemsPerLineMobile' value=1}

{/if}

 

 

Encore merci du soutien !!

[DeyDDy]

Oui effectivement il faut aussi modifier "{assign var='nbItemsPerLine' value=2}" par un 3 

comme ceci

{if isset($products) && $products}
{*define number of products per line in other page for desktop*}
{if $page_name !='index' && $page_name !='product'}
{assign var='nbItemsPerLine' value=3}
{assign var='nbItemsPerLineTablet' value=2}
{assign var='nbItemsPerLineMobile' value=1}
{else}
{assign var='nbItemsPerLine' value=3}
{assign var='nbItemsPerLineTablet' value=2}
{assign var='nbItemsPerLineMobile' value=1}
{/if}

le premier pour la page d'accueil le second pour la page produit 

[DeyDDy]

Il faudra modifier le deuxième col-md-6 en col-md-4 pour la page produit

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'}  col-xs-12 col-sm-6 col-md-4 {else}   col-xs-12 col-sm-6 col-md-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">
<div class="product-container" itemscope itemtype="http://schema.org/Product">

et peut être aussi le global.js si cela ne fonctionne toujours pas

[TonydInstArt]

Ok ça fonctionne c'est top ! Même pas eu besoin de modifier global.js tu assures !!

 

Je peux abuser et te demander : Si j'utilise le module "Nouveaux produits" comme c'est le cas, ça marche. Mais est-ce que ces modifs effectuées seront aussi prises en compte si je préfère le module "Produits phares" ?

 

Et si tu je n'abuse pas... Est-ce qu'il m'est possible d'ajouter une marge pour séparer de qqs pixels blancs les vignettes entre elles ?

 

Et est-ce qu'il est possible d'afficher aléatoirement les images ? Dans ce cas de figure (module nouveaux produits activé), j'ai d'abord les vignettes d'une première catégorie de produits et ensuite la deuxième en fond de page.

Edited November 13, 2015 by TonydInstArt (see edit history)

[TonydInstArt]

Merci mille fois en tout cas super DeyDDy je te suis vraiment reconnaissant pour tes réponses !!!

Edited November 13, 2015 by TonydInstArt (see edit history)

[DeyDDy]

Bonjour TonydinstArt,

 

Y a pas de quoi quand on peut aider 

 

 

Je peux abuser et te demander : Si j'utilise le module "Nouveaux produits" comme c'est le cas, ça marche. Mais est-ce que ces modifs effectuées seront aussi prises en compte si je préfère le module "Produits phares" ?

 

 

oui les modifications seront bien prise en compte 

 

 

 

Et si tu je n'abuse pas... Est-ce qu'il m'est possible d'ajouter une marge pour séparer de qqs pixels blancs les vignettes entre elles ?

 

je ne peux pas te donner la ligne exact (cache activé) mais

 

ouvre le fichier product_list.css et recherche la ligne suivante

ul.product_list.grid > li .product-container {
   padding: 0px;
    position: relative;
    transition: all 0.4s ease-out 0s; 
}

tu met un padding: 2px; ou comme bon te semble

 

 

la troisième question est un autre sujet je t'invite donc à ouvrir un nouveau topic ou faire une recherche sur le forum 

[TonydInstArt]

C'est top ça fonctionne à merveille ! Merci encore pour le soutien.