Augmenter le nombres de produits par ligne

[EgamiCreation]

Bonjour à tous, je suis la version 1.6 et vient vous demander un peu d'aide.

 

Je n'arrive pas du tout à augmenter le nombres de produits d'une catégorie par ligne..

 

J'en est que 3 et j'aimerais en avoir 4 ou 5 ?

 

Merci d'avance de votre retour..

 

Cordialement.

 

Ludovic C.

 

[Mediacom87]

Bonjour,

 

pour cela il faut revoir le design (css) de l'affichage de vos produits afin de faire loger 4 ou 5 produits par lignes.

[EgamiCreation]

Bonjour,

 

pour cela il faut revoir le design (css) de l'affichage de vos produits afin de faire loger 4 ou 5 produits par lignes.

Ce serait dans la partie product CSS ?

 

On m'a parlé que cela pouvait être dans la partie products.tpl mais je l'ai passé que de 3 à 4 et rien de changé.

 

Merci pour vos partages de compétences

[DeyDDy]

Bonjour,

 

Il faut modifier le product-list.tpl (exemple pour 4 produits)

modifie la ligne 28 et 49

{if isset($products) && $products}
	{*define numbers of product per line in other page for desktop*}
	{if $page_name !='index' && $page_name !='product'}
		{assign var='nbItemsPerLine' value=4}
		{assign var='nbItemsPerLineTablet' value=2}
		{assign var='nbItemsPerLineMobile' value=3}
	{else}
		{assign var='nbItemsPerLine' value=6}
		{assign var='nbItemsPerLineTablet' value=3}
		{assign var='nbItemsPerLineMobile' value=2}
	{/if}
	{*define numbers of product per line in other page for tablet*}
	{assign var='nbLi' value=$products|@count}
	{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
	{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">
	{foreach from=$products item=product name=products}
		{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
		{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
		{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
		{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
		<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-2 col-md-2{else} col-xs-12 col-sm-6 col-md-3{/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}">

mais aussi le global.js du thème pour la partie liste 

modifie la ligne 205 ,206 et 223

html = '<div class="product-container"><div class="row">';
				html += '<div class="left-block col-xs-4 col-xs-5 col-md-3">' + $(element).find('.left-block').html() + '</div>';
				html += '<div class="center-block col-xs-4 col-xs-7 col-md-5">';
					html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
					html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
					var rating = $(element).find('.comments_note').html(); // check : rating
					if (rating != null) { 
						html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
					}
					html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
					var colorList = $(element).find('.color-list-container').html();
					if (colorList != null) {
						html += '<div class="color-list-container">'+ colorList +'</div>';
					}
					var availability = $(element).find('.availability').html();	// check : catalog mode is enabled
					if (availability != null) {
						html += '<span class="availability">'+ availability +'</span>';
					}
				html += '</div>';	
				html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';

[EgamiCreation]

 

Bonjour,

 

Il faut modifier le product-list.tpl (exemple pour 4 produits)

modifie la ligne 28 et 49

{if isset($products) && $products}
	{*define numbers of product per line in other page for desktop*}
	{if $page_name !='index' && $page_name !='product'}
		{assign var='nbItemsPerLine' value=4}
		{assign var='nbItemsPerLineTablet' value=2}
		{assign var='nbItemsPerLineMobile' value=3}
	{else}
		{assign var='nbItemsPerLine' value=6}
		{assign var='nbItemsPerLineTablet' value=3}
		{assign var='nbItemsPerLineMobile' value=2}
	{/if}
	{*define numbers of product per line in other page for tablet*}
	{assign var='nbLi' value=$products|@count}
	{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
	{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">
	{foreach from=$products item=product name=products}
		{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
		{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
		{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
		{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
		<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-2 col-md-2{else} col-xs-12 col-sm-6 col-md-3{/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}">

mais aussi le global.js du thème pour la partie liste 

modifie la ligne 205 ,206 et 223

html = '<div class="product-container"><div class="row">';
				html += '<div class="left-block col-xs-4 col-xs-5 col-md-3">' + $(element).find('.left-block').html() + '</div>';
				html += '<div class="center-block col-xs-4 col-xs-7 col-md-5">';
					html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
					html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
					var rating = $(element).find('.comments_note').html(); // check : rating
					if (rating != null) { 
						html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
					}
					html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
					var colorList = $(element).find('.color-list-container').html();
					if (colorList != null) {
						html += '<div class="color-list-container">'+ colorList +'</div>';
					}
					var availability = $(element).find('.availability').html();	// check : catalog mode is enabled
					if (availability != null) {
						html += '<span class="availability">'+ availability +'</span>';
					}
				html += '</div>';	
				html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';

Super merci, cela fonctionne très bien maintenant.

 

Sans abuser, connaissez-vous le module Ads & Slideshow ?

 

J'ai un souci car à la création du diaporama, j'ai suivi le tutoriel très bien fait d'accueil mais erreur à l'enregistrement.

 

Merci d'avance et encore merci.

[Mediacom87]

ah oui, je ne suis pasq encore au point sur les design de cette 1.6

[DeyDDy]

Super merci, cela fonctionne très bien maintenant.

 

Sans abuser, connaissez-vous le module Ads & Slideshow ?

 

J'ai un souci car à la création du diaporama, j'ai suivi le tutoriel très bien fait d'accueil mais erreur à l'enregistrement.

 

Merci d'avance et encore merci.

 

Je ne connais pas le module désolé 

 

je t'invite plutôt a contacter l'auteur qui sera plus a même de te répondre 

 

N'oublie pas de mettre un "résolu" devant le titre de ton topic

[Vinc3nzo]

Bonjour, j'ai voulu tester cette astuce donné, mais il y a un soucis quand on re-clic sur l'affichage "list"

Je recherche par-contre cette astuce pour le "homefeatured" si vous avez une idée... car j'ai trifouillé, j'ai vu que que ça jouai aussi avec le "homefeatured" c'est assez chmilblik pour le moment à comprendre le .js  :S

Sur le "homefeatured" je désire une ligne de 5 produits.


Merci d'avance.

[Atch]

Bonjour, j'ai voulu tester cette astuce donné, mais il y a un soucis quand on re-clic sur l'affichage "list"

 

Je recherche par-contre cette astuce pour le "homefeatured" si vous avez une idée... car j'ai trifouillé, j'ai vu que que ça jouai aussi avec le "homefeatured" c'est assez chmilblik pour le moment à comprendre le .js  :S

 

Sur le "homefeatured" je désire une ligne de 5 produits.

 

 

Merci d'avance.

Salut,

 

5 n'est pas un sous multiple de 12 ... donc pas possible d'avoir 5 produits en ligne sans retoucher le css de bootrstrap

 

Bootstrap permet : 2, 3, 4, 6, 8 , 12 produits en ligne ---> col-xs-a col-xs-a col-md-a ---> rien ne correspond à 5 colonnes

 

V++

 

Atch

[Votre Tendance]

Bonjour,

 

Ce topic m'a été bien utile, par contre j'aimerai savoir comment enlever le descriptif du produit comme sur cette page s'il vous plait

http://votretendance.com/7-telephonies

 

Merci d'avance pour votre réponse.

 

A bientôt !

[laurent t]

Bonjour

 

Merci pour ce code !!!!!! (je cherchais depuis pas mal de temps...)

J'ai juste un leger soucis :  toutes mes catégories affichent bien avec 4 produits par ligne maintenant, sauf ma catégorie nouveau produit qui est sur la page d'accueil (c'est un module TM-newproduct) qui lui présente toujours 3 produits par ligne)

j'ai beau chercher, je ne trouve pas ou et quoi corriger pour le faire passer lui aussi sur 4 produits par ligne afin de fluidifier ma page d'accueil

http://acces-ce.fr

 

Merci pour toute aide

 

Laurent

[Mediacom87]

Bonjour

 

Merci pour ce code !!!!!! (je cherchais depuis pas mal de temps...)

J'ai juste un leger soucis :  toutes mes catégories affichent bien avec 4 produits par ligne maintenant, sauf ma catégorie nouveau produit qui est sur la page d'accueil (c'est un module TM-newproduct) qui lui présente toujours 3 produits par ligne)

j'ai beau chercher, je ne trouve pas ou et quoi corriger pour le faire passer lui aussi sur 4 produits par ligne afin de fluidifier ma page d'accueil

http://acces-ce.fr

 

Merci pour toute aide

 

Laurent

Bonjour,

 

ce module n’est pas standard vous devez vous tourner vers son créateur pour tout assistance.

[collant]

Bonjour et un grand merci pour ce code qui fonctionne parfaitement sous 1.6.

 

Par contre, je ne sais pas ce qu'il faut modifier dans ce code pour passer à 6 articles par ligne...

Est-ce que qqn peut m'aider, svp ?

Merci beaucoup pour votre aide !

Claire

[collant]

Ah, je reviens sur ce que j'ai dit précédemment, dès que je change de type d'affichage (par liste ou par icône) tout se déplace....

Y a-t-il une âme charitable pour m'aider ???

Merci d'avance

[Dorora]

Bon y'a fallu que je cherche, et adapté ça:

 

 http://informatok.com/afficher-4-produits-par-ligne-sur-prestashop-au-lieu-de-3/

 

 

en mixant le tout je suis arrivèe à quelque chose

Edited February 29, 2016 by Dorora (see edit history)

[Virginie Garnier]

Bonjour, J'aurais besoin d'un coup de main. 

J'ai le thème par défaut-bootstrap, et j'aimerais sur les mobile afficher 2 produits par ligne au lieu d'un. 

Comment Faire? D'avance merci.

[Mediacom87]

Bonjour,

 

product-list.tpl

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{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}">

changez les col-xs-12 par col-xs-6

 

mais vous risquez avoir d'autres effets de bord au niveau de l'enchainement des éléments.

[Virginie Garnier]

Parfait merci! Je vais juste devoir revoir un peu les padding et la taille de la police pour que cela soit joli.

J'en profite puisque vous avez l'air au point! le dernier point qui me reste sur le responsive et sur lequel je rame, j'aimerais que la colonne centrale prenne toute la largeur, en réduisant au minimum colonne gauche et droite.  

Merci et bonne journée.

[hashtagdeco]

Bonjour, je me permet de répondre à vos messages, car pour moi j'ai beau changer les codes, ca ne fonctionne pas...

 

Si quelqu'un a une idée...

 

Merci d'avance

 

[Mediacom87]

Peut être un soucis de cache, videz le dans le menu Performances.

 

ou vous travaillez sur le mauvais fichier.

[hashtagdeco]

Merci pour la réponse aussi rapide, le cache a été vidé, et je travaille sur les bons fichiers, car d'autres modifications apparaissent...