***This Bootstrap 5 Version of the post is identical to the previous version other part the from the view display.blade.php which is formatted to use the flexbox-based grid approach which is available in Bootstrap 4 and 5***
In this series of posts we are going to build a simple shopping cart application. To do this we will depart from the tennis club application we have been building and create a new laravel application. Follow the steps from the getting started section to create a new laravel application and ensure the Infyom generator is included. Once that's done you can return to this point and get started building a shop window.
A shopping cart is probably the most regularly requested functionality for any website. The requirements are as follows:
There are a wide range of shopping cart plugins available in a variety of different technologies. Having conducted a review of these I decided the best approach would be to build a simple cart from scratch. This will show off some of the easy-to-use features of both Larvel and Twitter Bootstrap.
The application will be built on a "minimum viable product" basis. This should make it easy to understand and straightforward to adapt.
- A shop window grid, this is commonly understood by online shoppers as a grid with pictures of the items for sale
- The ability to add items to the cart and have the cart persist in the session. The users need to know that any items added to the cart will remain there even if they visit another page. If a second instance of the same item is added to the cart the cart should record that the quantity of that product in the cart has increased by one. I.e. The cart should handle the quantity of each product requested.
- The shopping window grid page should also have the ability to empty the cart at any stage
- The ability to checkout. When the shopper has everything they need they should be able to go ahead and visit the checkout page to place the order.
- The checkout page should also have the ability to add or remove items from the cart before the order is placed.
To get started with the example we need a database that will handle a many to many relationship between orders and products. The product in this example is sportswear. The following script will create the database and some test data.
drop database if exists shoppingcart;
create database shoppingcart;
use shoppingcart;
create table product (
id int auto_increment,
name varchar(30),
description varchar(30),
colour varchar(30),
price decimal(18,3),
image varchar(30),
created_at datetime,
updated_at datetime,
deleted_at datetime,
primary key(id)
);
create table scorder (
id int auto_increment,
orderdate datetime,
deliverystreet varchar(30),
deliverycity varchar(30),
deliverycounty varchar(30),
ordertotal decimal(18,3),
created_at datetime,
updated_at datetime,
deleted_at datetime,
primary key(id)
);
create table orderdetail (
id int auto_increment,
productid int,
orderid int,
quantity int,
subtotal decimal(18,3),
created_at datetime,
updated_at datetime,
deleted_at datetime,
primary key(id),
foreign key(productid) references product(id),
foreign key(orderid) references scorder(id)
);
insert into product(name, description, colour, price, image) values ("T-Shirt", "Crew Neck", "Green", 8.00, "greenCrewNeckTshirt.jpg");
insert into product(name, description, colour, price, image) values ("Sweatshirt", "V Neck", "Blue", 20.00, "blueVNecksweatshirt.jpg");
insert into product(name, description, colour, price, image) values ("Hoodie", "Comfort Fit", "Red", 25.00, "redHoodie.jpg");
insert into product(name, description, colour, price, image) values ("T-Shirt", "Crew Neck", "Red", 8.00, "redCrewNeckTshirt.jpg");
insert into product(name, description, colour,price, image) values ("Sweatshirt", "V Neck", "Yellow", 20.00, "yellowVNeckSweatshirt.jpg");
insert into product(name, description, colour,price, image) values ("Hoodie", "Comfort Fit", "Blue", 25.00, "blueHoodie.jpg");
insert into product(name, description, colour, price,image) values ("T-Shirt", "Crew Neck", "Purple", 8.00, "purpleCrewNeckTshirt.jpg");
insert into product(name, description, colour, price,image) values ("Sweatshirt", "V Neck", "Red", 20.00, "redVNeckSweatshirt.jpg");
insert into product(name, description, colour,price, image) values ("Hoodie", "Comfort Fit", "Orange", 25.00, "orangeHoodie.jpg");
insert into scorder(orderdate,deliverystreet,deliverycity,deliverycounty) values ("2018-01-05 10:05:00","1 Main Street", "Blanchardstown", "Dublin");
insert into scorder(orderdate,deliverystreet,deliverycity,deliverycounty) values ("2018-01-07 17:15:00","25 High Street", "Lucan", "Dublin");
insert into scorder(orderdate,deliverystreet,deliverycity,deliverycounty) values("2018-01-05 10:05:00","19 New Road", "Finglas", "Dublin");
insert into orderdetail(productid,orderid,quantity) values (1,2,2);
insert into orderdetail(productid,orderid,quantity) values (1,2,2);
Now that you have created your database - go ahead and change your database credentials in the .env file in the shoppingcart folder so that they now point to your new database.
Now that your project points to your new database you can go ahead and scaffold each of the three tables above.
The following zip archive contains sample pictures of sportswear to accompany the example. Download the file. Save all the pictures inside the archive to the public/img folder within your application folder.
Theses will be the images in our shop window display. Before we can get our shop window working we need to add a Controller function and a corresponding route. Add the following function to app\Http\Contollers\productController
public function displayGrid(Request $request)
{
$products=\App\Models\Product::all();
return view('products.displaygrid')->with('products',$products);
}
To make this function work we need a corresponding route in the routes/web.php file. Edit that file and add the following line
Route::get('products/displaygrid', 'App\Http\Controllers\productController@displaygrid')->name('products.displaygrid');
The standard BREAD routes that the scaffolder has generated may cause conflicts with the routes we will add during the course of the project. Given this, comment out the line in the web.php file which adds the standard bread routes by adding a double slash // in front of the line.
//Route::resource('products', 'productController');
Now, finally, we are ready to add the displaygrid view which corresponds to that controller action. Save the following code to a file called resources/views/products/displaygrid.blade.php
@extends('layouts.app')
@section('content')
@include('flash::message')
<div class='d-flex flex-wrap align-content-start bg-light'>
@foreach($products as $product)
<div class="p-2 border col-4 g-3">
<div class="card text-center">
<div class="card-header d-block"><h5 class="mx-auto d-block">{{ $product->name }} {{ $product->description }}</h5></div>
<div class="card-body"><img style="width:65%;height:200px;" class="mx-auto d-block" src="{{ asset('/img/' . $product->image)}}"/></div>
<div class="card-footer"><button id="addItem" type="button" class="btn btn-success mx-auto d-block addItem" value="{{$product->id}}">Add To Cart</button></div>
</div>
</div>
@endforeach
</div>
@endsection('content')
Now to test your application (make sure to run php artisan serve) to get your webserver running). Visit http://localhost:8000/products/displaygrid. You should see the following view.
