Shopping cart is an important part of an e-commerce website where user can choose item from product list for searching. Here user can add item, review it, change it or further add more items if required and buy the items.
In this shopping cart I have retrieve product list from database using AXIOS (Form validation in Vue Js) using vuejs. After retrieving data from api , display it on home page as product gallery. It has an option to add item into cart, update quantity into cart, remove item from cart, display cart items on checkout page and place an order.
For add , update , remove item from shopping cart I have used codeigniter inbuilt cart library. To consume the api developed in codeigniter I am using AXIOS library.
AXIOS is a library for http communication , making ajax request.
Why shopping cart are important.
| 1: Shopping cart bridge the gap between shopping and buying. |
| 2 : It offers convenience. |
| 3 : It stores product information. |
| 4 : It renders product data, categories and site information for user display. |
Options available in shopping cart:
| 1 : Retrieve product from api using AXIOS http library. |
| 2 : Create producut gallery page. |
| 3. Add product into cart. |
| 4 . Update quantity at the time of checkout. |
| 5 . Remove product from cart. |
| 6 . Place an order. |
Steps to implement shopping cart.
| 1. | Create controller named as product_controller.php within controllers folder. |
| 2. | Create model named as product_model.php within models folder. |
| 3. | Create view named as product_vue.php within views folder. |
1 : Create Controller.
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Product_controller extends CI_Controller{
public function index(){
$this->load->model('product_model');
$data['products'] = $this->product_model->findAll();
$this->load->view('product_vue', $data);
}
public function productDetails(){
$this->load->model('product_model');
$data = $this->product_model->findAll();
echo json_encode($data);
}
public function addToCart(){
$data = json_decode(file_get_contents("php://input"));
$id = $data->id;
$this->load->model('product_model');
$product = $this->product_model->find($id);
$this->load->library('cart');
$data = array(
'id' => $id,
'name' => $product->product_name,
'price' => $product->product_price,
'qty' => 1,
'image'=>$product->product_image
);
$this->cart->insert($data);
$this->cartCount();
}
public function cartCount(){
$no=0;
foreach ($this->cart->contents() as $item) {
$no+=$item['qty'];
}
echo $no;
}
public function showCartItems(){
$data = $this->cart->contents();
echo json_encode($data);
}
public function removeCart(){
$data = json_decode(file_get_contents("php://input"));
$rowid = $data->rowid;
$data = array(
'rowid' => $rowid,
'qty' => 0
);
$this->cart->update($data);
echo true;
}
public function updateCart(){
$data = json_decode(file_get_contents("php://input"));
$item = array(
'rowid'=>$data->rowid,
'qty'=> $data->qty
);
if ($this->cart->update($item)) {
echo true;
}else{
echo false;
}
}
} 2 : Create Model.
<?php
if (! defined('BASEPATH'))
exit('No direct script access allowed');
class product_model extends CI_Model{
function findAll() {
return $this->db->get('product')->result();
}
function find($id) {
return $this->db->where('id', $id)->get('product')->row();
}
} 3: Create View.
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container" id="app">
<table v-if="placeordersts"><tr><th><h4 style="color:red;">Order Summary</h4></th></tr></table>
<table class="table table-hover table-bordered" v-if="placeordersts">
<thead>
<tr>
<th>Product</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr v-for='data in cartData'>
<td><img :src="`http://localhost/ci_shopping_cart/assets/images/${data.image}.jpg`" height="50px" width="50px" class="img-responsive" ></td>
<td>{{ data.name }}</td>
<td>{{data.qty}}</td>
<td>{{data.price}}</td>
</tr>
</tbody>
</table>
<table v-if="placeordersts"> <tbody><tr><td><h4 style='color:red;'>Total Price:{{ totalprice }}</td></h4></tr></tbody>
</table>
<div class="row" v-if="productsts">
<h3 class="text-success"><center>Shopping Cart Example In Codeigniter Using VueJs</center></h3>
<h4 style='margin-left:85%;color:red;cursor:pointer' @click='cartDetails(1);'>Total Items : {{ item_count }}</h4>
<div class="col-sm-3" v-for='product in products'>
<article class="col-item">
<div class="photo">
<a href="#"> </a>
</div>
<img :src="`http://localhost/ci_shopping_cart/assets/images/${product.product_image}.jpg`" height="150px" />
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<h1>{{ product.product_name }}</h1>
<span class="price-new">{{ product.product_price }}</span>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart" ></i><a href="#" @click='addToCart(product.id);' class="hidden-sm">Add to cart</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</article>
</div>
</div>
<br><br>
<div class="row" v-if="cartsts">
<div class="col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<div class="row">
<div class="col-xs-6">
<h5><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</h5>
</div>
<div class="col-sm-3">
<button @click='contShop();' type="button" class="btn btn-primary btn-sm btn-block pull-right">
<span class="glyphicon glyphicon-share-alt" ></span> Continue shopping
</button>
</div>
</div>
</div>
</div>
<div class="panel-body" >
<div class="row table table-bordered" v-for='data in cartData'>
<div class="col-xs-2">
<img :src="`http://localhost/ci_shopping_cart/assets/images/${data.image}.jpg`" class="img-responsive" >
</div>
<div class="col-xs-4">
<h4 class="product-name"><strong>{{ data.name }}</strong></h4>
</div>
<div class="col-xs-6">
<div class="col-xs-6 text-right">
<h6><strong>{{ data.price }}<span class="text-muted">x</span></strong></h6>
</div>
<div class="col-xs-4">
<input @change='cartUpdate($event,data);' type="text" class="form-control input-sm" :value="data.qty">
</div>
<div class="col-xs-2">
<button @click='removeCart(data.rowid);'type="button" class="btn btn-link btn-xs">
<span class="glyphicon glyphicon-trash" style='color:red'> </span>
</button>
</div>
</div>
</div>
<h4 v-if="totalprice==0">Cart Is Empty</h4>
<hr>
<div class="panel-footer">
<div class="row text-center">
<div class="col-xs-9">
<h4 class="text-right" v-if="totalprice>0">Total <strong>INR {{ totalprice }}</strong></h4>
</div>
<div class="col-xs-3">
<button @click='placeOrder();' v-if="totalprice>0" type="button" class="btn btn-success btn-block">
Plcae Order
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<footer><center><h6 style='color:brown'><b>PHP4EVER</h5></footer>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
products: '',
item_count:0,
cartData:'' ,
cartsts:false,
productsts:true,
totalprice:0,
placeordersts:false
},
methods: {
getproducts: function(){
axios.get('<?php echo site_url();?>/product/productDetails', {})
.then(function (response) {
app.products = response.data;
console.log(app.products);
});
},
addToCart: function(id){
axios.post('<?php echo site_url();?>/product/addToCart', {
id: id
})
.then(function (response) {
app.showCart();
})
.catch(function (error) {
console.log(error);
});
},
showCart: function(){
axios.get('<?php echo site_url();?>/product/cartCount')
.then(function (response) {
app.item_count = response.data;
});
},
cartDetails:function(sts){
if(sts==1){
app.cartsts=true;
}
app.productsts=false
axios.get('<?php echo site_url();?>/product/showCartItems', {})
.then(function (response) {
app.cartData = response.data;
Object.entries(response.data).forEach(([key, val]) => {
let price = val.price*val.qty;
app.totalprice = app.totalprice+price;
});
console.log(app.cartData);
});
},
contShop:function(){
app.cartsts=false;
app.productsts=true;
app.showCart();
},
removeCart: function(id){
axios.post('<?php echo site_url();?>/product/removeCart', {
rowid: id
})
.then(function (response) {
alert('Cart Updated');
app.totalprice=0;
app.cartDetails(1);
})
.catch(function (error) {
console.log(error);
});
},
cartUpdate:function(event,obj){
axios.post('<?php echo site_url();?>/product/updateCart', {
rowid : obj.rowid,
qty : event.target.value
})
.then(function (response) {
app.totalprice=0;
app.cartDetails(1);
})
.catch(function (error) {
console.log(error);
});
},
placeOrder(){
app.placeordersts=true;
app.cartsts=false;
app.totalprice=0;
app.cartDetails(0);
}
},
created: function(){
this.getproducts();
this.showCart();
}
});
</script>
Hi,
Can you please share cart library file content?
Appreciate the post and the sample project. It is very helpful.
Thank you,
Sam
It’s CodeIgniter inbuilt library so you can refer it’s documentation.