Laravel Shopping Cart Tutorial| Add to Cart

This commit is contained in:
UronShrestha 2024-07-04 17:52:47 +05:45
parent f14a8026b5
commit 080094d2dd
5 changed files with 254 additions and 187 deletions

View File

@ -3,6 +3,7 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\User; use App\Models\User;
use App\Models\Cart;
use App\Models\Products; use App\Models\Products;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash; use Illuminate\Support\Facades\Hash;
@ -138,9 +139,19 @@ class MainController extends Controller
return view('blogDetails'); return view('blogDetails');
} }
public function cart() public function addToCart(Request $data)
{ {
return view('cart'); if (session()->has('id')) {
$item = new Cart();
$item->quantity = $data->input('quantity');
$item->productId = $data->input('id');
$item->customerId = session()->get('id');
$item->save();
return redirect()->back()->with('success', 'Item added to cart successfully!');
} else {
return redirect('/login')->with('error', 'Please login to add item to cart!');
}
} }
public function checkout() public function checkout()

11
app/Models/Cart.php Normal file
View File

@ -0,0 +1,11 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Cart extends Model
{
use HasFactory;
}

View File

@ -0,0 +1,31 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('carts', function (Blueprint $table) {
$table->id();
$table->integer('productId')->default(0);
$table->integer('customerId')->default(0);
$table->integer('quantity')->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('carts');
}
};

View File

@ -61,12 +61,12 @@
</div> </div>
<div class="tab-pane" id="tabs-3" role="tabpanel"> <div class="tab-pane" id="tabs-3" role="tabpanel">
<div class="product__details__pic__item"> <div class="product__details__pic__item">
<img src="img/shop-details/product-big.png" alt=""> <img src="{{ URL::asset('uploads/products/' . $products->picture) }}" alt="">
</div> </div>
</div> </div>
<div class="tab-pane" id="tabs-4" role="tabpanel"> <div class="tab-pane" id="tabs-4" role="tabpanel">
<div class="product__details__pic__item"> <div class="product__details__pic__item">
<img src="img/shop-details/product-big-4.png" alt=""> <img src="{{ URL::asset('uploads/products/' . $products->picture) }}" alt="">
<a href="https://www.youtube.com/watch?v=8PJ3_p7VqHw&list=RD8PJ3_p7VqHw&start_radio=1" <a href="https://www.youtube.com/watch?v=8PJ3_p7VqHw&list=RD8PJ3_p7VqHw&start_radio=1"
class="video-popup"><i class="fa fa-play"></i></a> class="video-popup"><i class="fa fa-play"></i></a>
</div> </div>
@ -76,194 +76,203 @@
</div> </div>
</div> </div>
</div> </div>
<div class="product__details__content"> <form action="{{ url::to('addToCart') }}" method="post">
<div class="container"> @csrf
<div class="row d-flex justify-content-center">
<div class="col-lg-8"> <div class="product__details__content">
<div class="product__details__text"> <div class="container">
<h4>{{ $products->name }}</h4> <div class="row d-flex justify-content-center">
<div class="rating"> <div class="col-lg-8">
<i class="fa fa-star"></i> <div class="product__details__text">
<i class="fa fa-star"></i> <h4>{{ $products->name }}</h4>
<i class="fa fa-star"></i> <div class="rating">
<i class="fa fa-star"></i> <i class="fa fa-star"></i>
<i class="fa fa-star-o"></i> <i class="fa fa-star"></i>
<span> - 5 Reviews</span> <i class="fa fa-star"></i>
</div> <i class="fa fa-star"></i>
<h3>NRs. {{ $products->price }} <span>4000.00</span></h3> <i class="fa fa-star-o"></i>
<p>{{ $products->description }}</p> <span> - 5 Reviews</span>
<div class="product__details__option">
<div class="product__details__option__size">
<span>Size:</span>
<label for="xxl">xxl
<input type="radio" id="xxl">
</label>
<label class="active" for="xl">xl
<input type="radio" id="xl">
</label>
<label for="l">l
<input type="radio" id="l">
</label>
<label for="sm">s
<input type="radio" id="sm">
</label>
</div> </div>
<div class="product__details__option__color"> <h3>NRs. {{ $products->price }} <span>4000.00</span></h3>
<span>Color:</span> <p>{{ $products->description }}</p>
<label class="c-1" for="sp-1"> <div class="product__details__option">
<input type="radio" id="sp-1"> <div class="product__details__option__size">
</label> <span>Size:</span>
<label class="c-2" for="sp-2"> <label for="xxl">xxl
<input type="radio" id="sp-2"> <input type="radio" id="xxl">
</label> </label>
<label class="c-3" for="sp-3"> <label class="active" for="xl">xl
<input type="radio" id="sp-3"> <input type="radio" id="xl">
</label> </label>
<label class="c-4" for="sp-4"> <label for="l">l
<input type="radio" id="sp-4"> <input type="radio" id="l">
</label> </label>
<label class="c-9" for="sp-9"> <label for="sm">s
<input type="radio" id="sp-9"> <input type="radio" id="sm">
</label> </label>
</div> </div>
</div> <div class="product__details__option__color">
<div class="product__details__cart__option"> <span>Color:</span>
<div class="quantity"> <label class="c-1" for="sp-1">
<div class="pro-qty"> <input type="radio" id="sp-1">
<input type="text" value="1"> </label>
<label class="c-2" for="sp-2">
<input type="radio" id="sp-2">
</label>
<label class="c-3" for="sp-3">
<input type="radio" id="sp-3">
</label>
<label class="c-4" for="sp-4">
<input type="radio" id="sp-4">
</label>
<label class="c-9" for="sp-9">
<input type="radio" id="sp-9">
</label>
</div> </div>
</div> </div>
<a href="#" class="primary-btn">add to cart</a> <div class="product__details__cart__option">
</div> <div class="quantity">
<div class="product__details__btns__option">
<a href="#"><i class="fa fa-heart"></i> add to wishlist</a> <input type="number" name="quantity" class="form-control" min="1"
<a href="#"><i class="fa fa-exchange"></i> Add To Compare</a> max="{{ $products->quantity }}" value="1">
</div> <input type="hidden" name="id" value="{{ $products->id }}">
<div class="product__details__last__option"> </div>
<h5><span>Guaranteed Safe Checkout</span></h5> <button type="submit" name="addToCart" class="primary-btn">Add to Cart</button>
<img src="img/shop-details/details-payment.png" alt="">
<ul> </div>
<li><span>SKU:</span> 3812912</li> <div class="product__details__btns__option">
<li><span>Categories:</span> Clothes</li> <a href="#"><i class="fa fa-heart"></i> add to wishlist
<li><span>Tag:</span> Clothes, Skin, Body</li> </a>
</ul> <a href="#"><i class="fa fa-exchange"></i> Add To Compare</a>
</div>
<div class="product__details__last__option">
<h5><span>Guaranteed Safe Checkout</span></h5>
<img src="{{ url::asset('img/shop-details/details-payment.png') }}" alt="">
<ul>
<li><span>SKU:</span> 3812912</li>
<li><span>Categories:</span> Clothes</li>
<li><span>Tag:</span> Clothes, Skin, Body</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-lg-12">
<div class="col-lg-12"> <div class="product__details__tab">
<div class="product__details__tab"> <ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tabs-5"
<a class="nav-link active" data-toggle="tab" href="#tabs-5" role="tab">Description</a>
role="tab">Description</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tabs-6" role="tab">Customer
<a class="nav-link" data-toggle="tab" href="#tabs-6" role="tab">Customer Previews(5)</a>
Previews(5)</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tabs-7" role="tab">Additional
<a class="nav-link" data-toggle="tab" href="#tabs-7" role="tab">Additional information</a>
information</a> </li>
</li> </ul>
</ul> <div class="tab-content">
<div class="tab-content"> <div class="tab-pane active" id="tabs-5" role="tabpanel">
<div class="tab-pane active" id="tabs-5" role="tabpanel"> <div class="product__details__tab__content">
<div class="product__details__tab__content"> <p class="note">Nam tempus turpis at metus scelerisque placerat nulla
<p class="note">Nam tempus turpis at metus scelerisque placerat nulla deumantos deumantos
solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis
ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo
pharetras loremos.</p> pharetras loremos.</p>
<div class="product__details__tab__content__item"> <div class="product__details__tab__content__item">
<h5>Products Infomation</h5> <h5>Products Infomation</h5>
<p>A Pocket PC is a handheld computer, which features many of the same <p>A Pocket PC is a handheld computer, which features many of the same
capabilities as a modern PC. These handy little devices allow capabilities as a modern PC. These handy little devices allow
individuals to retrieve and store e-mail messages, create a contact individuals to retrieve and store e-mail messages, create a contact
file, coordinate appointments, surf the internet, exchange text messages file, coordinate appointments, surf the internet, exchange text messages
and more. Every product that is labeled as a Pocket PC must be and more. Every product that is labeled as a Pocket PC must be
accompanied with specific software to operate the unit and must feature accompanied with specific software to operate the unit and must feature
a touchscreen and touchpad.</p> a touchscreen and touchpad.</p>
<p>As is the case with any new technology product, the cost of a Pocket PC <p>As is the case with any new technology product, the cost of a Pocket PC
was substantial during its early release. For approximately $700.00, was substantial during its early release. For approximately $700.00,
consumers could purchase one of top-of-the-line Pocket PCs in 2003. consumers could purchase one of top-of-the-line Pocket PCs in 2003.
These days, customers are finding that prices have become much more These days, customers are finding that prices have become much more
reasonable now that the newness is wearing off. For approximately reasonable now that the newness is wearing off. For approximately
$350.00, a new Pocket PC can now be purchased.</p> $350.00, a new Pocket PC can now be purchased.</p>
</div> </div>
<div class="product__details__tab__content__item"> <div class="product__details__tab__content__item">
<h5>Material used</h5> <h5>Material used</h5>
<p>Polyester is deemed lower quality due to its none natural qualitys. Made <p>Polyester is deemed lower quality due to its none natural qualitys. Made
from synthetic materials, not natural like wool. Polyester suits become from synthetic materials, not natural like wool. Polyester suits become
creased easily and are known for not being breathable. Polyester suits creased easily and are known for not being breathable. Polyester suits
tend to have a shine to them compared to wool and cotton suits, this can tend to have a shine to them compared to wool and cotton suits, this can
make the suit look cheap. The texture of velvet is luxurious and make the suit look cheap. The texture of velvet is luxurious and
breathable. Velvet is a great choice for dinner party jacket and can be breathable. Velvet is a great choice for dinner party jacket and can be
worn all year round.</p> worn all year round.</p>
</div>
</div> </div>
</div> </div>
</div> <div class="tab-pane" id="tabs-6" role="tabpanel">
<div class="tab-pane" id="tabs-6" role="tabpanel"> <div class="product__details__tab__content">
<div class="product__details__tab__content"> <div class="product__details__tab__content__item">
<div class="product__details__tab__content__item"> <h5>Products Infomation</h5>
<h5>Products Infomation</h5> <p>A Pocket PC is a handheld computer, which features many of the same
<p>A Pocket PC is a handheld computer, which features many of the same capabilities as a modern PC. These handy little devices allow
capabilities as a modern PC. These handy little devices allow individuals to retrieve and store e-mail messages, create a contact
individuals to retrieve and store e-mail messages, create a contact file, coordinate appointments, surf the internet, exchange text messages
file, coordinate appointments, surf the internet, exchange text messages and more. Every product that is labeled as a Pocket PC must be
and more. Every product that is labeled as a Pocket PC must be accompanied with specific software to operate the unit and must feature
accompanied with specific software to operate the unit and must feature a touchscreen and touchpad.</p>
a touchscreen and touchpad.</p> <p>As is the case with any new technology product, the cost of a Pocket PC
<p>As is the case with any new technology product, the cost of a Pocket PC was substantial during its early release. For approximately $700.00,
was substantial during its early release. For approximately $700.00, consumers could purchase one of top-of-the-line Pocket PCs in 2003.
consumers could purchase one of top-of-the-line Pocket PCs in 2003. These days, customers are finding that prices have become much more
These days, customers are finding that prices have become much more reasonable now that the newness is wearing off. For approximately
reasonable now that the newness is wearing off. For approximately $350.00, a new Pocket PC can now be purchased.</p>
$350.00, a new Pocket PC can now be purchased.</p> </div>
</div> <div class="product__details__tab__content__item">
<div class="product__details__tab__content__item"> <h5>Material used</h5>
<h5>Material used</h5> <p>Polyester is deemed lower quality due to its none natural qualitys. Made
<p>Polyester is deemed lower quality due to its none natural qualitys. Made from synthetic materials, not natural like wool. Polyester suits become
from synthetic materials, not natural like wool. Polyester suits become creased easily and are known for not being breathable. Polyester suits
creased easily and are known for not being breathable. Polyester suits tend to have a shine to them compared to wool and cotton suits, this can
tend to have a shine to them compared to wool and cotton suits, this can make the suit look cheap. The texture of velvet is luxurious and
make the suit look cheap. The texture of velvet is luxurious and breathable. Velvet is a great choice for dinner party jacket and can be
breathable. Velvet is a great choice for dinner party jacket and can be worn all year round.</p>
worn all year round.</p> </div>
</div> </div>
</div> </div>
</div> <div class="tab-pane" id="tabs-7" role="tabpanel">
<div class="tab-pane" id="tabs-7" role="tabpanel"> <div class="product__details__tab__content">
<div class="product__details__tab__content"> <p class="note">Nam tempus turpis at metus scelerisque placerat nulla
<p class="note">Nam tempus turpis at metus scelerisque placerat nulla deumantos deumantos
solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis
ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo
pharetras loremos.</p> pharetras loremos.</p>
<div class="product__details__tab__content__item"> <div class="product__details__tab__content__item">
<h5>Products Infomation</h5> <h5>Products Infomation</h5>
<p>A Pocket PC is a handheld computer, which features many of the same <p>A Pocket PC is a handheld computer, which features many of the same
capabilities as a modern PC. These handy little devices allow capabilities as a modern PC. These handy little devices allow
individuals to retrieve and store e-mail messages, create a contact individuals to retrieve and store e-mail messages, create a contact
file, coordinate appointments, surf the internet, exchange text messages file, coordinate appointments, surf the internet, exchange text messages
and more. Every product that is labeled as a Pocket PC must be and more. Every product that is labeled as a Pocket PC must be
accompanied with specific software to operate the unit and must feature accompanied with specific software to operate the unit and must feature
a touchscreen and touchpad.</p> a touchscreen and touchpad.</p>
<p>As is the case with any new technology product, the cost of a Pocket PC <p>As is the case with any new technology product, the cost of a Pocket PC
was substantial during its early release. For approximately $700.00, was substantial during its early release. For approximately $700.00,
consumers could purchase one of top-of-the-line Pocket PCs in 2003. consumers could purchase one of top-of-the-line Pocket PCs in 2003.
These days, customers are finding that prices have become much more These days, customers are finding that prices have become much more
reasonable now that the newness is wearing off. For approximately reasonable now that the newness is wearing off. For approximately
$350.00, a new Pocket PC can now be purchased.</p> $350.00, a new Pocket PC can now be purchased.</p>
</div> </div>
<div class="product__details__tab__content__item"> <div class="product__details__tab__content__item">
<h5>Material used</h5> <h5>Material used</h5>
<p>Polyester is deemed lower quality due to its none natural qualitys. Made <p>Polyester is deemed lower quality due to its none natural qualitys. Made
from synthetic materials, not natural like wool. Polyester suits become from synthetic materials, not natural like wool. Polyester suits become
creased easily and are known for not being breathable. Polyester suits creased easily and are known for not being breathable. Polyester suits
tend to have a shine to them compared to wool and cotton suits, this can tend to have a shine to them compared to wool and cotton suits, this can
make the suit look cheap. The texture of velvet is luxurious and make the suit look cheap. The texture of velvet is luxurious and
breathable. Velvet is a great choice for dinner party jacket and can be breathable. Velvet is a great choice for dinner party jacket and can be
worn all year round.</p> worn all year round.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -272,7 +281,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </form>
</section> </section>
<!-- Shop Details Section End --> <!-- Shop Details Section End -->
@ -287,7 +296,8 @@
<div class="row"> <div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6 col-sm-6">
<div class="product__item"> <div class="product__item">
<div class="product__item__pic set-bg" data-setbg="{{ url::asset('img/product/product-1.jpg') }}"> <div class="product__item__pic set-bg"
data-setbg="{{ url::asset('img/product/product-1.jpg') }}">
<span class="label">New</span> <span class="label">New</span>
<ul class="product__hover"> <ul class="product__hover">
<li><a href="#"><img src="{{ url::asset('img/icon/heart.png') }}" <li><a href="#"><img src="{{ url::asset('img/icon/heart.png') }}"
@ -326,7 +336,8 @@
</div> </div>
<div class="col-lg-3 col-md-6 col-sm-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6 col-sm-6">
<div class="product__item"> <div class="product__item">
<div class="product__item__pic set-bg" data-setbg="{{url::asset('img/product/product-2.jpg')}}"> <div class="product__item__pic set-bg"
data-setbg="{{ url::asset('img/product/product-2.jpg') }}">
<ul class="product__hover"> <ul class="product__hover">
<li><a href="#"><img src="{{ url::asset('img/icon/heart.png') }}" <li><a href="#"><img src="{{ url::asset('img/icon/heart.png') }}"
alt=""></a></li> alt=""></a></li>
@ -364,7 +375,8 @@
</div> </div>
<div class="col-lg-3 col-md-6 col-sm-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6 col-sm-6">
<div class="product__item sale"> <div class="product__item sale">
<div class="product__item__pic set-bg" data-setbg="{{url::asset('img/product/product-3.jpg')}}"> <div class="product__item__pic set-bg"
data-setbg="{{ url::asset('img/product/product-3.jpg') }}">
<span class="label">Sale</span> <span class="label">Sale</span>
<ul class="product__hover"> <ul class="product__hover">
<li><a href="#"><img src="{{ url::asset('img/icon/heart.png') }}" <li><a href="#"><img src="{{ url::asset('img/icon/heart.png') }}"

View File

@ -8,7 +8,9 @@ Route::get('/', [MainController::class, 'index']);
Route::get('/about', [MainController::class, 'about']); Route::get('/about', [MainController::class, 'about']);
Route::get('/blog', [MainController::class, 'blog']); Route::get('/blog', [MainController::class, 'blog']);
Route::get('/blogDetails', [MainController::class, 'blogDetails']); Route::get('/blogDetails', [MainController::class, 'blogDetails']);
Route::get('/cart', [MainController::class, 'cart']);
Route::post('/addToCart', [MainController::class, 'addToCart']);
Route::get('/checkout', [MainController::class, 'checkout']); Route::get('/checkout', [MainController::class, 'checkout']);
Route::get('/main', [MainController::class, 'main']); Route::get('/main', [MainController::class, 'main']);