如何在沒有刷新頁面的情況下將產品添加到購物車

Question

當我試圖點擊添加到購物車按鈕頁面重新加載，我使用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);
    }

Answer 1

我們將改變你的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（）函數。

請嘗試以上解決方案，希望它會起作用。