Laravel flash弹出通知

Question

我在jQuery+Bootstrap Bootstrap growl上找到了一个很酷的弹出通知库。

我想专门使用它来将产品添加到购物车中。

我试图在按钮点击上放置一个处理程序，但通知看起来像这样：

Product <strong>{{ Session::get('add-product') }}</strong> added to cart

不处理花括号。

我试图通过session:：flash来完成这项工作，在类型为"的输入上投射接收到的值；"隐藏"；，但闪光灯只有在重新启动后才会启动，这不是我需要的。如何使用ajax首先在输入中加载值，然后在通知中加载值？有人能给个主意吗？

如何尽可能正确地实现这一点？或者有哪些库允许从会话：：flash发出toast通知？

具有添加到购物车功能的CartController：

public function addCart(Request $request, $id){
$product = Product::find($id);
$oldCart = Session::has('cart') ? Session::get('cart') : NULL;
$cart = new Cart($oldCart);
$cart->add($product, $product->id);
$request = Session::put('cart', $cart);
//Session::flash('add-product', $product->name);
return response()->json([
'total_quantity' => Session::has('cart') ? Session::get('cart')->totalQty : '0' 
]);
}

如果可能的话，通过闪光灯观看：

<div class="col-lg-12">
@if(Session::has('add-product'))
<p class="alert alert-success text-center mt-2  mb-1 addpopup">
Product<strong>{{ Session::get('add-product') }}</strong> added to cart
</p>
<input type="hidden" class="addpopup">Product<strong>{{ Session::get('add-product') }}</strong> added to cart</input>
@endif
</div>

Ajax，用于将产品添加到购物车中，以及该库中触发通知的函数：

$(document).ready(function() {
$('.product-icon-container').find('.ajaxcartadd').click(function (event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
dataType: 'JSON',
success: function(response) {
$('.prodcount').html(response.total_quantity);
}
});
$.bootstrapGrowl('Product<strong>{{ Session::get("add-product") }}</strong> added to cart', {
ele: 'body', // which element to append to
type: 'info', // (null, 'info', 'danger', 'success')
offset: {from: 'top', amount: 20}, // 'top', or 'bottom'
align: 'center', // ('left', 'right', or 'center')
width: 'auto', // (integer, or 'auto')
delay: 4000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!
allow_dismiss: true, // If true then will display a cross to close the popup.
stackup_spacing: 10 // spacing between consecutively stacked growls.
});
return false;
});
});

Answer 1

我的案例中这个问题的解决方案可以在这里找到。