如何在没有刷新页面的情况下将产品添加到购物车

时间:2019-04-12 05:25:08

标签: php ajax codeigniter-3

当我尝试单击添加到购物车按钮页面时,我正在使用php,ajax和javascript。请帮助添加到购物车而不刷新页面 有人可以看看我的ajax和addtocart.php

php,ajax,mysql,javascript

<?php 
if(!empty($cart_data)){

    foreach($cart_data as $row){
    ?>

    <div class="product-item">
        <div class="pi-pic">
            <img src="<?= $row->image ?>" alt="">

            <div class="pi-links">
                <a href="#" onclick="addtocart(<?= $row->id ?>)" class="add-card"><i class="flaticon-bag" ><span>ADD TO CART</span></i></a>

                <a href="#" class="wishlist-btn"><i class="flaticon-heart"></i></a>

            </div>
        </div>

        <div class="pi-text">

            <h6>Rs<?= $row->price ?></h6>
            <strike>Rs<?= $row->oldprice ?></strike> 
            <p><?= $row->name ?> </p>

        </div>
    </div>

    <?php
    }
}
?>

function addtocart(id){        
    if(id != ""){
        $.ajax({
            url:'<?php echo base_url(); ?>home/addtocart',
            type:'POST',
            dataType:'json',
            data:{ 
                'id' : id 
            },

            success: function(data) {
                $('.count').html(data.count);
                //location.reload();
            }
        });
    } else {
        return false;
    }

    return false;
}

控制器功能


    public function addtocart(){
    $id = $_POST['id'];
    $cart_data=$this->Cart->get_cart($id);
    $cart_data = json_decode( json_encode($cart_data), true);
     $data = array('id' => $id,'qty' => 1,'price' => $cart_data[0]["price"],'name' => $cart_data[0]["name"],'title' => $cart_data[0]["name"],'image'=> $cart_data[0]["image"],'code'    => $cart_data[0]["code"],'description'=> $cart_data[0]["description"],);$cart_row = $this->cart->insert($data);
        $cart = array_values($this->cart->contents($cart_row));
    $data = array('status' => 'Success','count'=>$this->cart->total_items(),);
    echo json_encode($data);
    }

1 个答案:

答案 0 :(得分:0)

我们将更改您的Ajax提交流程。

在下面替换您的html锚标记。并在文件中添加jquery代码。

<a href="javascript:" data-id="<?= $row->id ?>" class="add-card"><i class="flaticon-bag" ><span>ADD TO CART</span></i></a>


$(document).on('click','.add-card',function(e){
e.preventDefault();
var id=$(this).data('id');
addtocart(id);
});

我在您的锚标签的数据ID中设置了ID。并删除onclick函数。并在您的href中设置javascript:。

然后在脚本中添加jquery块,以阻止锚标记活动。并使用我们从此参数获取的ID调用addtocart()函数。

请尝试上述解决方案,希望它能起作用。