每行显示3个产品

时间:2018-07-14 09:39:29

标签: php twitter-bootstrap-3

我在正确地在网站上显示产品时遇到问题,我试图在每行上显示3种产品,这些产品将保持相同的大小并且不会破坏显示。

代码:

<?php

    //error_reporting(1);

    // Query depending ...
    $theQuery = "";
    if (!isset($_GET['catId'])) {
        $theQuery = "SELECT * FROM `products` WHERE `product_active`='Y' ORDER BY RAND() LIMIT 24";
    } else {
        $theQuery = "SELECT * FROM `products` WHERE `product_category_id`='{$_GET['catId']}' AND `product_active`='Y' ORDER BY RAND() LIMIT 24";
    }

    // Execute 1 of the 2 queries.
    $randomProducts = DB::getInstance()->select($theQuery);

?>

<div class="container-fluid" id="container">
<div class="col-md-8">
<div class="row equal">

<?php foreach ($randomProducts as $product) { ?>

            <?php $p = json_decode($product['product_json_body'], true); ?>

                <?php if (!empty($p['name'])) { ?>

                         <div class="item col-xs-4 col-lg-4">
                          <div class="thumbnail">   
                            <div class="space-ten"></div>                         
                            <img src="<?php echo $p['images'][0]; ?>" alt="" style="width:450px; height:450px;" class="group list-group-image">                         
                            <div class="caption">
                              <h4 class="pull-right"><span class="text-danger"><b>$<?php echo number_format($p['priceRange']['maxPrice'], 2); ?></b></span></h4>
                              <h4><span class="text-success"><b><a href="product.php?productId=<?php echo $product['product_id']; ?>"><?php echo $p['name']; ?></a></b></span></h4>
                              <p><?php echo $p['descriptionText']; ?></p>
                            </div>                          
                            <div class="space-ten"></div>                       
                            <div class="btn-ground text-center">
                            <form action="cart.php" method="post" class="form-horizontal container-fluid">
                                <input type="hidden" name="cartQTy" value="1" />
                                <input type="hidden" name="cartPId" value="<?php echo $product['product_id']; ?>" />
                                <input type="hidden" name="cartPNm" value="<?php echo $p['name']; ?>" />
                                <input type="hidden" name="cartPce" value="<?php echo number_format($p['priceRange']['maxPrice'], 2); ?>" />
                                <input type="hidden" name="cartUId" value="<?php echo $member; ?>" />
                                <input type="hidden" name="cartImg" value="<?php echo $p['images'][0]; ?>" />
                                <input type="hidden" name="cartTfs" value="<?php echo "source01"; ?>" />                                
                                <button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> <span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button>
                                <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-id="<?php echo $product['product_id']; ?>" data-target="#product_view"><i class="fa fa-search"></i> <span class="glyphicon glyphicon-eye-open"></span> Quick View</button>-->
                            </form> 
                            </div>                      
                            <div class="space-ten"></div>                         
                          </div>

                <?php } ?>              

    <?php } ?>  

</div></div></div>

这是非常基本的代码,我使用的是bootstrap框架,只有一些PHP可以循环输出产品,此处显示测试:https://www.we-love-unicorns.club/每次我尝试对其进行修复时,我都会变得更糟,我已删除并添加div似乎没有任何效果,有人可以看到我可能错过的任何问题吗?

1 个答案:

答案 0 :(得分:0)

您会放心地知道这是一个简单的解决方法。您只是在</div>循环中缺少结束的foreach标记。像这样

                     <div class="item col-xs-4 col-lg-4">
                      <div class="thumbnail">   
                        <div class="space-ten"></div>                         
                        <img src="<?php echo $p['images'][0]; ?>" alt="" style="width:450px; height:450px;" class="group list-group-image">                         
                        <div class="caption">
                          <h4 class="pull-right"><span class="text-danger"><b>$<?php echo number_format($p['priceRange']['maxPrice'], 2); ?></b></span></h4>
                          <h4><span class="text-success"><b><a href="product.php?productId=<?php echo $product['product_id']; ?>"><?php echo $p['name']; ?></a></b></span></h4>
                          <p><?php echo $p['descriptionText']; ?></p>
                        </div>                          
                        <div class="space-ten"></div>                       
                        <div class="btn-ground text-center">
                        <form action="cart.php" method="post" class="form-horizontal container-fluid">
                            <input type="hidden" name="cartQTy" value="1" />
                            <input type="hidden" name="cartPId" value="<?php echo $product['product_id']; ?>" />
                            <input type="hidden" name="cartPNm" value="<?php echo $p['name']; ?>" />
                            <input type="hidden" name="cartPce" value="<?php echo number_format($p['priceRange']['maxPrice'], 2); ?>" />
                            <input type="hidden" name="cartUId" value="<?php echo $member; ?>" />
                            <input type="hidden" name="cartImg" value="<?php echo $p['images'][0]; ?>" />
                            <input type="hidden" name="cartTfs" value="<?php echo "source01"; ?>" />                                
                            <button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> <span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button>
                            <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-id="<?php echo $product['product_id']; ?>" data-target="#product_view"><i class="fa fa-search"></i> <span class="glyphicon glyphicon-eye-open"></span> Quick View</button>-->
                        </form> 
                        </div>                      
                        <div class="space-ten"></div>                         
                      </div>
                    </div> <!-- This div tag! -->