Jednoduchý e-shop Laravel 5.3 část 10 – přidání zboží do košíku AJAXEM
Tak jsem se rozhodla , že e-shop si vylepším o přidání do košíku ajaxem. Aby bylo možné použít ajax POST s Laravelem je nejpreve nutné ,aby byl předán s ajaxovým požadavek i csrf_token. Více najdeme jako vždy v dokumentaci X-CSRF_TOKEN
Nejprve si upravíme master.blade.php do hlavičky přidáme
|
1 |
<meta name="csrf-token" content="{{ csrf_token() }}"> |
a také si zajistíme možnost přidat na konkrétní stránce javascritový kód. Takže na konec si přidáme
|
1 2 3 |
<script> @yield('scripts') </script> |
Nyní upravíme home.blade.php. Pro přidání zboží do košíku budeme používat
|
1 |
<a href="#" id="add" class="btn btn-primary" data-id="{{ $product->id }}">Koupit</a> |
a na konec souboru si přidáme kód
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@section('scripts') $(document).ready(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('a#add').click( function() { var product_id = $(this).data('id'); var url = "/ajaxadd"; $.ajax({ type: "POST", url: url, data: { product_id: product_id }, success: function (msg) { var obj = JSON.parse(JSON.stringify(msg)); $('.badge').html(obj.msg); }, error: function (data) { console.log('Error:', data); } }); }); }); @stop |
aby nám vše fungovalo přidáme routu do web.php
|
1 |
Route::post('/ajaxadd', 'CartController@ajaxAdd'); |
a ještě do CartControlleru
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public function ajaxAdd(Request $request) { $id = $request->input('product_id'); $session = $request->session(); $cartData = ($session->get('cart')) ? $session->get('cart') : array(); if (array_key_exists($id, $cartData)) { $cartData[$id]['qty']++; } else { $cartData[$id] = array( 'qty' => 1 ); } $request->session()->put('cart', $cartData); $cart_qty = Session::get('cart') ? array_sum(array_column(Session::get('cart'), 'qty')) : 0; //return redirect()->back()->with('message', 'Product Added Successfully!'); return response()->json(['msg' => $cart_qty], 200); } |
No a nyní by nám mělo fungovat přidání zboží do košíku pomocí Ajaxu a také si prosím všimněte, že v navigaci se nám aktualizuje počet položek v košíku. Uf vypadá to jednoduše, ale vzhledem k tomu ža Ajax jsem v Laravelu použila poprvé, dalo mi to trochu zabrat