Ajout d'un bloc entre les produits dans les catégories ps1.6

[Manu-41]

Bonjour ,

j'aimerai ajouter un bloc entre les produits des catégories.

Dans l'exemple au bout de 4 produit, il y aura mon bloc et après les autres produits. En faite, mon bloc prendra la place à un produit.

Je n'ai pas vu ce genre de demande sur le forum. Je sais que çà doit se situer dans le produit-list, mais comment placer ce block à l'endroit voulu.

Merci pour votre aide.

Ps 1.6

[Shonen]

Salut,

J'aurais vu ça dans ce style : tu assigne une nouvelle valeur avant le foreach dans product-list.tpl genre {assign var='compteur' value=1}

Dans le foreach, tu vérifie si ton décompte est correct (à ta sauce, avec un modulo ou n'importe quelle formule mathématiques de ton choix). Si c'est le cas, tu affiche un nouveau bloc.

Et enfin à la fin du foreach tu incrémente {assign var='compteur' value=$compteur+1}

[Manu-41]

17 minutes ago, Shonen said:

Salut,

J'aurais vu ça dans ce style : tu assigne une nouvelle valeur avant le foreach dans product-list.tpl genre {assign var='compteur' value=1}

Dans le foreach, tu vérifie si ton décompte est correct (à ta sauce, avec un modulo ou n'importe quelle formule mathématiques de ton choix). Si c'est le cas, tu affiche un nouveau bloc.

Et enfin à la fin du foreach tu incrémente {assign var='compteur' value=$compteur+1}

merci pour ton aide, ca semble complexe. Je n'ai pas vu de tuto ou personne qui ont réussie à faire cela.

[solsol69]

Bonjour

il me semble que le site web de cette agence utilise PrestaShop avec la fonctionnalité que tu recherche. 

Peut être leur demandé.

Voici une de leurs page

https://www.shopmodule.fr/fr/14-module-navigation-et-design-front-office-prestashop

[Manu-41]

Merci solsol69, j'ai regardé dans le code, il est ajouté un data-attribut avec un numéro différent.

Moi j'ai mon code d'origine qui est ainsi:

<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/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-6 col-sm-4 col-md-3{else} col-xs-6 col-sm-6 col-md-4 mob_list{/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 mob_list{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line mob_list {elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line mob_list{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line mob_list{/if}">
		

Je pense qu'il faudrait rajouter ajouter un <li mon image>

mais comment la placer à l'endroit voulu dans la liste de produit.

[Manu-41]

J'ai trouvé un module sur addons similaire à ma demande

https://addons.prestashop.com/fr/personnalisation-de-page/45935-autopromo-affiche-des-visuels-dans-la-listes-de-produit.html#specifications

Mais ayant qu'un seul bloc à afficher, je ne veux pas surcharger la boutique juste pour cela.

Je fait appel à vos lumière pour ajouter ce block, d'un moins pour le positionner entre les produits.

[Manu-41]

je relance, car je ne trouve pas comment placer le bloc dans la liste de produit.

[Shonen]

Tu as essayé de mettre en application quelque chose ? Dans l'idée de ce que je t'ai donné, j'ai fait le test d'implémentation sur un thème natif Presta 1.6 mais après à toi de tout styliser.

fichier /themes/tontheme/product-list.tpl

	{assign var='compteur' value=1}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{else} id="product_list"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/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}

		{if $compteur == 4}
			<li class="col-xs-12 col-sm-6 col-md-4 new-block" style="border:1px solid red; height:400px;">
				Mon nouveau bloc.
			</li>
		{/if}
		{assign var='compteur' value=$compteur+1}
		<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}">

Et ici j'ai 1 seul bloc qui va apparaître après le 3e produit.

Mais en effet va falloir que tu blinde de style pour que ça rentre selon ton thème.

[Manu-41]

17 hours ago, Shonen said:

Tu as essayé de mettre en application quelque chose ? Dans l'idée de ce que je t'ai donné, j'ai fait le test d'implémentation sur un thème natif Presta 1.6 mais après à toi de tout styliser.

fichier /themes/tontheme/product-list.tpl

	{assign var='compteur' value=1}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{else} id="product_list"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/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}

		{if $compteur == 4}
			<li class="col-xs-12 col-sm-6 col-md-4 new-block" style="border:1px solid red; height:400px;">
				Mon nouveau bloc.
			</li>
		{/if}
		{assign var='compteur' value=$compteur+1}
		<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}">

Et ici j'ai 1 seul bloc qui va apparaître après le 3e produit.

Mais en effet va falloir que tu blinde de style pour que ça rentre selon ton thème.

Bonjour,

j'ai testé, ca fonctionne et ça place bien le bloc.

{if $compteur == 4}
			<li class="col-xs-12 col-sm-6 col-md-4 new-block" style="border:1px solid red; height:400px;">
				Mon nouveau bloc.
			</li>
		{/if}
		{assign var='compteur' value=$compteur+1}
		

Juste un souci, le bloc est bien en position 5 (4 produit avant et 2 produit après), mais les autres produits sont décalés et laissent une zone blanche  de 2 produits en dessous du bloc.

testé avec le thème d'origine de ps 1.6

Merci pour ton aide 😉

 

Edited February 23, 2021 by Manu-shop (see edit history)

[Shonen]

Comme je t'ai dit, il va falloir que tu modifie le fichier CSS de ton thème, c'est normal que ça décale il va falloir que tu ai un peu de boulot de ton côté !

[Manu-41]

regarde la pièce jointe. Normalement, les bloc doivent suivre.

Le nouveau bloc est en position 5, ensuite il y a 2 produits, 2 blanc et le reste des produits.

[Manu-41]

On 2/23/2021 at 12:00 PM, Shonen said:

Comme je t'ai dit, il va falloir que tu modifie le fichier CSS de ton thème, c'est normal que ça décale il va falloir que tu ai un peu de boulot de ton côté !

j'ai peut-être trouvé le problème, j'ai c’a dans mon css:

ul.product_list.grid > li.first-in-line {
    clear: left;

quand je le désactive, les produits sont bien à la suite, mais quel est la fonction de clear left?

[Shonen]

https://developer.mozilla.org/fr/docs/Web/CSS/clear

Quote

La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété clear s'applique aux éléments flottants comme aux éléments non-flottants.

 

[Manu-41]

5 minutes ago, Shonen said:

https://developer.mozilla.org/fr/docs/Web/CSS/clear

 

oui, j'ai vu la page quand j'ai regardé, mais je n'arrive pas à tout comprendre.

Puis-je l'enlever? ou je doit essayer de trouver une solution pour le bloc?