Создание таблицы продуктов с тремя столбцами путем получения данных с использованием цикла по каждому элементу

Мне нужна помощь и понимание, поскольку я пытаюсь заполнить каждый столбец DIV данными о продукте, взятыми из базы данных. Мне нужно максимум три столбца в строке и столько же строк и столбцов, сколько есть продуктов.

Пример: если в базе данных три товара, будет сгенерирована одна строка с тремя столбцами. Если в базе данных десять продуктов, будут сгенерированы четыре строки, где три из них будут заполнены (три столбца в строке), а последняя (четвертая строка) будет иметь один столбец и так далее.

Мне нужно foreach loop, чтобы получить данные из базы данных для каждого варианта (название продукта, цена продукта, описание и т. д.) и заполнить его.

Для этого я создал сетку из трех столбцов, используя HTML и CSS (с медиа-запросом).

* {
      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%;
      }
    }
    
<div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product One</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">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 class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>
    
    <div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product Two</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">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 class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>
    
    <div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product Three</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">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 class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>

Это PHP, в котором я совсем не уверен. Это та часть, которую я пытаюсь понять лучше - это та часть, с которой мне нужна помощь.

Код PHP, использующий цикл foreach:

<?php  foreach ($products as $key => $prod) { ?>

<!-- wrap the loop begin -->
<div class="product-wrapper">

<!-- DIV loop -->
<div class="product-columns">
  <ul class="product-price">
    <li class="product-name"><?php echo $prod['name'] ?></li>
    <li class="product-grey">Price: <?php echo $prod['price'] ?></li>
    <li class="product-grey">Sale Price: <?php echo $prod['sale_price'] ?></li>
    <li class="product-grey">RRP: <?php echo $prod['product_rrp'] ?></li>
    <li>Seller: <?php echo $prod['seller_nickname'] ?></li>
    <li>Ext. Delivery: <?php echo $prod['delivery_time'] ?></li>
    <li>Ext. Delivery Cost: <?php echo $prod['del_cost_from'] ?> to <?php echo $prod['del_cost_to'] ?></li>
    <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
  </ul>
</div>
<!-- DIV loop ends -->

<!-- wrap the loop end -->
</div>

<?php endforeach; } ?>

Я получил помощь от других вопросов здесь, на SO, поскольку я пытаюсь узнать все, что могу. Прямо сейчас я не уверен, правильный это путь или нет? Я делаю это правильно?

Любые советы приветствуются.

именно то, что вы хотите?

Ahmad MRF 23.04.2022 12:16

Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно точно сказать, о чем вы спрашиваете.

Community 23.04.2022 12:16

Мне нужна помощь в том, как использовать цикл для заполнения одного из тех продуктов, которые сейчас представляют собой просто HTML.

user18917523 23.04.2022 12:56
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
3
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

если вы хотите показать три продукта, вы можете сделать это с помощью 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 class="product-container">
<!-- put one div in the loop-->
<!-- <?php  foreach ($products as $key => $prod) { ?> -->
  <div class="product-holders">
    <div class="card">
    <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 class="card-body">
      <div class="row">
        <div class="card-title">
          <h4>Nike Sneaker 
         <!-- <?php echo $prod['name'] ?> -->
          </h4>
          <h3>$120
         <!--  <?php echo $prod['price'] ?> -->
          </h3>
        </div>
        <div class="view-btn">
          <a href="">View Details</a>
        </div>
      </div>
      <hr />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
        dignissimos.
      </p>
      <div class="btn-group">
        <div class="btn">
          <a href="">Buy Now</a>
        </div>
        <a href=""> Cancel</a>
      </div>
    </div>
  </div>
  </div>
 <!-- <?php   } ?> -->
</div>

Хорошо, и как мне использовать цикл PHP foreach для заполнения данных в DIV? В смысле, получить цену, название продукта и все остальное? Не могли бы вы привести пример?

user18917523 23.04.2022 12:57

удалите теги <!-- --> вокруг php-кода.

The Duo 23.04.2022 13:17

Спасибо за пример, но просто для ясности — мне нужно завершить цикл с помощью <?php endforeach; ?>, верно? Если нет, то как?

user18917523 24.04.2022 08:38

Я отредактировал свой вопрос, чтобы отразить ваш ответ, а также мою попытку использовать код, который мне нужен. Не могли бы вы исправить это, если я ошибаюсь?

user18917523 24.04.2022 08:46

Вы используете основной php или какой-то фреймворк, потому что ваш вопрос теперь выглядит совсем иначе

The Duo 24.04.2022 09:58

Я использую PHP? Извините, новичок в этом. Я пытаюсь использовать HTML и CSS, которые я предоставил с оболочкой (как вы сказали, оболочка выходит за пределы цикла), а затем я добавил код от вас, пытаясь использовать мои HTML и CSS с циклом foreach .

user18917523 24.04.2022 10:30
Ответ принят как подходящий

Вместо переменной $ Thirdcoulmn в виде логического значения сохраните значение модуля, которое поможет вам открывать и закрывать div с помощью class="product-column"

<div class="product-wrapper">
    <?php
    // I assume loop runs with in product wrapper
    $i = 0;
    foreach ($products as $key => $prod) {
        ?>
        <!-- wrap the loop begin -->
        <!-- DIV loop -->
        <?php
        if ($i % 3 == 0) { //Opening the loop
            ?>
            <div class="product-columns">
                <?php
            }
            ?>
            <ul class="product-price">
                <li class="product-name"><?php echo $prod['name'] ?></li>
                <li class="product-grey">Price: <?php echo $prod['price'] ?></li>
                <li class="product-grey">Sale Price: <?php echo $prod['sale_price'] ?></li>
                <li class="product-grey">RRP: <?php echo $prod['product_rrp'] ?></li>
                <li>Seller: <?php echo $prod['seller_nickname'] ?></li>
                <li>Ext. Delivery: <?php echo $prod['delivery_time'] ?></li>
                <li>Ext. Delivery Cost: <?php echo $prod['del_cost_from'] ?> to <?php echo $prod['del_cost_to'] ?></li>
                <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
            </ul>
            <?php
            if ($i % 3 == 2) { //This is closing div after every three products
                ?>   
            </div>
            <?php
        }
        $i++;
    }
    ?>
    <!-- DIV loop ends -->
    <?php
    if ($i % 3 < 2) {  //Important..!! This is closing div if last row has less than three products
        ?>   
    </div>
    <?php
}
?>
<!-- wrap the loop end -->
</div>

Я могу вас неправильно понять, но нужен ли мне «счетчик», который проверяет каждый третий продукт? Все, что мне нужно, это отображать три продукта в строке (три столбца), о чем позаботится CSS. Мне нужна помощь, чтобы понять, как обернуть цикл и как написать цикл, следовательно, мой «тест» выше.

user18917523 24.04.2022 10:37

Да. Вам либо нужен счетчик для открытия и закрытия div после трех каждых 3 продуктов (я использовал счетчик $i вместо $key, поскольку $key не обязательно должен быть индексом, начинающимся с 0), либо вы можете использовать рекурсию для каждых трех продуктов в цикле. Оператор $i%3 помогает мне определить индекс продукта (0,1,2) в цикле. 0 означает первый продукт в каждом цикле и нужно открыть div. 2 означает (3-й/последний продукт в цикле), что нам нужно закрыть div. Обратите внимание, что закрывающий div не появится, если в последнем цикле товаров меньше 3 товаров. Итак, еще одно условие if закроет div, если в последнем цикле меньше 3 продуктов.

Zulfiqar Ali Syed 24.04.2022 11:13

Хорошо, спасибо за объяснение. Используя ваш код, мне не нужно завершать цикл foreach?

user18917523 24.04.2022 15:23

В php открытие и закрытие цикла осуществляется с помощью фигурных скобок foreach(condition){..}. В PHP нет такого ключевого слова endforeach, в отличие от PL/SQL.

Zulfiqar Ali Syed 25.04.2022 09:52

Другие вопросы по теме