Autoload File

The autoload file contains all the JS/CSS/Helper or any third-party file that needs to be loaded, in extension. For JS and CSS files use the separate array with specifying a key. As the config file, you don't need to load this file or variable anywhere it will load automatically at the time of the extension's activation.

How to load JS/CSS file

$config variable used for js/css

JS file

$config['js-files'] = array();

CSS file

$config['css-files'] = array();

The $config variable has an array containing file and location keys. 1. file:- this key has the path of the file. 2. location:- this key has an array of locations where you want to load this specific file. The value passed in this array is the controller name and method name such as controller_name/method_name, you can add multiple locations in this array.

Here is a stepwise syntax

// define an array for js files
1. $config['js-files'] = array();

// add array of js files
2. $config['js-files'] = array(
        array( 
                "file" => '',
                "location" => array(),
        ),
    );

// added file path 
3. $config['js-files'] = array(
        array( 
                "file" => 'assets/js/file_1.js',
                "location" => array(),
        ),
    );

// add location 
4. $config['js-files'] = array(
        array( 
                "file" => 'assets/js/file_1.js',
                "location" => array(
                     "controller_name_1/method_name", 
                ),
        ),
    );

Here is a real example

$config['js-files'] = array(
    array(
        "file" => 'assets/js/booking_list.js', // file path
        "location" => array(
            "show_booking/show_latest_bookings", // controller_name/method_name
        ),
    ),
);

The same thing goes for CSS files, in place of js-files write css-files.

$config['css-files'] = array(
    array(
        "file" => 'assets/css/booking_list.css', // file path
        "location" => array(
            "show_booking/show_latest_bookings", // controller_name/method_name
        ),
    ),
);

How to load Helpers file

Here is an example of a helper file.

// file name is custom_helper.php
function custom_helper_method($arg){
    // start writing code here   
}

$extension_helper variable used for loading helpers

In the $extension_helper array you can pass multiple helpers.

// single file load
$extension_helper = array('custom_helper');

// multiple file load
$extension_helper = array('custom_helper', 'custom_helper_one');

Use The custom helper on Controller

When you pass the helper name into the $extension_helper array it loads automatically on extensions loading. You can use it anywhere below is an example given how.

 // this is just a check for function, it will prevent error if function is loaded
 if(function_exists('custom_helper_method')){
     custom_helper_method($agr);
 }

How to load Third-party files

miniCal allows you to use any third-party packages, either direct CDN path or you want to use downloaded one. Here is an example of the CDN path.

// js file 
$config['js-files'] = array(
    array(
        "file" => 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
        "location" => array(
            "controller_name/method_name",
        ),
    ),
);

//css file
$config['css-files'] = array(
    array(
          "file" => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
          "location" => array(
            "controller_name/method_name",
        ),
    ),
);

If you have your third-party package downloaded and want to load its js/css file then place the package under your extension folder. Here we have a third-party-package under our extension, this package has a city-name folder, and this folder has a city.js file.

|->public
     |->application
	    |->extensions
		  |->minical-extension-boilerplate
			 |->assets
                         |->config
                         |->controllers
                         |->helpers
                         |->hooks
                         |->language
                         |->libraries
			 |->models
			 |->views
                         |->third-party-package
                                |->city-name
                                      |->city.js

Load downloaded package JS/CSS

// js file 
$config['js-files'] = array(
    array(
        "file" => 'third-party-package/city-name/city.js',
        "location" => array(
            "controller_name/method_name",
        ),
    ),
);

The same thing goes for the CSS files just place the path of the CSS file.

Last updated