Can't get output cart using ajax, codeignier - php

Question

I've been struggling to create a shopping cart using ajax. I'm new to codeigniter and ajax but it seems the request from ajax is successful since the alert('success') in success:function is working. But I can't output data from the controller. At the place where I want to output cart I just get "welcome to xamp window" Could you tell me what I'm doing wrong?
Product view:
<?php if(count($data)): ?>
<?php foreach ($data as $item) { ?>
<div class="shop-item">
<div class="image">
<a href="<?php echo base_url(); ?>index.php/items/item1">
<img class="shop-item-image" src="<?php echo base_url("uploads/".$item->image) ?>" alt="Ariana Grande: thank u, next exclusive clear/pink lp"/>
</a>
<?php if($item->status=='sold'): ?>
<p class="sold-btn">Sold out</p>
<?php else: ?>
<button class="cart-btn" data-productid="<?php echo $item->id;?>" data-productartist="<?php echo $item->artist;?>"
data-producttitle="<?php echo $item->title;?>" data-productprice="<?php echo $item->price;?>" data-productimage="<?php echo $item->image;?>">
<i class="fa fa-shopping-cart"></i>Add to cart</button>
<?php endif; ?>
</div>
<a class="artist" href="#">
<div class="shop-item-details">
<span class="brand"><?php echo $item->artist; ?></span>
</div>
</a>
<div class="title">
<span class="format double-vinyl-lp"><?php echo $item->title; ?></span>
</div>
<div>
<span class="price">€<?php echo $item->price; ?></span>
</div>
</div>
<?php } ?>
<?php endif; ?>
</div>
Jquery
$(document).ready(function() {
$('.cart-btn').click(function () {
var product_id = $(this).data("productid");
var product_artist = $(this).data("productartist");
var product_title = $(this).data("producttitle");
var product_price = $(this).data("productprice");
var image = $(this).data("productimage");
var quantity = 1;
$.ajax({
url :'/index.php/cart/add_to_cart',
method : "POST",
data : {product_id: product_id, product_artist: product_artist, product_title: product_title, product_price: product_price, quantity:quantity, image:image},
success: function(data){
alert(product_artist);
$('#detail-cart').html(data);
},
});
});
$('#detail-cart').load("<?php echo site_url('index.php/cart/load_cart');?>");
})
Controller
public function add_to_cart() {
$data = array(
'id' => $this->input->post('product_id'),
'name' => $this->input->post('product_artist'),
'price' => $this->input->post('product_price'),
'qty' =>1
//'title'=>$this->input->$_POST('product_title'),
//'image'=>$this->input->$_POST('image')
);
$this->cart->insert($data);
print_r(($this->cart->total_items()));
echo $this->show_cart();
}
public function show_cart(){
$output = '';
$no = 0;
foreach ($this->cart->contents() as $items) {
$no++;
$output .='
<div>
<a href="">
<p>hello</p>
</a>
</div>
<div class="description">
<a class="artist" href="">'.$items['name'].'</a>
<p class="mini-total"><span>'.number_format($items['qty']).'</span>×<span>'.number_format($this->cart->total()).'</span></p>
remove
</div>
<div class="quantity">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-chevron-down"></i>
</div>
';
}
return $output;
}
public function load_cart(){
echo $this->show_cart();
}
}
cert view I want to display it in a different view as a part of the header
<div id="detail-cart" class="mini-cart-item">
</div>

Answer 1

I figured the problem. the problem was in url
url :'/index.php/cart/add_to_cart'
didn't work; neither:
url :'<?phph echo base_url();?>index.php/cart/add_to_cart
what i did was declaring :
<script>
base_url= '<?phph echo base_url();?>index.php/cart/add_to_cart'
</script>
and then set url as
url: base_url+'index.php/cart/add_to_cart'
and it worked;