今回は、Laravel でショッピングカートを作ろうと思います。ショッピングカートで問題になる点は、お客様がアカウント作ってから買い物を始めるとは限らない点です。アカウントを作ってからカートにアイテムを入れていくのなら話は単純です。 しかしアカウントなしでカートにアイテムを入れていくのにはセッション (session) という仕組みを使います。 セッションは、ショッピンサイトを運営しているサーバーとお客様がお使いのブラウザの間で一時的なアカウントを与える仕組みです。そのアカウントにはデータも保存できます。有効時間はデフォルトで2時間 (120分) です。
もう一つ必要になるのは、お客様がブラウザをリロードしなくても、商品がカートに入ったことを反映させる仕組みです。 これには Ajax というものを使います。
上記のセッションと Ajax の実装まで考えるとショッピングサイトの構築は大変複雑なものになります。そこで、セッションと Ajax の実装を最初からしてくれているライブラリがいくつかあります。今回は、その中でも Darryldecode/cart というのを使います。
任意の場所にプロジェクトを作ります。私は、ホームディレクトリに laravel というフォルダを作り、その中に、 いろいろなプロジェクトを作っています。
コマンドプロンプトもしくはターミナルを起動して、次のようにコマンドします。
# プロジェクト作成します
composer create-project laravel/laravel cart
# プロジェクトのディレクトリに移動します
cd cart
# プロジェクトを起動します
php artisan serve
# ブラウザで確認
お使いのブラウザで
localhost:8000
もしくは
127.0.0.1:8000
にアクセスすると Laravel のデフォルトぺージが表示されます。
ルーティング (Routing) とは、localhost:8000/ の / 以下のどのアドレスにアクセスすると、どのぺージが表示されるかを決めることです。ルーティングにはコントローラーが必要になりますので、先に CartController というのを作ります。 コントローラーにはモデルも記述しますので Product というモデルも作ります。このモデルはユーザー用のモデルではなく、 ショッピングサイトで販売する商品のモデルです。このモデルには -m (マイグレーションファイル) も作ります。 そして、今回はユーザー用のモデルは作りません。ユーザーのデータはあくまでもセッションに保存されます。 。
php artisan make:controller CartController
php artisan make:model Product -m
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()
{
return view('products');
}
}
routes / web.php を次のように書き換えます。これでルートにアクセスすると CartController の index メソッドが呼び出されます。
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CartController;
Route::get('/', [CartController::class, 'index'])->name('cart.index');
index メソッドで呼びだれてる products ビューを作成します。resource / views の中に products.blade.php というファイルを作り、次のように記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazoness</title>
</head>
<body>
<h1>Amazoness</h1>
</body>
</html>
localhost:8000 もしくは 127.0.0.1:8000 にアクセスして、Amazoness と表示されれば OK です。