Develop a Custom Theme

Tlcommerce has a theme system to extend the tlcommerce functionality with your customized front end. And you can build your custom theme and use it in the project. And also you can sell the theme personally or through the marketplace.

Theme Basic Structure

Theme Development Guide:

1. Name of the Theme

-- Create a folder of your desired theme name. The root folder name must be the same as the theme name.

2. Theme Configuration

- All themes are registered to the composer autoloader manually. A theme must need a theme.json file to provide all the needed information for autoloading.

Example:


 {
    "name": "CustomTheme",
    "location": "customtheme",
    "namespace": "Theme\\CustomTheme\\",
    "version": "1.0.0",
    "author": "Themelooks",
    "url": "http://www.themelooks.com/",//Author  URL
    "description": "Theme short description"
 }

3. Setup theme Banner

-You need to have a banner.png file to showcase the theme image. preferred size 294 x 95 px.

Directory Structure

1. Config

- The config directory contains the custom configuration file. If you want to create a custom configuration for the specific theme then you need to create a config.php file inside the config directory. and put the configuration array into the config.php file.

2. helpers

- The helper directory contains the helper function file. If you want to create a custom helper for the specific theme then you need to create a helper.php file inside the helpers directory. and create your custom helper function in the helper.php file and access it across the project.

3. public

- The public directory houses your assets such as images, Javascript, and CSS.

4. resources

- The resources directory contains your views as well as your raw, un-compiled assets such as CSS or JavaScript.

4.1. Access View

- All view files are located in the views directory inside the resources directory. You can access the view file like this - "theme/your_theme_location::rest_of_the_blade_file_path".

Example -


 $users = User::all();
 return view('theme/customtheme::backend.users.index', compact('users'));

4.2. Register Module In Admin Panel

- If you want to show the theme-related modules link in the admin sidebar you have to create an includes folder in the views/backend directory. And a themeOptions.blade.php in the includes directory. In the theme options file, you can write the nav item.

5. routes

- The routes directory contains all of the route definitions for the custom theme. you can create two route files such as web.php and api.php and define all routes in these files.

6. src

- The src directory contains the core code of your theme. Almost all of the classes in your theme will be in the directory. You can create your Controller, Model, Requests, and other classes in this directory.

6.1. Create Controller

a. File location: src/Http/Controller

Example:

 ?php

 namespace Theme\CustomTheme\Http\Controllers;

 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;

 class DemoThemeController extends Controller
 {
    /**
     * Will return demo plugin page sections
     * 
     * @return View
     */
    public function index(Request $request)
    {
        return view('theme/customtheme::index');
    }

 }

This was the step-by-step guide with folder and file structure. A Test Theme is Provided With our Latest update. You can follow the theme instructions to make your customized theme or you can customize the Test Theme with your functionality.

We have multiple Theme helper functions in Core/Helpers. You can use those functions to develop your theme.
When you ready your Theme then you can install your theme from the theme manager.

Develop a Custom Theme

Related Blog