Laravel flash popup notifications

Viewed 971

I found a cool library for pop up notifications on jQuery + Bootstrap bootstrap-growl.

I want to use it exclusively for adding a product to the cart.

I tried to put a handler on a button click, but the notification looks like this:

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

Curly braces are not processed.

I tried to do it through session::flash, casting the received value on input with type = "hidden", but flash only fires after reboot and this is not what I need. How can I load the value with ajax first in input, and then in notifications? Can anyone give an idea?

How to implement this as correctly as possible? Or what libraries are there that allow to make a toast notification from session::flash?

CartController with add to cart function:

  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' 
     ]);
  }

View with flashes, if possible, somehow through them:

    <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 for adding a product to the cart and, along with it, a function from that library that triggers notifications:

$(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;
});
});
1 Answers

The solution to this question for my case you can find here.

Related