Laravel | Cart | 商品ページの作成

ホーム

はじめの一歩

Todo チュートリアル

BBS チュートリアル

Ledger チュートリアル

Cart チュートリアル

サーバーの構築

付録

概要

2025年8月14日
スマホでも「カートに追加」ボタンをクリックしても、ページトップに戻らないようにしました。

ショッピングサイトの商品ページを作ります。完成図は次のようになります。

CartController の変更

app / Http / Controllers の CartController.php を次のように変更してください。


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Darryldecode\Cart\Facades\CartFacade as Cart;
use App\Models\Product;
use Illuminate\Testing\Constraints\SeeInOrder;
use Nette\Schema\Expect;

class CartController extends Controller
{
    public function index()
    {
        // ここから
        $products = Product::all();
        return view('products', compact('products'));
        // ここまで変更
    }
}

CSS ファイルの作成

public フォルダに style.css というファイルを作り、次のように記述してください。

2025年8月12日。
デザイン変更のたために、変更しました。


/*****************************
style.css
copyright    : vivacocoa.jp
last modified: Aug. 12, 2025
*****************************/

body {
    background-color: #ffffff;
    margin: 0;
}

.spc {
    display: flex;
    background-color: #000000;
}

.spc>div:nth-child(1) {
    text-align: left;
    width: 30%;
}

.spc>div:nth-child(2) {
    text-align: center;
    width: 40%;
}

.spc>div:nth-child(3) {
    text-align: right;
    width: 30%;
}

h1 {
    font-size: large;
    margin: 16px;
    color: #ffffff;
}

h1 a {
    color: #ffffff;
    text-decoration: none;
}

h1 a:hover {
    border: 1px #ffffff solid;
    padding: 8px px;
    margin: 0px;

}

#btn-cart {
    background-color: #ffd600;
    color: #000000;
    border: 0;
    border-radius: 16px;
    text-align: center;
    font-size: small;
    padding: 4px;
    width: 100px;
    margin: 16px;
    font-weight: bolder;

}

#container {
    margin-top: 16px;
    margin-left: 8px;
}

.d-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.product {
    margin: 8px;
    text-align: center;
}

.btn-yellow {
    background-color: #ffd600;
    border: 0;
    border-radius: 16px;
    text-align: center;
    font-size: small;
    margin-bottom: 8px;
    width: 85%;
    padding: 4px;
}

JavaScript の作成

2025年8月14日。
スマホでも「カートに追加」ボタンをクリックしても、ページトップに戻らないようにしました。

「カートに追加」ボタンなどをクリックすると、ページがリロードされて、表示位置がページトップに戻ってしまいます。大きな画面をお使いの場合は、それほど不便を感じないかもしれませんが、スマホなどの小さな画面では、非常に見にくくなります。それを止めるための JavaScritp です。

public フォルダに、staticposition.js というファイルを作って、次のように記述してください。


history.scrollRestoration = "manual";

window.addEventListener("load", () => {
    const scrollPosition = sessionStorage.getItem("scrollPosition");
    if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
    }
});

window.addEventListener("scroll", () => {
    sessionStorage.setItem("scrollPosition", window.scrollY.toString());
});

window.addEventListener("beforeunload", () => {
    sessionStorage.setItem("scrollPosition", window.scrollY.toString());
});

商品ページ

resources / views の products.blade.php を次のように書き換えてください。


{{----------------------------
products.blade.php
copyright    : vivacocoa.jp
last modified: Aug. 12, 2025
-----------------------------}}

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{url('style.css')}}">
    <script src="{{url('staticposition.js')}}"></script>
    <title>Amazoness</title>
</head>
<body>
    <div class="spc">
    <<div>
    <h1><a href="{{ route('cart.index') }}">AMAZONESS</a></h1>
    </div>
    <div></div>
    <div>
        <a href="#"><button type="button" id="btn-cart">
        カート [ 0 ]
        </button></a>
    </div>
    </div>
<div id="container">
<div class="d-flex">
@foreach ($products as $product)
<div class="product">
<img src="{{ $product->image }}">
<h4>{{$product->name}}</h4>
<p>{{$product->desc}}</p>
<p><small>&yen;</small>  {{number_format($product->price)}}  <small>税込</small></p>
<form>
@csrf
<input type="hidden" name="id" value="{{$product->id}}">
<input type="hidden" name="name" value="{{$product->name}}">
<input type="hidden" name="price" value="{{$product->price}}">
<input type="hidden" name="quantity" value="{{$product->quantity}}">
<input type="hidden" name="desc" value="{{$product->desc}}">
<button type="button" class="btn-yellow">カートに追加</button>
</form>
</div>
@endforeach
</div>
</div>
</body>
</html>

お使いのブラウザで、localhost:8000 もしくは 127.0.0.1:8000 にアクセスしてください。「カート」ボタンと「カートに追加」ボタンは、まだ機能していません。

3319 visits

Posted: Aug. 09, 2025

Update: Aug. 14, 2025

ホーム目次