LaravelShoppingCart 和 PNotify

Question

我正在尝试使用 LaravelShoppingCart with PNotify，但我有点迷茫，需要一些指导。

这是我目前的界面：

当我单击黄色 "add me" 按钮时，我使用右上角的 PNotify 生成了一个新通知，如图所示。

接下来我要做的是：

当我点击"add me"按钮时，Cart::add()会被调用，我的class会被添加到购物车会话
黄色按钮变为"remove me"，可以调用Cart::remove()
通知一直在右上角（即使你转到另一个页面。它本质上是引用 Cart::content()），当你点击 "x" 按钮时通知，它也会调用 Cart::remove()。

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

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

Answer 1

不一定需要 ajax。每次单击 "add me" 按钮时，您只需发送一个 post 请求并使用 Cart::add() 将 class 添加到您的购物车。您通过列出 Cart::content() 来显示添加的 classes。如果 class 已添加，您还可以检查视图，然后更改按钮以删除 class.

如果你喜欢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'));
    }

更新

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

 $('.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;
            });

LaravelShoppingCart 和 PNotify

LaravelShoppingCart and PNotify

shopping-cart

laravel

pnotify