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.
addtocart.php
, which doesn't exist. Your actual route is/add-to-cart
, as created in yourweb.php
routes. You should have absolutely no cart logic in your blade files, it should be in the controller..blade.php
files, but there are replacements.<?php if (...) { ?> ... <?php } ?>
can be written as@if(...) @endif
.<?php foreach(...) { ?> <?php } ?>
is@foreach(...) @endforeach
, etc. Follow some tutorials, read some documentation, and you'll get the hang of it 🙂