Login

Xerone IT Shop

Sign Up Login

ChatPion front-end theme development documentation


29th Oct 2019

6

33994

Social Media Management

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 !

You can download this demo theme and start working on to practice and understand.

DEMO THEME
NOTE : Please don't open support ticket regarding theme development. If you have any issue or need to know anything, comment on the below comment area. We don't provide support for this purpose.



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:

    /*
    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 ) :

load->view("include/fb_px"); ?>

Similarly you can include Google analytic code by adding the code below :

load->view("include/google_code"); ?>



Configuration PHP Variables

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


PHP Variables Example value
$this->config->item('product_name') Product name
ChatPion - Multichannel Marketing Application
$this->config->item('product_short_name') Product short name
ChatPion
$this->config->item('slogan') Product Slogan
#1 Multichannel Marketing Application
$this->config->item('institute_address1') Company Name
Xerone IT
$this->config->item('institute_address2') Company Address
Holding No. 127, 1st Floor, Gonok Para
$this->config->item('institute_mobile') Company Mobile Number
01729853645
$this->config->item('institute_email') Company Email Address
support@xerochat.com
$this->config->item('display_video_block') Returns ‘0’ or ‘1’
‘0’ means Promo video or Tutorial video block will not be displayed.
‘1’ means Promo or Tutorial video block will be displayed.
$this->config->item('custom_video') Returns video tutorial list in php array format. 

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
    )

)
0 = video thumbnail url
1 = video title
2 = youtube url for video tutorial
$this->config->item('promo_video') Returns youtube url for promo video.
https://www.youtube.com/watch?v=wogvTfRYKWw
$this->config->item('customer_review_video') Returns youtube url for customer review video.
https://www.youtube.com/watch?v=wogvTfRYKWw
$this->config->item('display_review_block') Returns ‘0’ or ‘1’
‘0’ means customer review block will not be displayed and ‘1’ means customer review block will be displayed.
$this->config->item('customer_review') Returns the review of customer in array format 

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.
    )

)
[0] = Reviewer name
[1] = Reviewer designation
[2] = Reviewer image url
[3] = Review content
$this->config->item('enable_signup_form') Returns ‘0’ or ‘1’
‘0’ means sign up button will not be displayed in landing page or login page.
‘1’ means sign up button will be displayed in landing page or login page.
$this->config->item('facebook') Returns the Facebook profile url.
https://www.facebook.com/xeroneitl
$this->config->item('twitter') Returns twitter profile url.
https://twitter.com/alaminJwel
$this->config->item('linkedin') Returns linkedin profile url.
https://www.linkedin.com/in/alaminjwel
$this->config->item('youtube') Returns youtube channel url.
https://www.youtube.com/xeroneit
$this->is_ad_enabled Returns true or false
true means advertises will be displayed.
false means advertises will not be displayed.
$this->is_ad_enabled1 Returns true or false.
true means 970x90 advertise will be displayed.
false means 970x90 advertise will not be displayed.
$this->ad_content1 Returns the content for 970x90 advertise.
$this->ad_content1_mobile Returns the content for 320x100 advertise that replaces 970x90 advertise in mobile devices.
$this->is_ad_enabled2 Returns true or false.
true means 300x250 advertise will be displayed.
false means 300x250 advertise will not be displayed.
$this->ad_content2 Returns the content for 300x250 advertise.
$this->is_ad_enabled3 Returns true or false.
true means another 300x250 advertise will be displayed.
false means 300x250 another advertise will not be displayed.
$this->ad_content3 Returns the content for another 300x250 advertise.
$this->is_ad_enabled4 Returns true or false.
true means 300x600 advertise will be displayed.
false means 300x600 advertise will not be displayed.
$this->ad_content4 Returns the content for 300x600 advertise.
$pricing_table_data Returns the content for pricing tables as PHP array. 
			
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
        )
)
You can access the array and print package modules using list like below : 
			
 
    
    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) : ?>
        
  • 
             
            ".$this->lang->line("unlimited")."";
            else$limit2=$limit;

            echo $this->lang->line($row["module_name"]);
            echo " : ". $limit2.""."
    ";
            ?>
        
    •


Page Links

You can print them inside php tag like tag or assign to a PHP varibale like .


Page Name URL to use
login.php base_url('home/login')
sign_up.php base_url('home/sign_up')
account_activation.php base_url('home/account_activation')
forgot_password.php base_url('home/forgot_password')
password_recovery.php base_url('home/password_recovery')
credential_check.php base_url('home/credential_check')
privacy_policy.php base_url('home/privacy_policy')
terms_use.php base_url('home/terms_use')
gdpr.php base_url('home/gdpr')


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:



* 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 :

* 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.


We recommend not to change any form elements into the files login.php, sign_up.php and contact form in index.php file. If you want to change form’s outlook then we recommend to write css for the form elements.



6 Comments Login to comment

  • wazergtduttyflex

    5 years ago

    i am trying to create a sperate page for contact but it not loaded I am getting a 404 is multi pages not supported?

    • xeroneitbd Admin

       5 years ago

      You can't add pages rather than we have provided here in list.

      There is way to add other page, but that will need some work on Controller files to display the views. We are not supporting this option yet in this docs. We will have more think in future .

  • info@xeroneit.net

    5 years ago

    interesting, but it would be more interesting the possibility to customize the backend.

    when this function will be available

    • alaminjwel Admin

       5 years ago

      That option is too much complex. We have no such plan like this.

  • NRF

    5 years ago

    Good evening,

    I can't open the ZIP file, I get an error message.

    Do you have a solution?

    • alaminjwel Admin

       5 years ago

      I just tried and the zip is working. Try turning off download manager if you are using any.


This site requires cookies in order for us to provide proper service to you      Got it