Ecommerce App ب laravel & stripe paiement الجزء الرابع

imadbelasri Laravel
LA

فهاد الجزء الرابع من Ecommerce App ب laravel & stripe paiement غادي نشوفوا الملفات الخاصين بل panier فغادي نشوفوا كيفاش نزيدو les produits ل panier ولهاد لغرض غادي نزيدو واحد librairie externe لي غادي تمكنا باش نزيدو ل panier لل projet laravel ديالنا.


نظرة سريعة بالفيديو


1- إضافة gloudemans/shoppingcart لل projet

فهاد librairie هي مجانية ولي كتمكنا باش نزيدو ل panier بشهولة للموقع ديالنا فباش نزيدها فتح cmd وكتب:
cd  c:\xampp\htdocs\ecommerce-app 
منبعد دير هاد الكوموند :
composer require gloudemans/shoppingcart
يلا كنتي خدام بل version 5.5 صافي هادشي لي تدير كنتي خدام ب 5.4 أو قل كتمشي لل app وكتزيد هاد الكود :

                                                    
                                                        //ajouter au providers array:

Gloudemans\Shoppingcart\ShoppingcartServiceProvider::class

//ajouter au aliases array:

'Cart' => Gloudemans\Shoppingcart\Facades\Cart::class,
                                                    
                                                

2- الملف ShopController.php

كنمشي ل app/Http/Controllers كنزيد ملف جديد كنسميه ShopController.php لي غادي تكون فيه fonction add_to_cart لي ملي كنكليكي على ajouter au panier كيترسلها ل id ديال ل produit كتسترجعوا من قاعدة البيانات وكتزيدو فل panier باستعمل ل fonction add لي كينة فل class Cart ولي هي librairie لي زدنا وباش نتمكن من 
عرض الصورة ديال ل produit فل panier كنخدم ب associate لي كتاخد ل id ديال ل produit ول model Product منبعد كنوجه المستخدم للملف cart لي غادي نزيدوه من بعد ثم عندي ل fonction cart لي فقط كتعرض les produits لي عندي فل panier منبعد عندي cart_delete لي كتاخد id ديال produit وكتمسحو من لpanier منبعد عندي cart_dec لي كتمكن المستخدم باش ينقص من ل quantité ديال ل produit لي زاد فل panier وكاين ل fonction cart_inc لي كتدير العكس الكود ديال الملف هو : 

                                                        
                                                            <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Cart;
use App\Product;

class ShopController extends Controller
{
    //
    public function add_to_cart(){
        $product = Product::find(request()->product_id);
        $item = Cart::add([
            'id' =>  $product->id,
            'name' => $product->name,
            'qty' => request()->qte,
            'price' =>  $product->prix
        ]);
        Cart::associate($item->rowId,'App\Product');
        return redirect()->route('cart.index');
    }
    public function cart(){
        //Cart::destroy();
        return view('admin.products.cart');
    }
    public function cart_delete($id){
        Cart::remove($id);
        return redirect()->back();
    }
    public function cart_dec($id,$qte){
        Cart::update($id,$qte - 1);
        return redirect()->back();
    }
    public function cart_inc($id,$qte){
        Cart::update($id,$qte + 1);
        return redirect()->back();
    }
}
                                                        
                                                    

3- الملف products/cart.blade.php

فالمجلد products زيد ملف جديد سميه cart.blade.php هادا الملف لي فيه كيتعرضوا les produits لي عندي فل panier فكنخدم ب  Cart::content لي كترجع les produits كاملين من ل panier منبعد ب foreach كنعرض كل produit معاه ل quantité ول boutons لي كيمكنوا من تعديلها وايضا الرابط لي كيمكن من مسح هاد ل produit من ل panier وهادو كلهم des fonctions لي درناهم فالملف السابق الكود ديال الملف هو :

                                                        
                                                            @extends ('includes.main-layout')

@section('styles')

@endsection

@section('header')
    @include('includes.header')
@endsection

@section('content')
    <div class="row mt-4">
        <div class="col-md-12">
        @include('includes.errors')
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Produits en panier : <span class="badge bg-dark text-white p-2">{{Cart::content()->count()}}</span></h3>
                    <table class="table table-dark mx-auto">
                        <thead class="thead-default">
                            <tr>
                            <th></th>
                                <th>Libellé</th>
                                <th>Prix</th>
                                <th>Qté</th>
                                <th>Total</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(Cart::content() as $product)
                            <tr>
                                <td><img src="{{URL::to('images/'.$product->model->file)}}" height="50" width="50" alt=""></td>
                                <td scope="row">{{$product->name}}</td>
                                <td>{{$product->price}} dh</td>
                                <td>
                                    <a href="{{route('cart.decrease',['id'=>$product->rowId,'qte'=>$product->qty])}}" class="btn bg-light" id="moins">-</a>
                                    <input type="text" style="width:8%;text-align:center;padding:5px;" class="qte" id="qte" name="qte" value="{{$product->qty}}">
                                    <a href="{{route('cart.increase',['id'=>$product->rowId,'qte'=>$product->qty])}}" class="btn bg-light" id="plus">+</a>
                                </td>
                                <td>{{$product->total}} dh</td>
                                <td><a href="{{route('cart.delete',['id'=>$product->rowId])}}" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></a></td>
                            </tr> 
                            @endforeach
                        </tbody>
                    </table>
                    <p class="lead">Total: <span class="badge bg-success text-white">{{Cart::total()}} dh</span></p>
                    <a href="{{route('cart.checkout')}}" class="btn btn-success">Valider</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')

@endsection

@section('scripts')

@endsection
                                                        
                                                    

4- الملف products/checkout.blade.php

قبل مانزيدو هاد الملف غادي تمشي للموقع ديال الخلاص ولي هو stripe ولي هو باش غادي نديرو ل paiement من هنا منبعد متفتح لحساب ديالك غادي تمشي للرابط  هنا وغادي تلقا لفورم لي غادي نزيدوها فل panier ولي غادي تمكن المستخدم باش يدخل ل email ورقم البطاقة المصرفية فهادشي كلو غير تجربة حيت لحساب لي فتحنا par défaut كيكون test فيلا بغيتي تخدم بل paiement حقيقي خص ت activer لحساب ديالك منبعد فالمجلد products زيد ملف جديد سميه checkout.blade.php فمني كيكليكي المستخدم على valider ل panier كيتوجه لهاد الملف لي فيه كيتعرض ل panier النهائي مع ل bouton ديال ل paiement لي هي لفورم لي كتاخد من الرابط لي شفنا وباش يكمل ل paiement خص نزيدو واحد ل fonction pay ولي غادي نشوفوها فالملف القادم الكود ديال الملف هو :

                                                        
                                                            @extends ('includes.main-layout')

@section('styles')

@endsection

@section('header')
    @include('includes.header')
@endsection

@section('content')
    <div class="row mt-4">
        <div class="col-md-12">
        @include('includes.errors')
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Vous avez commandez :</h3>
                    <table class="table table-dark mx-auto">
                        <thead class="thead-default">
                            <tr>
                            <th></th>
                                <th>Libellé</th>
                                <th>Prix</th>
                                <th>Qté</th>
                                <th>Total</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(Cart::content() as $product)
                            <tr>
                                <td><img src="{{URL::to('images/'.$product->model->file)}}" height="50" width="50" alt=""></td>
                                <td scope="row">{{$product->name}}</td>
                                <td>{{$product->price}} dh</td>
                                <td>
                                    {{$product->qty}}
                                </td>
                                <td>{{Cart::subtotal()}} dh</td>
                            </tr> 
                            @endforeach
                        </tbody>
                    </table>
                    <p class="lead">Total: <span class="badge bg-success text-white">{{Cart::total()}} dh</span></p>
                    <form action="{{route('cart.pay')}}" method="POST">
                    {{csrf_field()}}
                        <script
                            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                            data-key="api key"
                            data-amount= {{Cart::total() * 9.95}}
                            data-name="Ecommerce Site"
                            data-description="Commande"
                            data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                            data-locale="fr">
                        </script>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')

@endsection

@section('scripts')

@endsection
                                                        
                                                    

5- الملف CheckoutController.php

فباش نزيد ل paiement كنزيد واحد ل librairie سميتها stripe-php فباش تزيدها كتفتح cmd وتمشي ل dossier projet كيف درنا فل cart وتدير هاد ل commande :
composer require stripe/stripe-php 
منبعد كنمشي ل app/Http/Controllers كنزيد ملف جديد كنسميه CheckoutController.php لي غادي تكون فيه fonction index لي كتوجه المستخدم للملف checkout ولي زدنا قبل منبعد كاين ل fonction pay لي كتاخد ل api key ديالك ولي غادي تلقاه فالرابط لي عطيتك  هنا منبعد كن créer une charge لي فيها total لي كاين فل panier والعملة منبعد ميتم الأداء كنخوي ل panier وكنوجه المستخدم للصفحة الرئيسية الكود ديال الملف هو :
 

                                                        
                                                            <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Cart;
use Stripe\Stripe;
use Stripe\Charge;

class CheckoutController extends Controller
{
    //
    public function index(){
        return view('admin.products.checkout');
    }
    public function pay(){
        Stripe::setApiKey("votre api key");
        $token = request()->stripeToken;
        // Charge the user's card:
        $charge = Charge::create(array(
            "amount" => Cart::total() * 9.95,
            "currency" => "usd",
            "description" => "Darija-Coding ecommerce site",
            "source" => $token,
        ));
        Cart::destroy();
        return redirect('/')->with(['success','Commande payée avec succés!']);
    }
}