How do I get my show cart item counter to be ajax in Codeigniter? - ajax

Question

sorry for being a newbie, if someone may point me to the right direction to solve my issue I would be super grateful.
I have created a cart system using codeigniter 3's deprecated library and with AJAX am able to do the usual add item to cart, remove item from cart, show item quantity in cart, ONLY IN the table of the renderred datatable.
My issue is at my header I have a cart counter that shows a number to display the number of items in the cart. As I call it currently it is not using AJAX and is showing the number of items in the cart after a refresh or redirect. I want it to be AJAX like it's counterpart at the datatable instead of showing the correct number only after a refresh.
Attached is the portion of the code I believe to be relevant
Controller
defined('BASEPATH') OR exit('No direct script access allowed');
class Products extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model('products_model');
$this->load->model('products_category_model');
$this->load->model('products_subcategory_model');
$this->load->model('products_price_model');
$this->load->library('pagination');
$this->load->database();
$this->load->helper('url');
}
public function lists($slug="") {
// $locale = $this->session->userdata('site_lang');
$config = array();
$config['base_url'] = base_url() . 'products';
$config['total_rows'] = $this->products_model->get_count();
$config['per_page'] = 3;
$config['uri_segment'] = 2;
$config['num_links'] = 2;
$config['first_link'] = '<span style="letter-spacing:1px; margin-right: 20px;"> First </span>';
$config['last_link'] = '<span style="letter-spacing:1px;"> Last </span>';
$config['use_page_numbers'] = FALSE;
$config['next_link'] = '<i class="fas fa-long-arrow-alt-right"></i>';
$config['prev_link'] = '<i class="fas fa-long-arrow-alt-left"></i>';
$this->pagination->initialize($config);
$page = ($this->uri->segment(2))? $this->uri->segment(2) : 0;
$data['products_count'] = count($this->products_model->getList());
$data['links'] = $this->pagination->create_links();
$data['records'] = $this->products_model->getActiveProductPriceList($config['per_page'], $page);
$data['category'] = $this->products_category_model->getActiveList();
$data['subcategory'] = $this->products_subcategory_model->getActiveList();
$this->load->view('include/head',$data);
$this->load->view('products', $data);
// custom JS needed for cart functionality
// $this->load->view('include/footer');
}
function add_to_cart() {
if($this->session->userdata('site_lang') == 'en'){
$name = $this->input->post('title_en');
} else {
$name = $this->input->post('title_zh');
}
$data = array(
'id' => $this->input->post('id'),
'qty' => 1,
'price' => $this->input->post('discount_price'),
'name' => $name,
'thumbnail' => $this->input->post('thumbnail'),
);
$this->cart->insert($data);
echo $this->show_cart();
}
function show_cart(){
$output = '';
$no = 0;
foreach ($this->cart->contents() as $items) {
$no++;
$output .='
<tr>
<td>'.$items['name'].'</td>
<td><img src="'.$items['thumbnail'].'"></td>
<td>'.number_format($items['price']).'</td>
<td>'.$items['qty'].'</td>
<td>'.number_format($items['subtotal']).'</td>
<td><button type="button" id="'.$items['rowid'].'" class="remove_cart btn btn-danger btn-sm">Cancel</button></td>
</tr>
';
}
$output .= '
<tr>
<th colspan="3">Total</th>
<th colspan="1">'.number_format($this->cart->total_items()).'</th>
<th colspan="2">'.'RM '.number_format($this->cart->total()).'</th>
</tr>
';
return $output;
}
function load_cart(){
echo $this->show_cart();
}
}
View
<div class="col-md-4">
<h4>Shopping Cart</h4>
<table class="table table-striped">
<thead>
<tr>
<th>Items</th>
<th>Thumbnail</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="product_detail_cart"></tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.add_product_to_cart').click(function(){
var id = $(this).data("id");
var thumbnail = $(this).data("thumbnail")
var title_en = $(this).data("title_en");
var title_zh = $(this).data("title_zh");
var discount_price = $(this).data("discount_price");
var quantity = 1;
$.ajax({
url : "<?php echo base_url('products/add_to_cart');?>",
method : "POST",
data : {id: id, thumbnail: thumbnail, title_en: title_en, title_zh: title_zh,discount_price: discount_price, quantity: quantity},
success: function(data){
$('#product_detail_cart').html(data);
}
});
});
$('#product_detail_cart').load("<?php echo base_url('products/load_cart');?>");
$(document).on('click','.remove_cart',function(){
var row_id=$(this).attr("id");
$.ajax({
url : "<?php echo base_url('products/delete_cart');?>",
method : "POST",
data : {row_id : row_id},
success :function(data){
$('#product_detail_cart').html(data);
}
});
});
});
</script>
How I'm calling it at header
<i class="fas fa-shopping-cart"></i>
<span class="count" id="product_detail_cart_count">
<?php
if (!empty($this->cart->contents())) {
echo number_format($this->cart->total_items());
} else {
print 0;
}
?>
</span>
Thank you again

Answer 1

I figured out what was missing, what I needed to do is to assign an id/div to the specific part of the view page I need to refresh and just refresh it using jquery
$(document).on('click','.remove_cart',function(){
var row_id=$(this).attr("id");
$.ajax({
url : "<?php echo base_url('products/delete_cart');?>",
method : "POST",
data : {row_id : row_id},
success :function(data){
$('#product_detail_cart').html(data);
$('#cart-counter').load(location.href + " #cart-counter");
}
});
});
The #cart-counter is the id i refreshed using the load(location.href + " #cart-counter");