Make bootstrap modal 创建一个要添加到列表中的对象

Question

在我的 Laravel 项目中，我有以下模型：

Product（'name' 字符串，'amount' 整数和 'price' 小数）
购物车（'cost' 十进制）
CartProd（'unit_price' 十进制，'amount' 整数，'discount' 十进制，'total_cost' 十进制和产品的外键和一辆手推车）

想法是，当您想创建一个新购物车时，CartController 方法会创建一个包含所有产品的列表、一个全新的购物车和一个空列表，其中将为购物车选择的产品将被添加，并通过视图的紧凑发送它们。

public function create(Request $request)
{
    $product_list = Product::all();
    $empty_cart = new Cart();
    $selected_products = array();
    return view('models.carts.create', compact('product_list','empty_cart','selected_products'));
}

public function store(Request $request){}

发生这种情况的视图具有将显示所选产品的列表和用于将产品添加到列表的按钮。

create.blade.php:

@extends('adminlte::page')
@section('content')

<div class="container"><div class="row justify-content-center"><div class="col-md-8"><div class="card">
    <div class="card-header">
        <h3 class="card-title"> New Cart </h3>
        <div class="card-tools">
            <a class="btn btn-success btn-tool" href="#" data-toggle="modal" data-target="#add">
                <i class="fas fa-plus"></i> Add Product
            </a>
        </div>
    </div><div class="card-body">
        <table class="table table-striped projects table-sm">
            <thead><tr><th>#</th><th>Name</th><th>Unit Cost</th><th>Amount</th><th>Discount</th><th>Final Cost</th><th></th></tr></thead>
            <tbody>
                @forelse($selected_products as $prodCart)
                <tr>
                    <td>{{ $loop->iteration  }}</td>
                    <td>{{ $prodCart->product->name  }}</td>
                    <td>{{ $prodCart->product->price  }}</td>
                    <td>{{ $prodCart->amount  }}</td>
                    <td>{{ $prodCart->discount  }}</td>
                    <td>{{ $prodCart->cost  }}</td>
                    <td>
                        <a class="btn btn-danger btn-circle btn-sm" href="#" data-target="#delete">
                            <i class="fa fa-trash"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7">Empty Cart</td></tr>
                @endforelse
            </tbody></table></div>
    <div class="card-footer">
        @if(!empty($selected_products))
        <button class="btn btn-success" href="send $selected_products to CartController's store method" > Buy Cart </button>
        @endif
</div></div></div></div></div>

@include('models.carts.add')

@endsection

@section('scripts')

@stop

'Add Product' 按钮切换一个模式，其中包含显示的产品列表，加上 'amount' 和 'discount' 数字输入以创建 CartProd，以及实际添加的按钮他们到列表中。

add.blade.php:

<!--Modal add -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header bg-dark">
        <h5 class="modal-title" id="exampleModalLabel">Add Product to Cart</h5>
        <span class="badge badge-danger" class="close" data-dismiss="modal" aria-label="Close">
            <i class="fas fa-times fa-lg" style="color:#fff"></i>
        </span>
    </div>
    <div class="modal-body">
        <table class="table table-striped projects table-sm">
            <thead><tr><th>#</th><th>Name</th><th>Amount</th><th>Price</th><th>Added</th><th>Discount</th><th>Amount</th><th>Add</th></tr></thead>
            <tbody>
                @forelse($product_list as $product)
                <tr>
                    <td>{{ $loop->iteration  }}</td>
                    <td>{{ $product->name  }}</td>
                    <td>{{ $product->amount  }}</td>
                    <td>{{ $product->price  }}</td>
                    <td>{{ $product->created_at  }}</td>
                    <td><input type="number" name="discount" id="discount" min="0" max="100" size="3" value="0"></td>
                    <td><input type="number" name="amount" id="amount" min="1" max="{{$product->amount}}" size="3" value="1"></td>
                    <td>
                        <a class="btn btn-info btn-circle btn-sm" data-datos="{{$product}}">
                            <i class="fa fa-plus"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td>No Products Available.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
</div></div></div></div>

问题如下：

我还没有找到在模式中创建这个新的 CartProd 实例并将其发送回所选产品列表的方法。
如果添加错误，如何删除所述 CartProd。
如何在每次有新产品时更新选择的产品列表added/deleted。
'Buy Cart' 按钮将我转到控制器的存储方法（所有花哨的东西都将在其中完成以保存产品列表。）

非常感谢您的帮助！

Answer 1

如果您熟悉，可以使用 livewire 创建此模型，它可以解决您的问题

首先，用 form 元素包裹模态字段

//Your modal
<form action="{{route('your_route'}}" method="post">
   @csrf
   <input type="number" name="discount" id="discount" min="0" max="100" size="3" value="0">
   <input type="number" name="amount" id="amount" min="1" max="{{$product->amount}}" size="3" value="1">
    <a class="btn btn-info btn-circle btn-sm" data-datos="{{$product}}" type="submit">
       <i class="fa fa-plus"></i>
    </a>
</form>

在控制器方法中，您可以使用一条消息重定向回您的 create.blade.php，列表将刷新。

public function store(Request $request)
{
  // your saving logic
  return redirect()->route('your_create_route')
                   ->with('success', 'Added successfully');
}

由于您的问题过于宽泛，您可以通过将产品 ID 传递到要删除的按钮来触发删除操作。这是 this 的自定义方法。通常你 delete 使用 laravel 的删除方法 @method('delete') 和 POST 方法。

// delete link
<a href="{{route('delete_route', $product->id)}}">
      Delete 
</a>

// web.php
Route::get('delete/{id}','YourController@destroy')->name('delete_route');

Make bootstrap modal 创建一个要添加到列表中的对象

Make bootstrap modal create an object to be added to list

php

laravel

modal-dialog

laravel-blade

adminlte