[Laravel8.12.3]shoppingcart (bumbummen99) を実装する1

LaravelShoppingcartというlibraryがあるそうだが、laravel5.4までしか対応していないらしい。
gloudemans/shoppingcart

という事で、以下のlibraryを入れる。
bumbummen99/LaravelShoppingcart

$ composer require bumbummen99/shoppingcart
$ php artisan vendor:publish –provider=”Gloudemans\Shoppingcart\ShoppingcartServiceProvider” –tag=”config”

config/cart.phpが追加される

config/app.php

// Autoloaded Service Providers
Gloudemans\Shoppingcart\ShoppingcartServiceProvider::class,
// Class Aliases
Gloudemans\Shoppingcart\ShoppingcartServiceProvider::class,

config/cart.php

'tax' => 10,
'format' => [

        'decimals' => 0,

        'decimal_point' => '',

        'thousand_separator' => ',',

    ],

### productsテーブル作成
$ php artisan make:model Product -m

2020_11_09_214306_create_products_table.php

    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('amount');
            $table->text('sizes');
            $table->timestamps();
        });
    }

$ php artisan migrate
mysql> describe products;
+————+—————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————+—————–+——+—–+———+—————-+
| id | bigint unsigned | NO | PRI | NULL | auto_increment |
| name | varchar(255) | NO | | NULL | |
| amount | varchar(255) | NO | | NULL | |
| sizes | text | NO | | NULL | |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
+————+—————–+——+—–+———+—————-+
6 rows in set (0.01 sec)

app/Models/Product.php

class Product extends Model
{
    use HasFactory;

    protected $fillable = ['name','amount','sizes'];

    protected $casts = [
    	'sizes' => 'json'
    ];

}

### Seeder
$ php artisan make:seeder ProductsTableSeeder
database/seeders/ProductsTableSeeder.php

    public function run()
    {
        for($i=1;$i<=25; $i++){
        	$product = new \App\Models\Product();
        	$product->name = $i.'番目の商品名';
        	$product->amount = array_rand([500, 1000, 1500]);
        	$product->sizes = array_rand([
        		['M'],
        		['M', 'L'],
        		['S', 'M', 'L']
        	]);
        	$product->save();
        }
    }

$ php artisan db:seed

mysql> select * from products;
+—-+———————-+——–+——-+———————+———————+
| id | name | amount | sizes | created_at | updated_at |
+—-+———————-+——–+——-+———————+———————+
| 1 | 1番目の商品名 | 1 | 1 | 2020-11-09 22:34:45 | 2020-11-09 22:34:45 |
| 2 | 2番目の商品名 | 0 | 0 | 2020-11-09 22:34:45 | 2020-11-09 22:34:45 |
| 3 | 3番目の商品名 | 1 | 2 | 2020-11-09 22:34:45 | 2020-11-09 22:34:45 |
| 4 | 4番目の商品名 | 2 | 1 | 2020-11-09 22:34:45 |
// 省略
+—-+———————-+——–+——-+———————+———————+
25 rows in set (0.00 sec)

### routing
routes/web.php

use App\Http\Controllers\Ajax\ProductController;
use App\Http\Controllers\Ajax\CartController;
use App\Http\Controllers\ProductController;
use App\Http\Controllers\CartController;

Route::get('products', [ProductController::class, 'index']);
Route::get('carts', [PostController::class, 'index']);
Route::resource('ajax/products', ProductController::class)->only(['index']);
Route::resource('ajax/carts', CartController::class)->only(['index','store','destroy']);

$ php artisan make:controller ProductController
$ php artisan make:controller CartController
$ php artisan make:controller Ajax\\ProductController –resource
$ php artisan make:controller Ajax\\CartController –resource

### Controller
app/Http/Cotnrollers/Ajax/ProductController.php

 public function index()
    {
        //
        return \App\Models\Product::get();
    }

$ php artisan serve –host 192.168.33.10 –port 8000
http://192.168.33.10:8000/ajax/products

### viewの作成
resources/views/products/index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="padding-top: 10px">
	<div id="app">
		<div class="container">
			<div class="float-right">
				カートの中身: <span class="badge badge-pill badge-pill" v-text="Object.keys(cartItems).lenght"></span> 個
			</div>
			<h1>商品一覧</h1>
			<div class="row">
				<div v-for="(product,index) in products" class="col-sm-4">
					<div class="card border-info">
						<div class="card-body">
							<h5 class="card-title" v-text="product.name"></h5>
							<p class="card-text">
								<label>サイズ:</label>
								<select class="form-control">
									<option v-for="size in product.sizes" :value="size" v-text="size"></option>
								</select>
							</p>
							<p class="card-text">
								<label>個数:</label>
								<input type="number" class="form-control" min="0" value="0">
							</p>
						</div>
						<div class="card-footer text-right">
							<button type="button" class="btn btn-info">カートへ入れる</button>
						</div>
					</div>
					<br>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			products: [],
    			cartItems: {}
    		},
    		methods: {
    			getProducts: function(){
    				var self = this;
    				axios.get('http://192.168.33.10:8000/ajax/products')
    					.then(function(response){
    						self.products = response.data;
    					});
    			}
    		},
    		mounted: function(){
    			this.getProducts();
    		}
    	});

    </script>
</body>
</html>

addCart

<select ref="size" class="form-control">
//
<input ref="size" type="number" class="form-control" min="0" value="0">
//
<button type="button" class="btn btn-info" @click="addCart(index)">カートへ入れる</button>
//
addCart: function(index){
    				if(confirm('カートへ追加します。よろしいですか?')){
    					var self = this;
    					var size = this.$refs.size[index].value;
    					var qty = this.$refs.qty[index].value;
    					var product = this.products[index];

    					var url = '/ajax/carts';
    					var params = {
    						size: size;
    						qty: qty,
    						productId: product.id
    					};
    					axios.post(url, params)
    						.then(function(response){
    							self.cartItems = response.data;
    						});
    				}
    			}

app/Http/Cotnrollers/Ajax/CartController.php

public function store(Request $request)
    {
        //
        $product = \App\Models\Product::find($request->product_id);
        \Cart::add(
            $product->id,
            $product->name,
            $request->qty,
            $product->amount,
            ['size' => $request->size]
        );
        return \Cart::content();
    }

ん? 上手くいかない。。