In order to create a BillingFox client area you have to use getElement('top_client_area')
in the top of your pages, getElement('header_client_area')
before <head>
of your pages and getElement('footer_client_area')
before <body>
of your pages.
After that you will have to edit all file paths to use your cloet area files, example: set <link rel="stylesheet" href="/css/style.css">
to <link rel="stylesheet" href="/content/client_areas/YOUR_CLIENT_AREA_DIRECTORY/css/style.css">
Now you have to set logo image link to images/brand/logo.webp
and the redirects to files without file extension (BillingFox validate URLs without file extensions for aesthetic purposes)
Replace all strings with language variable from content/LANG/english.php
with their translation, for example, we will take this line from translations: $_LANG['client_area']['admin_panel'] = 'Admin panel';
and we will go to on client area files and replace 'Admin panel' or 'Admin dashboard' or something like that to Admin panel , use this for all texts.
Now you must load custom menu item list from addons by using (Check right side of the documentation under "Get custom menu addon list" section) Replace classes and div elements with your integrated client area classes and elements. You can use BillingFox functions to customize your client area [check Functions & Definitions section] and you can take as referrence other client areas.
After you finished client area files you can add them into a new client area directory in content/client-areas/
, after you activate the client area, it should display properly.
Load the resources mapping:Copy to clipboard$this->setBootstrap(true)
Print an associative array or object:Copy to clipboard$this->loadResourcesMap(".resource");
Load template resources:Copy to clipboard$this->BF_print($obj = array("test" => true));
Create more complex buttons: UsageCopy to clipboard$this->loadResources($location = "header", $docBase = "/");
Copy to clipboard// Create a simple button:
// $this->createButton(string $content, array $options); $this->createButton("Click me", array( 'tag' => 'a', // can be also button or input 'class' => 'btn btn-primary', 'href' => '#', // 'type' => '', // can be "submit" 'disabled' => false, // 'value' => '', // This will set the button value attribute // 'return' => 'resource' // This will return the resource object instead of the HTML element // 'target' => '_blank' // This will define the "target" attribute of the button ));
Foreach trough addon menu items:Copy to clipboard// Copy the files from \install\internal\client_areas\bootstrap into your client area folder, now you can change them as you like.
Copy to clipboard<!-- Get custom menu addon list --> <?php $menu = getMenuItems(); if(is_array($menu)) { foreach($menu as $item) { ?> <a href="<?php echo $item['href']; ?>"> <div class="icon menu-item"><?php echo $item['icon']; ?></div> <div class="text menu-item"><?php echo $item['item_display'];?></div> </a> <?php } } ?>
Your BillingFox client area can contain a "functions.php" file so you can use the templating system properly, there you can declare the custom configuration and pre-built options.
Copy to clipboard// Client area style configuration file example:
<?php /** * @since BillingFox 11.0 * @package FoxBird */ /* * Default configuration for this theme */ $uservar = (isset($_SESSION['user_id'])) ? getUserVar($_SESSION['user_id']) : -1; $this->config = array( 'useBootstrap' => true, /* Let the BillingFox Render know if it should use Bootstrap or not */ 'adminBootstrapButtons' => true, /* Let BillingFox Render know if it should display admin area buttons as bootstrap or default cards */ 'customElementsPath' => 'elements', 'pagesNoHeaderOrFooter' => array( 'login', 'register' ), /* Pages that will be rendered without using the header and footer of the client area style, perfectly in combination with custom client area page styles */ 'stat' => array( 'holder' => array( 'tag' => 'div', 'class' => 'cards-inline', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'a', // the element tag 'class' => 'card-style', ), // The element itself 'heading' => array( 'tag' => 'div', // the heading tag 'class' => 'card-title', ), // The heading element in the stat card 'content' => array( 'tag' => 'div', // the content tag 'class' => 'card-info', ), ), 'stat-order' => array( 'holder' => array( 'tag' => 'div', 'class' => 'order-cards', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'div', // the element tag 'class' => 'cat', ), // The element itself 'heading' => array( 'tag' => 'strong', // the heading tag 'class' => 'cat-title', ), // The heading element in the stat card 'content' => array( 'tag' => 'div', // the content tag 'class' => 'cat-content', ), ), 'product-specifications' => array( 'holder' => array( 'tag' => 'ul', 'class' => 'product-specifications', ), 'product-thumbnail' => array( 'holder' => array( 'class' => 'product-thumb-container', 'tag' => 'div', ), 'self' => array( 'class' => 'product-thumb-img', ), ), 'style' => 'list' // "plain" to avoid printing product specifications as a list ), 'announcement' => array( 'holder' => array( 'tag' => 'div', 'class' => 'announcements', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'div', // the element tag 'class' => 'announcement', 'class_important' => 'announcement announcement--important', ), // The element itself 'heading' => array( 'tag' => 'h3', // the heading tag 'class' => 'announcement-title', ), // The heading element in the announcement 'content' => array( 'tag' => 'p', // the content tag 'class' => 'announcement-details', ), ), /* Change the default configuration of the stat card element, on default theme you can find it as the "Services" or "Domains" rectangle on the main page of the client area */ 'resources' => array( 'notFound' => array( 'tag' => 'p', 'class' => 'no-resources-found', ), // The element displayed in case that there are no resources found. 'holder' => array( 'tag' => 'div', 'class' => 'resources', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'div', // the element tag 'class' => 'resource', 'resourceNameClass' => 'resource-name', 'resourceDescriptionClass' => 'resource-description', 'resourcePreviewClass' => 'resource-preview', ), // The element itself 'installButton' => array( 'class' => 'installBtn', 'successClass' => 'success-install', 'failedClass' => 'failed-install', 'holder' => array( 'tag' => 'div', 'class' => 'resource-control', ), ), // The resource installation button ), 'table' => array( 'holder' => array( 'tag' => 'div', 'class' => 'table-responsive', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'table', // the element tag 'class' => 'table table-bordered', 'generateID' => true, // generate a random ID attribute for the table 'width' => '100%', // set element width attribute 'cellspacing' => '0', // set the cellspacing attribute for the table ), // The element itself 'tableHead' => array( 'tag' => 'thead', 'class' => '', ), // The element itself 'tableFoot' => array( 'tag' => 'tfoot', 'class' => '', ), // The element itself ), /* Change the default configuration of the table element */ 'card' => array( 'holder' => array( 'tag' => 'div', 'class' => 'card-container', ), 'self' => array( 'tag' => 'div', 'class' => 'card', ), 'headline' => array( 'tag' => 'h4', 'class' => 'card-title', ), 'headline_descriptor' => array( 'tag' => 'i', 'class' => 'card-desc', ), 'content' => array( 'tag' => 'p', 'class' => 'card-content', ), ), /* Change the default configuration of the card element. */ 'button' => array( 'class' => 'btn btn-success mt-2', ), /* Change the default configuration of the button element. */ 'addonsList' => array( 'listContainer' => array( 'tag' => 'div', 'class' => 'addons_list', ), 'itemContainer' => array( 'tag' => 'div', 'class' => 'addon_item' ), 'itemIcon' => array( 'class' => 'addon_icon', 'show' => true, ), 'itemCategory' => array( 'tag' => 'p', 'class' => 'addon_category', 'show' => true, ), 'itemAuthor' => array( 'tag' => 'p', 'class' => 'addon_author', 'show' => true, ), 'itemIconContainer' => array( 'tag' => 'div', 'class' => 'addon_icon_container', ), 'itemVersion' => array( 'tag' => 'div', 'class' => 'addon_version', 'show' => true, ), 'itemName' => array( 'tag' => 'strong', 'class' => 'addon_name', ), 'itemDescription' => array( 'tag' => 'p', 'class' => 'addon_description', ), 'itemButtonsContainer' => array( 'tag' => 'div', 'class' => 'addon_actions', ), ), /* Change the default configuration of the addons list element */ ); ?>
Since BillingFox 11.0 you can use prebuilt elements and create your own.
Usage:Elements availableCopy to clipboard// Create a card section with your website admin buttons:
// $this->addElement(string $elementName, array $options); $this->addElement('open-card-container', array()); $this->addElement('open-card', array()); $this->addElement('card-head', array('headline' => $_LANG['index']['menu'])); $this->addElement('open-content-open', array()); $this->addElement('hr', array()); $this->addElement('admin-buttons', array()); $this->addElement('hr', array()); $this->addElement('addon-buttons', array()); $this->addElement('open-content-close', array()); $this->addElement('close-card', array()); $this->addElement('close-card-container', array());
-
stat
Small information card.
-
billingfox-announcements
Display the BillingFox announcements section.
-
button
Generate a button.
-
stat-order-product
Generate a product order card.
-
stat-order
Generate a category order card.
-
announcement
Generate an announcement card.
-
open-card-container
Opens a normal card container element.
-
open-card
Opens a normal card element.
-
card-head
Generates the card head element.
-
card-content-open
Opens a normal card content element.
-
card-content-close
Closes a normal card content element.
-
close-card
Closes a normal card element.
-
close-card-container
Closes a normal card container element.
-
hr
Appends a line separator to the page.
-
admin-buttons
Generates the administration buttons.
-
table
Generates the table element.
-
products-menu
Generates admin products management page menu.
-
(custom element name)
Generates a custom template element.
-
(others)
Generates a basic element.
Copy to clipboard<!-- Get custom menu addon list --> <?php $menu = getMenuItems(); if(is_array($menu)) { foreach($menu as $item) { ?> <a href="<?php echo $item['href']; ?>"> <div class="icon menu-item"><?php echo $item['icon']; ?></div> <div class="text menu-item"><?php echo $item['item_display'];?></div> </a> <?php } } ?>