Bonjour, Je suis bloquée, je ne sais pas comment correctement le résultat de mon foreach/php. Ma boucle fonctionne, me renvoie ce que je veux, mais je n'arrive pas à mettre tout ça en forme pour obtenir une grid, ou une mise en page flexbox. Avec mon code ce sera peut-être plus clair...

<ul class="container">
<?php foreach ($products as $product): ?>
        <li class="product">
            <img src="./statics/images/<?php echo $product['pictureRef']; ?>" alt="<?php echo $product['name']?>">
            <p><?php echo $product['name']; ?></p>
            <p><?php echo $product['degree']; ?></p>
            <p><?php echo $product['designation']; ?></p>
            <p><?php echo $product['unitPrice']; ?> &#x20AC</p>
            <!-- bouton panier -->
            <button type="submit" class="cta-button" name="addToCart" value="<?php echo $product['productId']; ?>">Ajouter au panier</button>
        </li>
    <?php endforeach; ?>
</ul>

.product{
    display: grid;
    grid-template-columns:80%;
    margin: auto;
     img{
        width: 60px;
     }
     p{
        text-align: center;
     }
}
@media screen and(min-width:500px) {
// comment passer ce bordel en row ou grid???
    .product{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

Bonsoir, le css, surtout ta propriété grid-template-columns me parle pas trop. Je vais don ignorer cela et gérer le php.

Tu veux afficher tes produits comment ? 

Si tu veux un certain nombre de produits par ligne(disons 03) alors tu peux avoir ceci:

<div class="container">

  <?php foreach($products as $key => $product): ?>

    <?php if($key % 3 == 0): ?>
      <div class="flex-container">
    <?php endif; ?>

      <div class="flex-item">
        // Tu affiches ton produit
      </div>

    <?php if($key % 3 == 2): ?>
      </div>
    <?php endif; ?>

  <? endforeach; ?>

</div>

Et le css:

.flex-container{
  display: flex;
  flex-direction: row;
}

.flex-container > .flex-item {
  flex: auto;
}

Tu peux en savoir plus sur flex ici: flex - CSS : Feuilles de style en cascade | MDN (mozilla.org).

Si tu utilises bootstrap a la place de flex-container et flex-item tu mets respectivement "row row-cols-3" et "col". Avec "row-cols-3" tu n'auras même plus besoin des "if" qui sont dans ma boucle foreach.

-
Edité par Asmitta 29 mars 2024 à 0:32:28

Bonjour

merci beaucoup pour votre réponse.

J'ai essayé d'appliquer votre code mais je n'arrive pas à l'adapter. En fait mon foreach va m'envoyer une grille de 9 produits, affichée en 3*3 en mode desk, et en une seule colonne quand je suis sur un écran téléphone (j'essaie de travailler en mobile first)

Comme je l'ai d'abord dit, avec bootstrap c'est facile:

<div class="row row-cols-3"
  <?php foreach ($products as $product): ?>
    <div class="col">
      // Ton produit
    </div>
  <?php endforeach; ?>
</div>

Oui j'ai mal développé dans mon dernier message sorry. Mais si tu n'utilises pas bootstrap alors le code de mon dernier message reste valide.

Bon j'ai refait un truc propre dans codepen.