How to Load CSS / JS in Element
A new Asset Manager introduced in Quix 1.1.0 to unify the interface throughout Quix for adding and managing CSS and JavaScript. Asset Manager simplify the process of adding JavaScript and/or CSS from your elements view file.
The Asset Manager is just a class that is available throughout Quix files. There are 2 paths already registered as global constant so you can quickly resolve the path from your elements.
Constant | Resolved Path |
---|---|
QUIX_URL |
/libraries/quix |
QUIX_TEMPLATE_URL |
/templates/YOUR_TEMPLATE/quix |
Adding Css
Assets::Css ( string $handle, string $src = false, int $order, string|bool|null $ver = false )
Parameters | Description |
---|---|
$handle |
(string) (Required) Name of the script. Should be unique. You can also pass $slug as its unqiue for every element |
$src |
URL of the script, eg: QUIX_URL."/assets/css/style.css" |
$order |
(int) (Optional) Specifying assets order, if it has one, asset will load on specified order or default order. |
$ver |
(string or bool or null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed Quix version. If set to null, no version is added. |
Example
Assets::Css($slug, QUIX_TEMPLATE_URL."/elements/MY_ELEMENT/css/style.css", 12);
Replace
MY_ELEMENT
with your element folder name. By defining 12 you are telling Quix to load this assets to 12 number position. If total assets is less than provided order value, it will load end of the asset.
Adding InlineCss
Create style.php
file insdie your element folder and you can write css code here. All css code will injected to your html header.
Beauty of this approach is, you can write conditional css with php and all the element fields available on this file.
Example
<?php if($field['title]):?>
#<?php echo $id?> .qx-title{ color: red; }
<?php endif?>
In this example, we checked if there anything in title field. If yes, we added title color. We can make it more dynamic like this :
<?php if($field['title]):?>
#<?php echo $id?> .qx-title{ <?php Css::prop('color', $field['title_color']);?> }
<?php endif?>
Adding Javascript
Assets::Js ( string $handle, string $src = false, array $deps = array(), int $order, string|bool|null $ver = false )
Parameters | Description |
---|---|
$handle |
(string) (Required) Name of the script. Should be unique. You can also pass $slug as its unqiue for every element |
$src |
URL of the script, eg: QUIX_URL."/assets/css/style.css" |
$deps |
(array) (Optional) An array of registered script handles this script depends on. |
$order |
(int) (Optional) Specifying assets order, if it has one, asset will load on specified order or default order. |
$ver |
(string or bool or null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed Quix version. If set to null, no version is added. |
Example
Assets::Js($slug, QUIX_TEMPLATE_URL."/elements/MY_ELEMENT/js/script.js", array('jQuery'), 12);
Replace
MY_ELEMENT
with your element folder name. By defining 12 you are telling Quix to load this assets to 12 number position. If total assets is less than provided order value, it will load end of the asset.
Adding Inline Javascript
Create another php
file inside your element folder and call it line any other javascript file.
Assets::Js( QUIX_TEMPLATE_URL . '/elements/MY_ELEMENT/inline-js.php');
If you add
php
file usingAssets::Js()
it will automatically add in your html header. There are several benefits of this approach. You can pass anyphp
value in yourjs
file.
Example
Assets::Js( QUIX_TEMPLATE_URL . '/elements/MY_ELEMENT/inline-js.php', compact(['id']));
inline-js.php file
jQuery(document).ready(function(){
jQuery("#<?php echo $id?>").css('width', 20);
});
In this example, we passed id
from our view
file(You can pass any php variable) and used it in your js file