使用Jquery Ajax函数进行电子商务类别布局?怎么样?

时间:2012-10-18 01:24:53

标签: jquery json codeigniter e-commerce

我正在为我的客户构建一个自定义电子商务网站,我决定在选择选项时使用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成功请求中的所有上述代码。这是一个难以做到的事情吗?

2 个答案:

答案 0 :(得分:2)

我没有使用代码点火器,但我要做的是使用像胡子这样的模板引擎,并使用我想要显示的信息定义我的模板,然后将json传递给模板,然后使用jQuery渲染到屏幕。我解释了自己吗?

答案 1 :(得分:0)

请检查GoCart。它基于CodeIgniter和开源github-url。他们还有产品目录。检查他们的源代码,它可能会给你一些想法。