Create Theme

edit on github

I hope that you know how to create package, if not refer Package development.

Creating a custom theme for Bagisto had been a hot topic lately. More and more users are actively trying our framework and we’re genuinely overwhelmed by it.

Coming on how to create a custom theme for Bagisto. It’s super easy!!!. With just a few lines of configuration code. Similarly following the traditional way of creating view files in Laravel would be enough.

Steps to create theme

Please follow steps mentioned below that how to create a custom theme in Bagisto.

  • Go to your project’s root directory and check for config folder. Inside it, you will find a file called themes.php:

theme-file-location

  • Check contents of ‘themes.php’ file, it holds all necessary information of creating a custom theme.
<?php

return [
    'default' => 'default',

    'themes' => [
        'default' => [
            'views_path' => 'resources/themes/default/views',
            'assets_path' => 'public/themes/default/assets',
            'name' => 'Default'
        ],

        // 'bliss' => [
        //     'views_path' => 'resources/themes/bliss/views',
        //     'assets_path' => 'public/themes/bliss/assets',
        //     'name' => 'Bliss',
        //     'parent' => 'default'
        // ]
    ]
];

theme-file

Let’s go through the parameters of this theme’s file. Because the understanding of those parameters will help you in creating a custom theme.

An Explanation For These Parameters:
  1. default: Declared at the top signifies the currently active or default theme in Bagisto. It is assigned with the value ‘default’. The default(string) indicates the name of the currently active theme.

theme

  1. themes: This parameter is where you’ve to define all essentials for your own custom theme. Multiple themes can also be created and used at the same time in Bagisto.

  2. Inside ‘themes’ there is another array by name ‘default’ which is your currently active theme. Containing some key-value pairs.

    • ‘default’: When you look inside this array name ‘default’ it holds few more key-value pairs. such as ‘view_path’, ‘assets_path’, ‘name’ all those are explained below:

default-theme

  • views_path: It’ll take the path of your views or blade files that you want to put up in your custom theme.

  • assets_path: Responsible for your assets i.e images, CSS and javascript files, etc.

  • name: Defines a global name for your theme inside Bagisto.

  • parent: This is a magic parameter that you can find in the commented code below the sub array ‘default’. Using this parameter you can make use of existing themes inside Bagisto and just customise them even further. This parameter will take the value of the ‘name’ parameter listed in 3rd point above.

bliss-theme

Finally, define your own paths and name of your custom theme inside ‘themes.php’ file , and start creating view files. Do not forget to cover all get routes of shop package having a parameter called ‘view’.

theme-route-file-location

Make sure the name of the blade file should be same as passed in this GET route file like this:

//Store front header nav-menu fetch
    Route::get('/categories/{slug}', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [
        'view' => 'shop::products.index'
    ])->name('shop.categories.index');

theme-route

For all views check all GET routes as they hold a view parameter with the value of view to be used.