site ecommerce ب laravel 7 الجزء الخامس

فهاد الجزء الخامس من site ecommerce ب laravel 7 غادي نشوفوا كيفاش نزيدو ل panier ومن بعد غادي نعرضوا les produits لي عندنا فالصفحة الرئيسية ومن بعد نزيدو la page لي غادي نعرضوا فيها التفاصيل ديال produit.

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


1- إضافة ل controller CartController


باش نزيدو ل panier غادي نخدمو بواحد ل package لي ممكن تبع الفيديو لي لفوق باش تزيدو فل projet ديالك من بعد ما يتزاد غادي تزيد controller سميه CartController لي فيه les fonctions ديال إضافة produit ل panier تعديل وحذف produit من ل panier.

الكود ديال الملف هو :

                                    
                                        <?php

namespace App\Http\Controllers;

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

class CartController extends Controller
{
    //return cart items
    public function index()
    {
        return view("cart.index")->with([
            "items" => \Cart::getContent()
        ]);
    }

    //add item to cart
    public function addProductToCart(Request $request, Product $product)
    {
        \Cart::add(array(
            "id" => $product->id,
            "name" => $product->title,
            "price" => $product->price,
            "quantity" => $request->qty,
            "attributes" => array(),
            "associatedModel" => $product,
        ));
        return redirect()->route("cart.index");
    }

    //update item on cart
    public function updateProductOnCart(Request $request, Product $product)
    {
        \Cart::update($product->id, array(
            'quantity' => array(
                'relative' => false,
                'value' => $request->qty
            ),
        ));
        return redirect()->route("cart.index");
    }

    //remove item from cart
    public function removeProductFromCart(Product $product)
    {
        \Cart::remove($product->id);
        return redirect()->route("cart.index");
    }
}
                                    
                                

2- تعديل الملف app.blade.php


ف dossier views/layouts كاين ملف app.blade.php غادي نديرو عليه تعديلات باش نعرض ال menu والمحتوى ديال الصفحات لي غادي نزيدوا من بعد.

الكود ديال الملف هو :

                                    
                                        <!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('cart.index') }}">
                                <i class="fa fa-shopping-cart"></i>
                                {{ \Cart::getContent()->count() }}
                            </a>
                        </li>
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            @if(auth()->guard("admin")->check())
                                <li class="nav-item dropdown">
                                    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                        {{ auth()->guard("admin")->user()->name }}
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item"
                                            href="{{ route("admin.index") }}">
                                            Dashboard
                                        </a>
                                        <a class="dropdown-item" href="{{ route('admin.logout') }}">
                                            {{ __('Déconnexion') }}
                                        </a>
                                    </div>
                                </li>
                            @else
                                <li class="nav-item dropdown">
                                    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                        {{ Auth::user()->name }}
                                    </a>

                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="{{ route('logout') }}"
                                        onclick="event.preventDefault();
                                                        document.getElementById('logout-form').submit();">
                                            {{ __('Logout') }}
                                        </a>

                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    </div>
                                </li>
                            @endif
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>
        <div class="row">
            <div class="col-md-8 mx-auto my-4">
                @include('layouts.alerts')
            </div>
        </div>
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>
                                    
                                

3- عرض رسائل التنبيه


يلا شفتي ل fichier app.blade.php غادي تلقى فيه fichier سميتو alerts هذا هو الملف لي غادي يتكلف بعرض رسائل التنبيه فاش نزيد شي produit نعدل أو نحذف.

فنفش dossier لي هو layouts غادي تزيد fichier alerts.blade.php ولي الكود ديالو غادي يكون هو هذا :

                                      
                                        @if($errors->any())
    @foreach ($errors->all() as $error)
        <div class="alert alert-danger">
            {{ $error }}
        </div>
    @endforeach
@endif

@if(session()->has("success"))
    <div class="alert alert-success alert-dismissible fade show">
        <strong>{{ session()->get("success") }}</strong>
        <button type="button" class="close">
            <span>&times;</span>
        </button>
    </div>
@endif

@if(session()->has("warning"))
    <div class="alert alert-warning alert-dismissible fade show">
        <strong>{{ session()->get("warning") }}</strong>
        <button type="button" class="close">
            <span>&times;</span>
        </button>
    </div>
@endif

@if(session()->has("errorLink"))
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>{!! session()->get("errorLink") !!}</strong>
        <button type="button" class="close">
            <span>&times;</span>
        </button>
    </div>
@endif

@if(session()->has("info"))
    <div class="alert alert-info alert-dismissible fade show">
        <strong>{{ session()->get("info") }}</strong>
        <button type="button" class="close">
            <span>&times;</span>
        </button>
    </div>
@endif
                                      
                                    

4- عرض les produits فالصفحة الرئيسية


غادي نزيدو تعديلات على الملف home لي كاين ف dossier views غادي نزيدو كود عرض les produits و les catégories.

الكود ديال الملف بعد التعديل هو :

                                        
                                            @extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <h3 class="card-header">New Products !</h3>
                <div class="card-body">
                    <div class="row">
                        @foreach ($products as $product)
                            <div class="col-md-6 mb-2 shadow-sm">
                                <div class="card" style="width:18rem,height:100%">
                                    <div class="card-img-top">
                                        <img class="img-fluid rounded" src="{{ asset($product->image) }}"
                                            alt="{{ $product->title }}">
                                    </div>
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            {{ $product->title }}
                                        </h5>
                                        <p class="d-flex flex-row justify-content-between align-items-center">
                                            <span class="text-muted">
                                                {{ $product->price }} DH
                                            </span>
                                            <span class="text-danger">
                                                <strike>
                                                    {{ $product->old_price }} DH
                                                </strike>
                                            </span>
                                        </p>
                                        <p class="card-text">
                                            {{ Str::limit($product->description,100) }}
                                        </p>
                                        <a href="{{ route("products.show",$product->slug) }}" class="btn btn-outline-primary">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <hr>
                    <div class="justify-content-center d-flex">
                        {{ $products->links() }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="list-group">
                <li class="list-group-item active">
                    Categories
                </li>
                @foreach ($categories as $category)
                    <a href="{{ route("category.products",$category->slug) }}"
                        class="list-group-item list-group-item-action">
                        {{ $category->title }}
                        ({{ $category->products->count() }})
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection
                                        
                                    

5- عرض تفاصيل produit


ف dossier views زيد dossier products فيه زيد fichier show.blade.php ولي فيه الكود باش نعرض lلتفاصيل ديال produit.

الكود ديال الملف هو :

                                        
                                            @extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <h3 class="card-header">{{ $product->title }}</h3>
                <div class="card-img-top">
                    <img class="img-fluid w-100" src="{{ asset($product->image) }}"
                        alt="{{ $product->title }}">
                </div>
                <div class="card-body">
                    <h5 class="card-title">
                        {{ $product->title }}
                    </h5>
                    <p class="text-dark font-weight-bold">
                        {{ $product->category->title }}
                    </p>
                    <p class="d-flex flex-row justify-content-between align-items-center">
                        <span class="text-muted">
                            {{ $product->price }} $
                        </span>
                        <span class="text-danger">
                            <strike>
                                {{ $product->old_price }} $
                            </strike>
                        </span>
                    </p>
                    <p class="card-text">
                        {{ $product->description }}
                    </p>
                    <p class="font-weight-bold">
                        @if($product->inStock > 0)
                            <span class="text-success">
                                In Stock
                            </span>
                        @else
                            <span class="text-danger">
                                N/A
                            </span>
                        @endif
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <form action="{{ route("add.cart",$product->slug) }}" method="post">
                @csrf
                <div class="form-group">
                    <label for="qty" class="label-input">
                        Qty :
                    </label>
                    <input type="number" name="qty" id="qty"
                        value="1"
                        placeholder="Quantité"
                        max="{{ $product->inStock }}"
                        min="1"
                        class="form-control"
                    >
                </div>
                <div class="form-group">
                    <button type="submit" class="btn text-white btn-block bg-dark">
                        <i class="fa fa-shopping-cart"></i>
                        Add to cart
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
                                        
                                    

كلمات مفاتيح :