laravel8_LaravelShoppingCart - hpscript/laravel GitHub Wiki

<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 ref="size" 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 ref="qty" type="number" class="form-control" min="0" value="0">
							</p>
						</div>
						<div class="card-footer text-right">
							<button type="button" class="btn btn-info" @click="addCart(index)">カートへ入れる</button>
						</div>
					</div>
					<br>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/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;
    					});
    			},
    			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: 2,
    						qty: qty,
    						productId: product.id
    					};
                        
    					axios.post(url, params)
    						.then(function(response){
    							self.cartItems = response.data;
    						});
                        // var obj = JSON.parse(JSON.stringify(self.cartItems))
                        // var ids = Object.keys(obj)
                        // console.log(obj[ids[3]]['options']['size']);
    				}
    			},
                getCarts: function(){
                    var self = this;
                    axios.get('/ajax/carts')
                        .then(function(response){
                            self.cartItems = response.data.items;
                        })
                }
    		},
    		mounted: function(){
    			this.getProducts();
                this.getCarts();
    		}
    	});

    </script>

public function index()
    {
        //
        return [
            'items'=>\Cart::content(),
            'subtotal'=>\Cart::subtotal(),
            'tax'=>\Cart::tax(),
            'total'=>\Cart::total(),
        ];
    }

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