Jump to content

Images dans les pages catégories (entre les produits) ps 1.7

Manu-41
 Share

Recommended Posts

Manu-41 Mentor

Manu-41

Posted
Posted

Bonjour,

je souhaite ajouter une image et texte entre les produits des catégories (dans la liste des produits de la catégorie) . J'ai actuellement 3 produit par ligne, et je voudrais que l'image soit en position 4.

Je sais où placer mon code, mais comment placer mon block en position 4 ?

Merci pour votre aide.

Ps 1.7.8

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
  • Author
Posted
1 minute ago, Tom Girou said:

Bonjour Manu,

Ce sera avec du CSS et du HTML. Votre site est-il consultable ?

Bonjour l'ami, merci pour ton aide.

En css, comment ?

Je n'ai pas encore ajouté le bloc, car je fais un test sur une version test.

Link to comment
Share on other sites
Tom Girou Enthusiast

Tom Girou

Posted
Posted

Tout dépend du template de ta page. Sans le voir c'est compliqué de dire.

Mais de manière générale, les librairies CSS actuelles fonctionnent avec un système de grille d'une largeur de 12 colonnes. 
Vos 3 blocs produits utilisent probablement une taille de 4 colonnes chacun (3 * 4 = 12).

Si vous souhaitez ajouter un 4 bloc sur la ligne, il faut changer la taille en colonnes des blocs produits à 3, et mettre votre bloc avec une taille de 3 colonnes également. Ce qui vous fera donc 4 blocs de 3 colonnes soit un total de 12.

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
  • Author
Posted

Je souhaite ajouter un block entre les produit. dans ce block, il y aura une image et du texte.

Je voudrais le faire sans module.

Exemple :

b1 - b2 - b3

b4 - b5 - b6

b7 - b8 - b9

....

Ce que je voudrais

b1 - b2 - b3

Mon bloc - b4 - b5

b6 - b7 - b8

....

Link to comment
Share on other sites
Tom Girou Enthusiast

Tom Girou

Posted
Posted

Je vois. Donc il faut faire une condition avec smarty. Pour la page de la liste produits, il y a une boucle qui va parcourir un tableau avec tous les produits et afficher leur bloc produit un à un. Il faut faire en sorte d'avoir l'index de ce tableau au moment de le parcourir pour dire "si index = 4, alors affiche mon image".

Peut-être pourrais-tu nous envoyer le contenu de ton template sur https://paste.ofcode.org/ ?

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted (edited)

Bonjour,

dans le fichier themes/votre_theme/templates/catalog/_partials/productlist.tpl 

<div class="products{if !empty($cssClass)} {$cssClass}{/if}">
    {foreach from=$products item="product" key="position" name="prods"}
  		{if $smarty.foreach.prods.iteration == 4}
  			<div class="js-product product{if !empty($productClasses)} {$productClasses}{/if}">
  				<img src="" loading="lazy" width="" height="" />
  			</div>
  		{/if}
        {include file="catalog/_partials/miniatures/product.tpl" product=$product position=$position productClasses=$productClasses}
    {/foreach}
</div>

C'est une piste, je n'ai rien testé donc à adapter à mon sens.

Bien entendu j'imagine que vous voulez en plus que cela soit différent en fonction des catégories ou autre, mais c'est un point de départ pour votre réflexion.

Edited by Mediacom87 (see edit history)
Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
  • Author
Posted

Ca ne fonctionne pas, rien n'apparait.

Voici le code: 

{if !empty($carousel)}
  <div class="cz-carousel cz-controls-static cz-controls-outside">
    <div class="cz-carousel-inner d-flex" data-carousel-options='{literal}{"items": 2, "controls": true, "nav": false, "responsive": {"0": {"items": 1}, "500": {"items": 2, "gutter": 16}, "768": {"items": 3}, "1100": {"items": 4}}}{/literal}'>
      {foreach from=$products item="product" key="position"}
        <div>
          {include file='catalog/_partials/miniatures/product.tpl' h2=(($page.page_name == 'index')?true:false) product=$product position=$position carousel=$carousel}
        </div>
      {/foreach}
    </div>
  </div>
{elseif isset($listing) && isset($smarty.cookies.display) && $smarty.cookies.display == 'list'}
  {foreach from=$products item="product" key="position" name="products"}
    {include file='catalog/_partials/miniatures/product-list.tpl' product=$product position=$position}
    {if !$smarty.foreach.products.last}
      <hr class="my-3">
    {/if}
  {/foreach}
{else}
  <div class="row m-n2" {*style="padding: 0 0.5rem;"*}>
    {foreach from=$products item="product" key="position" name="products"}
      <div class="col-sm-6 col-md-4{if !isset($page.body_classes['layout-left-column']) && !isset($page.body_classes['layout-right-column'])} col-lg-4{/if} p-2 col-6">
        {include file='catalog/_partials/miniatures/product.tpl' product=$product position=$position}
        {if !$smarty.foreach.products.last}
          <hr class="d-sm-none">
        {/if}
      </div>
    {/foreach}
  </div>
{/if}

 

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted
il y a 52 minutes, Manu-41 a dit : 
{foreach from=$products item="product" key="position"}
        <div>
          {include file='catalog/_partials/miniatures/product.tpl' h2=(($page.page_name == 'index')?true:false) product=$product position=$position carousel=$carousel}
        </div>
      {/foreach}

Il faut, à mon avis, travailler sur ce foreach

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
  • Author
Posted
13 minutes ago, Mediacom87 said:

J'ai corrigé mon code, il y avait une erreur, j'utilisais le compteur sur foo au lieu de prods

J'ai trouvé : 

if $smarty.foreach.products.iteration == 4

Par contre, sur mobile, ça fait un décalage des autres produits. Il y a une zone sans produit. je vais regarder.

Mille merci à vous 😉

 

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