I've been trying to direct the add to cart button on the home page of the website(for online shopping) to the addtocart file and the shopping cart. I just can't seem to find what's wrong. Here are the codes.
home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StyleSync Home Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="logo">
<img src="logo_no_name.png" alt="Logo">
</div>
<ul class="nav-links">
<li><a href="index.php">Home</a></li>
<li><a href="shoppingcart.php">Shopping Cart</a></li>
<li><a href="ootdposts.php">OOTD Posts</a></li>
<li><a href="settings.php">Settings</a></li>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="faqs.php">FAQs</a></li>
</ul>
</div>
</nav>
<div class="container">
<main>
<section class="banner">
<div class="banner-content">
<h1>Welcome to Online Shopping!</h1>
<p>Discover the latest trends and exclusive deals.</p>
</div>
</section>
<section class="featured-products">
<h2>Featured Products</h2>
<div class="product-card">
<img src="item1.jpg" alt="Product 1">
<h3>Product Name</h3>
<p>$99.99</p>
<form action="{{ route('addtocart') }}" method="post">
<input type="hidden" name="product_id" value="1">
<button type="submit">Add to Cart</button>
</form>
</div>
<!-- More product cards -->
</section>
</main>
</div>
<div class="footer-container">
<footer>
<p>© 2024 Online Shopping. All rights reserved.</p>
</footer>
</div>
</body>
</html>
shoppingcart.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopping Cart Page</title>
<link rel="stylesheet" href="StyleNavBar.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="logo">
<img src="logo_no_name.png" alt="Logo">
</div>
<ul class="nav-links">
<li><a href="{{ route('dashboard') }}">Dashboard</a></li>
<li><a href="{{ route('home') }}">Home</a></li>
<li><a href="{{ route('shoppingcart') }}">Shopping Cart</a></li>
<li><a href="{{ route('OOTDposts') }}">OOTD Posts</a></li>
<li><a href="{{ route('settings') }}">Settings</a></li>
<li><a href="{{ route('aboutus') }}">About Us</a></li>
<li><a href="{{ route('FAQs') }}">FAQs</a></li>
</ul>
</div>
</nav>
<div class="main-container">
<h1>Shopping Cart</h1>
<?php if (empty($cart)): ?>
<p>Your cart is empty.</p>
<?php else: ?>
<ul>
<?php foreach ($cart as $product_id => $quantity): ?>
<li>Product ID: <?php echo $product_id; ?> - Quantity: <?php echo $quantity; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
</body>
</html>
addtocart.blade.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$product_id = $_POST['product_id'];
// Initialize the cart if it doesn't exist
if (!isset($_SESSION['cart'])) {
$_SESSION['cart'] = [];
}
// Add product to cart
if (isset($_SESSION['cart'][$product_id])) {
$_SESSION['cart'][$product_id]++;
} else {
$_SESSION['cart'][$product_id] = 1;
}
// Redirect to shopping cart page
header('Location: shoppingcart.php');
exit;
}
?>
web.php
Route::get('/home',[HomeController::class, 'home'])->name('home');
Route::get('/shoppingcart', [CartController::class, 'showcart'])->name('shoppingcart');
Route::post('/addtocart', [CartController::class, 'addtocart'])->name('addtocart');
CartController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CartController extends Controller
{
public function addtocart(Request $request)
{
$product_id = $request->input('product_id');
$cart = session()->get('cart', []);
if(isset($cart[$product_id])) {
$cart[$product_id]++;
} else {
$cart[$product_id] = 1;
}
session(['cart' => $cart]);
return redirect()->route('shoppingcart');
}
public function showcart()
{
$cart = session('cart', []);
return view('shoppingcart', compact('cart'));
}
}
Supposedly, when a user clicks the add to cart button on the home page, it redirects to the shopping cart page.
Your form doesn't have the right action, it should use the route()
helper:
<form action="{{ route('addtocart') }}" method="post">
addtocart.blade.php
isn't needed because that's covered by the addtocart
method in your CartController
And you can get rid of the session start part at the top of the shoppingcart.blade.php
, because the framework already starts the session and you pass the $cart
to the blade view.
The rest looks okay to me.