LaravelShoppingCart 和 PNotify

Question

我正在尝试将LaravelShoppingCart 与PNotify 一起使用，但我有点迷茫，可以使用一些指针。

这是我目前的界面：

当我点击黄色的“添加我”按钮时，我会使用右上角的 PNotify 生成一个新通知，就像您在图片中看到的那样。

接下来我想做的是：

1. 当我点击“添加我”按钮时，Cart::add() 将被调用，我的班级将被添加到购物车会话中

2. 黄色按钮变成“删除我”，可以拨打Cart::remove()

3. 通知仍然存在于右上角（即使您转到另一个页面。它本质上是在引用Cart::content()），当您单击通知上的“x”按钮时，它会调用Cart::remove()也是。

我并不是真的在寻找代码（尽管如果它有助于解释，请随意）。我只是希望有人向我解释我是如何做到这一点的。

看来我需要使用 AJAX。如果是这样，我需要向我的 Laravel 项目添加什么才能使用 AJAX 添加到购物车？

Answer 1

不一定需要ajax。每次单击“添加我”按钮时，您只需发送一个帖子请求并使用 Cart::add() 将课程添加到您的购物车。 您可以通过列出 Cart::content() 来显示添加的类。此外，如果已添加类，请检查您的视图，然后更改按钮以删除类。

如果你更喜欢 ajax。然后您只需使用与提及相同的过程向您的服务器发送一个 ajax 调用。您不必将包添加到项目中即可使用 ajax。你只需要 jquery 插件。

我更喜欢 ajax，因为您不必加载页面，但它需要大量工作。

更新

你需要这样的东西。

$('#button').click(function(){

$.ajax({
  type: 'post',
  url: 'url',
  data: {your: data},
  dataType: 'json'
}).done(function(data){
 //do something with your data
});

return false;

});

注意

在您的 ajax 函数中。如果您提交表单，它应该看起来像这样。

 $.ajax({
    type: "post",
    url: "{!! route('route') !!}",
    data: $('#form').serialize(),
    dataType: 'html'
 }).done(function (data) {

但如果您只是传递选定的数据，则需要传递 _token。

$.ajax({
    type: "post",
    url: "{!! route('route') !!}",
    data: {data: value, _token: "{{ csrf_token() }}"},
    dataType: 'html'
 }).done(function (data) {

更新

这是我的后端示例代码。

public function addItem(Request $request)
    {
        $data = $request->all();

        $validator = Validator::make($data, [
            'field' => 'required'
        ]);

        if ($validator->fails())
        {
            $data = Cart::content();
            return view('errorview', compact('data'))->withErrors($validator);
        }

        Cart::add($data['id'], $data['name'], $data['qty'],
            $data['amount']);

        $data = Cart::content();

        return view('myview', compact('data'));
    }

更新

您需要在所有按钮中添加一个类。像这样的东西。

 $('.btn').click(function () {
                $.ajax({
                    type: 'post',
                    url: "{!! route('route') !!}",
                    data: {id: $(this).prop('id').substr(9), _token: "{{ csrf_token() }}"},
                    dataType: "html"
                }).done(function (data) {
                   //more code here
                });
                return false;
            });