Jump to content

Modifier le nombre de colonnes sur thème Craft


Recommended Posts

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

 

 

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...........
  • Like 1
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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 !! :)
Link to comment
Share on other sites

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

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  :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by TonydInstArt (see edit history)
Link to comment
Share on other sites

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  ;)

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
×
×
  • Create New...