LARAVEL: Showing the slug in URL instead of ID - List of Categories

• HELLO EVERYONE,

  in the URL i want to show the slug instead of ID :

  i'm try this :

  but doesn't return any results..

what i can Do ??

THnaks in advance !!!!

web.php:

Route::get('/produits/{id?}', 'ZamzamController@produits');

Controller:

public function produits($id = null){
      if($id){
        $produits = Post::orderBy('created_at', 'desc')
        ->whereStatus('PUBLISHED')
        ->whereCategoryId($id)
        ->take(10)->get();
      }else {
        $produits = Post::orderBy('created_at', 'desc')->whereStatus('PUBLISHED')->take(10)->get();
      }
        $categories = Category::all();
        return view('zamzam.produits', ['id' => $id, 'mesProduits' => $produits, 'mesCategories' => $categories]);
    }

Products.php:

<nav id="nav-top">
    <ul>
      <li> <a href="">Tous les produits</a></li>
      @foreach ($mesCategories as $category)
      <li><a href=""> -()</a></li>
      @endforeach
    </ul>
  </nav>

                        <div class="lx-products-list lx-bloc-content">
                            <div class="lx-products-items">
                                @foreach ($mesProduits as $produit)
                                <div class="lx-g4 lx-g5-to-g2">
                                    <div class="lx-products-item">
                                        <a href="Produit/39.html">
                                            <div class="lx-products-item-img">
                                            <a href="">
                                                <img src="" />
                                                </a>
                                            </div>  
                                            <h4></h4> 
                                            <div class="lx-products-item-detail">
                                                <h2 class="haha2"><i style="color:#fdd043;" class="fas fa-shopping-cart"></i><a href=""></a></h2>

                                                    <p class="para">
                                                    <ins>
                                                      درهم

                                                    </ins>  
                                                </p>

                                            </div>  
                                        </a>
                                    </div>
                                </div>
                                @endforeach

                            </div>
                        </div>
                        <div class="lx-clear-fix"></div></br></br></br>
                    </div>
                </div>

via Chebli Mohamed