Creating a Three Columned Product Grid by Getting Data using Foreach Loop-CodePudding

I need help and understanding as I am trying to populate each DIV-column with product data, taken from the database. I need a maximum of three columns per row, and as many rows and columns as there are products.

Example: if there are three products in the database, one row with three columns will be generated. If there are ten products in the database, four rows will be generated where of three of them will be full (three columns per row) and the last (the forth row) will have one column -- and so forth.

I need the foreach loop to get data from the database for each option (product name, product price, description etc) and populate it.

To accomplish this, I have created a three column grid using HTML and CSS (with media query).

This is the CSS I am using:

* {
  box-sizing: border-box;
}

.product-columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}

.product-price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.product-price:hover {
  box-shadow: 0 10px 15px 0 rgba(0,0,0,0.2)
}

.product-price .product-name {
  background-color: #111;
  color: white;
  font-size: 25px;
}

.product-price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

.product-price .product-grey {
  background-color: #eee;
  font-size: 20px;
}

.buy-now-button {
  background-color: #333333;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

.buy-now-button:hover {
  background-color: #000000;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
}

@media only screen and (max-width: 600px) {
  .product-columns {
    width: 100%;
  }
}

This is the HTML:

<div >
  <ul >
    <li >Product One</li>
    <li >Price: €9.99</li>
    <li >Sale Price: €8.99</li>
    <li >RRP: €11.99</li>
    <li>Seller: John Doe</li>
    <li>Ext. Delivery: 3-7 days</li>
    <li>Ext. Delivery Cost: €4.99 to €9.99</li>
    <li ><a href="#" >Buy Now</a></li>
  </ul>
</div>

<div >
  <ul >
    <li >Product Two</li>
    <li >Price: €9.99</li>
    <li >Sale Price: €8.99</li>
    <li >RRP: €11.99</li>
    <li>Seller: John Doe</li>
    <li>Ext. Delivery: 3-7 days</li>
    <li>Ext. Delivery Cost: €4.99 to €9.99</li>
    <li ><a href="#" >Buy Now</a></li>
  </ul>
</div>

<div >
  <ul >
    <li >Product Three</li>
    <li >Price: €9.99</li>
    <li >Sale Price: €8.99</li>
    <li >RRP: €11.99</li>
    <li>Seller: John Doe</li>
    <li>Ext. Delivery: 3-7 days</li>
    <li>Ext. Delivery Cost: €4.99 to €9.99</li>
    <li ><a href="#" >Buy Now</a></li>
  </ul>
</div>

This is the PHP, which I am not at all sure about. This is the part I am trying to understand better - this is the part I need help with.

The PHP code:

<?php foreach ($dbproducts as $products => $product): $thirdcolumn = ($products 1%3)===0; ?>
    <?php if ($thirdcolumn): ?>
        <div >
    <?php endif ?>
      <div >
        <h2>product 1</h2>
      </div>
    <?php if ($thirdcolumn): ?>
        </div>
    <?php endif ?>
</div>
<?php endforeach; ?>

I have obviously taken help from other questions here on SO as I am trying to learn the best I can. Right now, I am stuck.

Any advice is appreciated.

CodePudding user response：

if you want to show three products you can do that by using flex box.

.product-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.product-holders {
  margin: 0px 1%;
  width: 30%;
  height: 30%;
  min-height: 30px;
  min-width: 30px;
  background: red;
  flex: 0 0 30%;
  /*or use flex-besis : 30% */
}


/*product card styles */
.card {
  width: 300px;
  height: 440px;
  border-radius: 5px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
.card > *:not(img) {
  padding: 5px 10px;
}

.card img {
  width: 100%;
  height: 180px;
}

.card-body {
  padding: 5px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.card-body p {
  color: #3d3d3d;
  margin-bottom: 20px;
  font-size: 14px;
}

.view-btn a {
  padding: 5px 15px;
  border: 1.5px solid #007bff;
  border-radius: 3px;
  text-decoration: none;
  color: #007bff;
}

.btn-group {
  display: flex;
}

.btn-group .btn a {
  padding: 5px 15px;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  margin-left: -2px;
}
.btn-group a {
  margin: 0 10px;
  text-decoration: none;
  color: #000;
}

<!-- container will be outside of you loop-->
<div >
<!-- put one div in the loop-->
<!-- <?php  foreach ($products as $key => $prod) { ?> -->
  <div >
    <div >
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXMlMjBuaWtlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="" />
    <div >
      <div >
        <div >
          <h4>Nike Sneaker 
         <!-- <?php echo $prod['name'] ?> -->
          </h4>
          <h3>$120
         <!--  <?php echo $prod['price'] ?> -->
          </h3>
        </div>
        <div >
          <a href="">View Details</a>
        </div>
      </div>
      <hr />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
        dignissimos.
      </p>
      <div >
        <div >
          <a href="">Buy Now</a>
        </div>
        <a href=""> Cancel</a>
      </div>
    </div>
  </div>
  </div>
 <!-- <?php   } ?> -->
</div>

CodePudding user response：

Instead of $thirdcoulmn variable as boolean, store modulus value which will help you to open and close div with

<?php foreach ($dbproducts as $products => $product): $thirdcolumn = (($products 1)%3); ?>
    <?php if ($thirdcolumn===1): ?>
        <div >
    <?php endif ?>
      <div >
        <h2>product 1</h2>
      </div>
    <?php if ($thirdcolumn===0): ?>
        </div>
    <?php endif ?>
</div>
<?php endforeach; ?>
<?php if ($thirdcolumn>0): ?>
        </div>
    <?php endif ?>