Today we are discussing how to install the AdminTheme extension designed for the Bagisto eCommerce framework, which allows you to access beautiful responsive backend panels on any device.
Let’s take a quick review of its features:
- Based on the Bootstrap 4.6 framework.
- This theme comes with built-in light and dark layouts, select as per your preference.
- Due to the responsive design, you can access the admin panel on any device.
- Beautifully crafted, clean & modern designed admin theme.
- Easy to apply your brand color using CSS variables.
- All SCSS and JS files are included in the bundle.
- RTL Support.
- Easy to convert your own custom or third-party extensions admin theme.
- Lifetime updates with new demos and features are guaranteed.
Additional features added those are not available currently in the default admin panel:
- Sortable field icons in the table
- Filter to enable/disable, the product’s variant entries in the table.
- Compact form fields, help you to view more fields at a time.
- Custom error pages are only for the admin panel.
- Added optional feature to enable/disable locale dropdown from the admin panel
Now, let’s start the installation steps:
- Unzip all the files to packages/Ridhima/WTAdminThemeOne.
- Goto composer.json file inside the Bagisto root directory then add the following line under ‘psr-4’
"Ridhima\\WTAdminThemeOne\\": "packages/Ridhima/WTAdminThemeOne/src"
- Goto config/app.php file then add the following line under ‘webkul packages’
Ridhima\WTAdminThemeOne\Providers\WTAdminThemeOneServiceProvider::class
and comment below the line
// Webkul\Theme\Providers\ThemeServiceProvider::class,
and add the below line just after the above line
Ridhima\WTAdminThemeOne\Providers\ThemeServiceProvider::class,
- Run the below commands before publishing assets to the public folder:
composer dump-autoload php artisan config:clear php artisan cache:clear php artisan route:clear
- After that run the below command to publish config and theme files:
php artisan vendor:publish --provider="Ridhima\WTAdminThemeOne\Providers\WTAdminThemeOneServiceProvider" --force
- Goto config/themes.php file then add the following line under ‘admin-themes’
'wt-admin-theme-one' => [ 'views_path' => 'resources/admin-themes/wt-admin-theme-one/views', 'assets_path' => 'public/admin-themes/wt-admin-theme-one/assets', 'name' => 'WTAdminThemeOne' ]
and also change the value of ‘admin-default’ in the same file
'admin-default' => 'wt-admin-theme-one',
- Change the theme color & login screen image, please follow the below navigation (please see the below image for reference)
Admin -> Configure -> Theme
Enable admin locale dropdown
- Goto app/Http/Kernel.php file then add the following line under ‘middlewareGroups’
'web' => [ ... ... \Ridhima\WTAdminThemeOne\Http\Middleware\AdminLocale::class, ]
- Goto config/wtadminthemeone.php file to enable/disable the admin locale dropdown list and its options
'enable_admin_locale_menu' => true, // to display only selected from the added locale in the backend locale menu // leave empty to display all added locales // eg: ['en', 'fr'] 'allowed_admin_locale' => [ 'en', 'fr' ],
- To fix the preview page local issue, overwrite transformActions method with the below method in packages/Webkul/Ui/src/DataGrid/Traits/ProvideCollection.php
private function transformActions($record)
{
foreach ($this->actions as $action) {
$toDisplay = (isset($action['condition']) && gettype($action['condition']) == 'object') ? $action['condition']($record) : true;
$toDisplayKey = $this->generateKeyFromActionTitle($action['title'], '_to_display');
$record->$toDisplayKey = $toDisplay;
if ($toDisplay) {
$urlKey = $this->generateKeyFromActionTitle($action['title'], '_url');
$routeParams = $record->{$action['index'] ?? $this->index};
if (isset($routeParams)) {
$record->$urlKey = route($action['route'], $record->{$action['index'] ?? $this->index});
} else {
$record->$toDisplayKey = false;
}
}
}
}
Now new admin theme is installed.