Customization of restaurant biller can be accomplished in a few ways:

    • Custom Themes/templates
    • Custom css modifications
    • Customization of source (php) code
    • Payment gateway plugins

All customization of restaurant biller requires ftp or shell access to your server and skills in html, css and possibly php.  This documentation assumes the reader has the required skills.  If you need assistance with customization, please contact allan@restaurantbiller.com

Custom Themes

This is the primary way of customizing restaurant biller.  Most customers do some basic customization of the default theme.

Restaurant biller themes are a set of templates  and css, based on the industry standard ‘Smarty‘ templating system.

Themes are assigned to a restaurant in /admin > restaurant settings.  The system comes with a ‘basic’ default theme.  Please do not customize the basic theme, so that you can more easily accept updates and bug fixes.  Please create a new theme, and customize it. More than one restaurant can use the same template set.

New themes are created by creating a new folder in the /templates folder.  For example: “/templates/mysite”.  Please note: do not copy the entire /templates/basic folder.  Simply create a new empty folder.

The system is designed such that if a required template file does NOT exist in the specified theme directory, it will use the one found in the basic theme folder.  This makes it very easy to customize the system – simply copy the files you want changed from the basic folder to your custom folder.  Please DON’T copy over all of the files.  This will work, but it will be difficult to manage which files have changed, and make future upgrades of the system harder.

CSS customization for your theme

The simplest customizations of a theme involve modifying the css used. In most cases the best option is to copy the customStyle.css file from the basic theme to your custom theme, and add your custom css.  This file is initially blank, but it is loaded by the default template.  This takes advantage of the ability of css to override style definitions supplied in style.css.  This allows you to keep your changes all in a single place (customStyle.css), making it _very_ easy to upgrade to a new version of the software, or create and maintain additional themes.  If you copy and modify style.css you will be responsible for managing the merging of any future changes to this file, please do not customize style.css

In order for client-side file references in your templates to have the same ‘fall-back’ logic of the smarty template system, you need to use a smarty function to generate the correct paths to any new client files (such as images) that you want to reference directly.  This isn’t necessary for image referenced from within your style sheets, as they support relative references natively.  You can find examples in the default templates – the syntax is: {getPathName file=’style.css’}  All paths will be relative to the template folder.  It is possible to hard-code the paths to your images or custom javascript to the custom theme folder that you created, but doing so means you would not be able to rename the theme, or easily copy it and recustomize it.  Using the getPathName syntax means you will always get the correct path to your file.

Bootstrap

Restaurant biller makes heavy use of the bootstrap css framework to provide a responsive design that works well on mobile devices.  When customizing the css of the app, PLEASE DO NOT OVERRIDE THE BOOTSTRAP CSS CLASSES.  This will have unexpected and unpredictable effects on the application.  Please use your css development tools such as the chrome developer tools or firebug to understand where the css rules you are trying to override are coming from. If you want to override the css rules that happen to be provided by the bootstrap framework, please use very specific css selectors so that you are sure that you will only be affecting the parts of the page that you intended (no side effects).  Add unique css classes to the html elements in the smarty templates if neccesary.  Also, please test your code on mobile devices or emulators – at the very least resize your browser into very narrow widths so that you will see the impact to your layout on small devices.  There are a lot of development plugins for your browser that can assist with this type of testing.  If you are not familiar with the bootstrap css framework, please consider taking the time to read up and learn about it before attempting to major css customizations of this system.  If you are hiring a web designer to do your customizations, please consider making familiarity with Bootstrap a requirement – Bootstrap is a very popular css framework and most good web designers should have some experience with it.

Custom CSS classes

It is possible to override some of the style definitions by specifying a custom css class to apply to the <html> element via a url parameter.  This allows you to have a very fine-grained control over the look of the application in certain contexts.  This is most useful for controlling the look of the application when used in an iFrame.  To use this feature, simply add “customClass=myclassname” to the url.  For example:

<iframe src="orders.mydomain.com/index.php?customClass=iframe" ></iframe>

This will result in an html tag like this: <html class=”iframe”> for all page requests until a different class is specified (for the rest of the users’s browsing session).

Then, in your customStyle.css file, you can use this new class as an extra selector:

.iframe #left { display: none } /* hide the left navigation when displaying in an iframe */

Note: the admin side of the system will also load the customAdminStyle.css file, so you can customize the admin pages styles.  It also supports the customClass parameter to provide more flexibility for custom styling. It does NOT support the use of custom templates like the front-end of the system does, nor does it support language translation features.

The admin html element also has the class ‘admin’ added to it so that you can uniquely specify css only for the admin pages, like so:

.admin #header {background-image: none} /* header background does not apply to admin pages, only the front-end ... */

There are other security issues to consider when using iFrames, particularly with https sites (required if you are hosting your own payment pages rather than using paypal).  Please contact allan@restaurantbiller.com for more advice if you plan on using iframes with https for your site.

Customization of PHP code

All of the php files that contain application logic are unencrypted, so an experienced php developer could customize the system in any way desired.  The system has one encrypted file which handles license enforcement (and the system won’t run without it), but all of the other system logic can be modified.  Please note that we cannot provide free support for your developers or the resulting customized sites.  We are happy to provide free support for issues that can be reproduced in the the default templates and php code for a period of 1 year after purchasing the system.  Please first test using the default templates before contacting us for assistance.

Payment Gateway plugins

The payment gateways in restaurant biller are plugins found in /modules/gateways.  This makes it VERY easy to add new gateways to the system.

To create a new payment gateway you can simply copy one of the other gateway folders (e.g. authorize).  The name of the folder is the name of the new gateway (every gateway must supply a display name for the gateway so the name of the folder is not critical).  Each gateway must have two files: index.php and admin.php.

Index.php is called during the checkout process, and has order and customer information available to it, and the code to generate the payment form – you can see the details in the authorize/index.php file, and you may be able to re-use the payment form elements.

admin.php is displayed in admin > payment gateways.  This file generates the user interface for the configuration fields needed for your gateway.  The system will automatically save the information stored in the $gateway_array variable – you do not need to do anything other than display the appropriate form fields.  You can look at authorize/admin.php and other gateways for examples.

Don’t forget to ‘enable’ the new payment gateway in  /admin > payment gateways.