Introducing the shopping cart
No real e-store without a shopping cart, so let’s implement one. First we get the shopping cart status and content to display them on the header of each page.
app/Http/Controllers/ShopController.php
<?php
$cart = ShoppingCart.get()
Then display the status and content of the shopping cart in the header of the main layout template layout.html
resources/views/layouts/default.blade.php
<<div class="cart box_1">
<h3> $<span id="cart_total" class="simpleCart_total"> {{ cart.total }} </span>
(<span id="cart_items_count" class="simpleCart_quantity"> {{ cart.count }} Items</span>)
<img src="/static/images/bag.png" alt="" /></h3>
<p><a href="/cart" class="simpleCart_empty">Your cart</a></p>
<div class="clearfix"> </div>
</div>
Add items the shopping cart
We use AJAX to make a HTTP POST to our backend call with information about the item to add to the shopping cart,
view js/cart.js file which contains the javascript AJAX code.
This is how to add the item to the cart, it is as simple as a single method call.
app/Http/Controllers/CartController.php
<?php
public function addItem(Request $request)
{
$productId = $request->input('product');
$quantity = (int)$request->input('quantity');
$cart = ShoppingCart::add($productId, $quantity);
return response()->json(['total' => $cart->total, 'count' => $cart->count]);
}
View the shopping cart
app/Http/Controllers/CartController.php
<?php
public function index()
{
return view('cart/index', array(
'cart' => ShoppingCart::get(),
'categories' => Category::findAll()
));
}
In a previous step (Introducing the shopping cart), we learned how to get the shopping cart, and displayed its status, Now all what we need is to write the view template to display full content of the shopping cart.
resources/views/cart/index.blade.php
<h2>MY SHOPPING CART </h2>
@if ( $cart->count <= 0)
<h1>No Items in your cart yet</h1>
@else
<div class="cart-gd">
@foreach($cart->items as $item)
<div class="cart-header" id="{{$item->id}}" >
<a href="#" class="close1 deleteItem" data-item-id="{{$item->id}}"> </a>
<div class="cart-sec simpleCart_shelfItem">
<div class="cart-item cyc">
<img src="{{$item->product->mainPhoto->url}}" class="img-responsive" alt="" />
</div>
<div class="cart-item-info">
<h3><a href="#"> {{$item->product->title}} </a></h3>
<div class="delivery">
<p><span>Unit Charges : $</span> <span>{{$item->unitPrice}}</span></p>
<div class="clearfix"></div>
<p><span>Quantity : </span> <span>{{$item->quantity}}</span></p>
<div class="clearfix"></div>
<p><span>Total price : $</span> <span>{{$item->total}}</span></p>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
@endforeach
<div style="margin-top: 50px; text-align: right;">
<a href="/orders/checkout" class="big_button">Checkout</a>
</div>
</div>
@endif
Delete items from the cart
Like the ‘add item’ operation, removing item is dome with AJAX call to the remove_from_cart method:
app/Http/Controllers/CartController.php
<?php
public function removeItem($id)
{
$cart = ShoppingCart::removeItem($id);
return response()->json(['total' => $cart->total, 'count' => $cart->count]);
}