ChatPion front-end theme development documentation

Hello everyone,

Majority of you guys are interested in ChatPion extended license. Many of you guys already have a successful business leveraging the power of ChatPion. Doing business means a powerful and converting sales page. Different people would like to design their sales page in different flow and content. It is not easy for us to meet everyone's requirements and reflect those in a single front-end theme.

Also many of you customized the front-end and they often reset in ChatPion updates. You all want freedom to customize front-end and here you go. Now you can develop your very own ChatPion front-end theme (ChatPion v1.2.7). The most interesting part is, you can sell it to others personally or through marketplaces like codecanyon !

Folder Structure:

1. Create a folder inside application/views/site/ directory. Your folder name should not contain any spaces (Example: CustomTheme).
2. Your new theme folder must contain a file named index.php which will be the landing page of ChatPion. At the very top of this index.php file you can mention a name of your theme, description, version, author name and URI like below:

   <?php
/*
Theme Name: CustomTheme
Unique Name: CustomTheme
Theme URI: https://example.com/theme
Author: CustomTheme Author
Author URI: https://example.com
Version: 1.0
Description: Custom theme description
*/
?>

3. Put a thumbnail mage named thumb.png at the root of your theme folder (670x480 dimension preffered)
4. You can create a folder named css at the root of your theme folder, where your style files will be located.
5. You can create a folder named js at the root of your theme folder, where your javascript files will be located.
6. You can create a folder named images at the root of your theme folder, where your images files will be located.
7. You can create the below files with specified names. These files will require a theme file named subscription_theme.php to load.
   
   

   Page	File Name
   Login page	login.php
   Sign Up page	sign_up.php
   Account activation page	account_activation.php
   Forgot password page	forgot_password.php
   Password recovery page	password_recovery.php
   Credential check page	credential_check.php

   
   
   
8. You can also create the below files with specified names. These files will require a theme file named theme_front.php to load.
   
   

   Page	File Name
   Privacy policy page	privacy_policy.php
   Terms of use page	terms_use.php
   GDPR complaint page	gdpr.php

Facebook Pixel & Google Analytics Code:

You can include Facebook pixel code provided by system admin into your theme by adding the below code inside your files ( index.php, theme_front.php and subscription_theme.php ) :

<?php $this->load->view("include/fb_px"); ?>

<?php $this->load->view("include/google_code"); ?>

Configuration PHP Variables

You can print them inside php tag like
<?php echo $this->config->item('product_name');?>
or assign to a PHP varibale like
<?php $product_name = $this->config->item('product_name');?>.

Array
(
[0] => Array
    (
        [0] =>https://demo.xerochat.com/assets/site_new/img/tutorial/blog-1.jpg
        [1] => Facebook App Configuration
        [2] => https://www.youtube.com/watch?v=6jiNS_4CEug
    )

[1] => Array
    (
        [0] =>https://demo.xerochat.com/assets/site_new/img/tutorial/blog-2.jpg
        [1] => Page Posting Feature
        [2] => https://www.youtube.com/watch?v=6jiNS_4CEug
    )

)

					

Array
(
[0] => Array
    (
        [0] => Ava Adams
        [1] => Artist
        [2] => https://demo.xerochat.com/assets/site_new/img/client/thumb-1.jpg
        [3] => Lorem ipsum sit amet, consectetur adipisicing elit. 
    ),

[1] => Array
    (
        [0] => John Roger
        [1] => Designer
        [2] => https://demo.xerochat.com/assets/site_new/img/client/thumb-2.jpg
        [3] => Lorem ipsum sit amet, consectetur adipisicing elit.  consequuntur similique.
    )

)
					

			
Array
(
    [0] => Array
        (
            [id] => 1
            [package_name] => Trial
            [module_ids] => 1,2,3
            [monthly_limit] => {"1":"1","2":"1","3":"1"}
            [bulk_limit] =>  {"1":"0","2":"0","3":"0"}
            [price] => 12
            [validity] => 28
            [validity_extra_info] => 4,W
            [is_default] => 0
            [visible] => 1
            [highlight] => 0
            [deleted] => 0
        )

    [1] => Array
        (
            [id] => 2
            [package_name] => Everything
            [module_ids] => 1,2,3
            [monthly_limit] => {"1":"0","2":"0","3":"0"}
            [bulk_limit] =>  {"1":"0","2":"0","3":"0"}
            [price] => 12
            [validity] => 28
            [validity_extra_info] => 4,W
            [is_default] => 0
            [visible] => 1
            [highlight] => 0
            [deleted] => 0
        )
)

			
			

			
 <ul>
    <?php 
        $module_ids=$pack["module_ids"];
        $monthly_limit=json_decode($pack["monthly_limit"],true);
        $module_names_array=$this->basic->execute_query('SELECT module_name,id FROM modules WHERE FIND_IN_SET(id,"'.$module_ids.'") > 0  ORDER BY module_name ASC');

        foreach ($module_names_array as $row) : ?>
        <li>
            <i class="fas fa-circle"></i>&nbsp;
            <?php 
            $limit=0;
            $limit=$monthly_limit[$row["id"]];

            if($limit=="0")
            $limit2="<b>".$this->lang->line("unlimited")."</b>";
            else$limit2=$limit;

            echo $this->lang->line($row["module_name"]);
            echo " : <b>". $limit2."</b>"."<br>";
            ?>
        </li>
        <?php 
        endforeach; 
    ?>
</ul>
			
			

Page Links

You can print them inside php tag like <?php echo base_url('home/login');?> tag or assign to a PHP varibale like <?php $login_url = base_url('home/login');?>.

Load CSS and JS Files

In order to load your .css (resides in css folder) or .js (resides in js folder) file you have to use the following formats:
<link href="<?php echo base_url('home/xit_load_files/FOLDER_NAME/CSS_FILE_NAME'); ?>" rel="stylesheet">

<script src="<?php echo base_url('home/xit_load_files/FOLDER_NAME/JS_FILE_NAME'); ?>"></script>
* Replace FOLDER_NAME, CSS_FILE_NAME, JS_FILE_NAME with your corresponding folder and file names.

Load Image

You can load your image file by calling a function like below :
<img src="<?php echo xit_load_images('FOLDER_NAME/IMAGE_FILE_NAME'); ?>">
* Replace FOLDER_NAME, IMAGE_FILE_NAME with your corresponding folder and file names.

Activating Theme

You can activate/delete theme from System > Theme Manager Menu

Development Purchase Codes

Since you will develop and test theme in your localhost, we are providing purchase codes for development environment.