使用 Jquery Ajax 功能进行电子商务类别布局？如何？

Question

我正在为我的一个客户构建一个自定义电子商务网站，我决定在他们选择一个选项时使用 Ajax 重新填充产品布局。比如……

我有一个颜色列表。红色、蓝色、绿色等。当他们单击其中一种颜色时，我想将颜色的 ID 传递给 ajax 函数。它将转到一个 php 函数，在该函数中它会根据他们选择的颜色拉出一个新的产品列表。它返回一个 JSON 对象，其中包含所有产品。这部分我可以处理。

所以这是我需要帮助的部分。我以前从未这样做过，所以我想知道，在返回 JSON 对象后如何布局我的产品表？显然我不能将 JSON 对象传递回 php 并这样做，所以我是否只需使用 jquery 重新创建我的产品表，为 JSON 对象编写一个 foreach 循环，然后用该内容替换我的容器 div？

您通常会如何以专业的方式去做这件事？

对评论的回应：

我已经在初始页面加载时用 PHP 编写了模板。我正在使用 ajax，所以我不必重新加载页面。

这是我的 PHP

<?php foreach($products as $p): ?>
        <div class="indProduct">
            <?php foreach($images as $img): ?>
            <?php if($img['productId'] == $p['id']): ?>
            <div class="prodImg"><img src="<?php echo base_url(); ?>images/products/<?php echo $img['image']; ?>" alt="<?php echo $p['productTitle']; ?>" /></div>
            <?php endif; ?>
            <?php endforeach; ?>
            <?php if($p['salePrice'] != 0.00): ?>
            <div class="prodSaleBanner"></div>
            <?php endif; ?>
            <div class="prodTitle"><?php echo $p['productTitle']; ?></div>
            <div class="prodPrice">
                <?php if($p['salePrice'] != 0.00): ?>
                $<?php echo number_format($p['salePrice'], 2, '.', ''); ?>
                <?php else: ?>
                $<?php echo number_format($p['price'], 2, '.', ''); ?>
                <?php endif; ?>
                <br />
                <div class="original-price">
                    <?php if($p['salePrice'] != 0.00): ?>
                    $<span style="text-decoration:line-through;"><?php echo number_format($p['price'], 2, '.', ''); ?></span> 
                    <span class="savings">
                        <?php 
                        $savings = $p['price'] - $p['salePrice'];
                        echo 'SAVE: '.number_format($savings, 2, '.', '');
                        ?>
                    </span>
                    <?php endif; ?>
                </div>
            </div>
            <div class="prodAddButton">
                <a href="<?php echo $p['id']; ?>" id="addToCartButton" class="storeButton">Add To Cart</a>
            </div>
        </div>
        <?php endforeach; ?>

所以我的计划是获取 JSON 对象，然后基本上使用 jquery 和 json 而不是 PHP 重做 ajax 成功请求中的所有上述代码。这样做很难吗？

Answer 1

我没有使用代码点火器，但我会使用像 mustache 这样的模板引擎并使用我想要显示的信息定义我的模板，然后将 json 传递给您的模板并使用 jQuery 渲染到屏幕。我解释过自己吗？

Answer 2

请查看GoCart。它基于 CodeIgniter 和开源github-url。他们也有产品目录。检查他们的源代码，它可能会提供一些想法。