【问题标题】:Make bootstrap modal create an object to be added to list使引导模式创建要添加到列表的对象
【发布时间】:2021-11-05 17:25:04
【问题描述】:

在我的 Laravel 项目中,我有以下模型:

  • 产品(“名称”字符串、“金额”整数和“价格”小数)
  • 购物车(“成本”小数)
  • 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

“添加产品”按钮切换一个模式,该模式具有显示的产品列表,以及用于创建 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。
  • 如何在每次添加/删除新产品时更新所选产品列表。
  • “购买购物车”按钮将我发送到控制器的 store 方法(所有花哨的东西都会在这里完成以保存产品列表。)

非常感谢您的帮助!

【问题讨论】:

    标签: php laravel modal-dialog laravel-blade adminlte


    【解决方案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'); 
    

    【讨论】:

    • 非常感谢您的回答。我没有像你说的那样最终使用 Livewire,但我确实放了很多表格和东西来帮助我删除和添加产品。非常感谢!
    • 太棒了。最受欢迎的。如果您有时间,请不要犹豫,试试 Livewire。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多