/

August 6, 2024

Voyager Admin Panel: Customization Best Practices for Laravel Developers

Elevate your Laravel Voyager Admin Panel experience through personalized customization of views and widgets. This guide offers step-by-step instructions to tailor your admin interface, ensuring seamless integration with your application’s requirements and enhancing user satisfaction.

Laravel Voyager Admin Panel experience through personalized

1. Views Customizing

First, create a new folder inside the resources/views directory to organize your custom views. Let’s name it vendor:

resources
    └── views
        └── vendor

Inside the vendor folder, create a folder named voyager to indicate that these views are related to the Voyager admin panel:

resources
    └── views
        └── vendor
            └── voyager

Within the voyager folder, create a folder named products to specifically handle views related to products:

 resources
    └── views
        └── vendor
            └── voyager
                └── products

 

Now, create a new Blade view file inside the products folder for the product listing page. Let’s name it browse.blade.php:

 resources
    └── views
        └── vendor
            └── voyager
                └── products
                        └── browse.blade.php

Open the file vendortcgvoyagerresourcesviewsbreadbrowse.blade.php in your text editor 

  1.      Select all the code within this file.
  2.      Copy the selected code to your clipboard.
  3.      Open the file voyager/products/browse.blade.php in your text editor.
  4.      Paste the copied code into voyager/products/browse.blade.php.
  5.      Save the changes made to voyager/products/browse.blade.php.

2. Widgets Customizing

To add or delete widgets in the config/voyager.php file, follow these steps:

To add a widget to the widgets array, simply append the fully qualified class name of the widget to the array. Make sure to include the namespace and double backslashes for the class name.

For example, to add a widget named AppWidgetsProducts, you would add it like this:

'widgets' => [
    'TCG\Voyager\Widgets\UserDimmer',
    'App\Widgets\Products',
],

For example,  AppWidgets, you would add it like this:

   app
    └── Widgets
         └── Product.php

Please add the following code snippet to the WidgetsProduct.php file:


<?php

namespace AppWidgets;

use IlluminateSupportFacadesAuth;
use IlluminateSupportStr;
use TCGVoyagerFacadesVoyager;
use TCGVoyagerWidgetsBaseDimmer;

class Product extends BaseDimmer
{
    /**
     * The configuration array.
     *
     * @var array
     */
    protected $config = [];

    /**
     * Treat this method as a controller action.
     * Return view() or other content to display.
     */
    public function run()
    {
        $count = Voyager::model('Product')->count();
        $string = trans_choice('Product', $count);

        return view('voyager::dimmer', array_merge($this->config, [
            'icon'   => 'voyager-news',
            'title'  => "{$count} {$string}",
            'text'   => __('voyager::dimmer.post_text', ['count' => $count, 'string' => Str::lower($string)]),
            'button' => [
                'text' => __('voyager::dimmer.post_link_text'),
                'link' => "#",
            ],
            'image' => voyager_asset('images/widget-backgrounds/02.jpg'),
        ]));
    }

    /**
     * Determine if the widget should be displayed.
     *
     * @return bool
     */
    public function shouldBeDisplayed()
    {
        return Auth::user()->can('browse', Voyager::model('Product'));
    }
}

 

From the same category