Support > Documentation > Template Override

Template Override


Template overriding is the best way to customise the display of any screen. Template override should be preferred over hacking the tmpl files. Let see how can we do it in Payplans.

Core Template Override

To override the component's display you should follow the following steps.

  1. Go to your selected Joomla Template Directory => html
  2. Create a directory with the component name, e.g. com_payplans
  3. Create another directory with the name of view, which you want to customise.
  4. Create the file or copy the file which you want to customise.
  5. Write or change the code of this file according to your need.

Lets take an example. We have a screen of Login/Registration after Plan Selection.

Login

The URL of this screen is www.oneofmysite.com/index.php?option=com_paplans&view=plan&task=login . I do not want to show option for login. It can be done by changing the core code of Payplans. But with each upgrade of Payplans, your hack will be removed, and you are required to hack the code again. Alternate way is by template overriding.

  1. In URL option is com_payplans, so I have to look for JoomlaRoot => components => com_payplans
  2. View of this URL is plan, it mean I need to look for templates => default => plans in addition to above path. Here default is the template name of Payplans. Currently it is only default, in future it may have several templates. Then you need to use your current template name instead of default.
  3. In the above path there is a file default_login.php In this file the login box comes from the following code.
  4. <div id="user-login">
    <h4><?php echo XiText::_('COM_PAYPLANS_LOGIN_HEADING'); ?></h4>
    <div class="label-input-row">
    <div class="login-label"><?php echo XiText::_('COM_PAYPLANS_LOGIN_USERNAME');?></div>
    <div class="login-input"><input type="text" name="payplansLoginUsername"/><span>*</span></div>
    </div>

    <div class="label-input-row">
    <div class="login-label"><?php echo XiText::_('COM_PAYPLANS_LOGIN_PASSWORD');?></div>
    <div class="login-input-><input type="password" name="payplansLoginPassword"/><span>*</span></div>
    </div>

    <div class="label-input-row">
    <div class="login-label">&nbsp;</div>
    <div class="login-input"><input type="submit" id= "payplansLoginSubmit" name="payplansLoginSubmit" value="<?php echo XiText::_('COM_PAYPLANS_LOGIN_BUTTON'); ?>" /></div>
    </div>
    </div>
  5. Now goto JoomlaRoot => templates => yourSelectedJoomlaTemplate => html
  6. Create a directory named com_payplans (it is value of option)
  7. Create a directory in com_payplans named plan (it is value of view)
  8. Copy the default_login file from its original location (as described above) to plans directory.
  9. Remove the code of login box from this file.
  10. Check the Screen again. It will look like

Customized Login

Plugin Template Override

By following steps you can change the display of any plugin of Payplans, if plugin displays anything. Like Registration etc.

  1. Create a directory named _plg in JoomlaRoot => templates => selectedTemplate => html => com_payplans
  2. Create a directory in _plg and name of directory must be type of plugin  (like payplans, payplansregistration etc)
  3. Copy the file from its original location to above directory and make change.

App Template Override

By following steps you can change the display of any App of Payplans, if App displays anything. Like Userdetail, Payment App etc.

  1. Create a directory named _app in JoomlaRoot => templates => selectedTemplate => html => com_payplans
  2. Create a directory in _app and name of directory must be type of app  (like paypal, authorize, userdetail etc)
  3. Copy the file from its original location to above directory and make change.
  • Thursday, 24 November 2011
  • Posted in: Customization

Disqus Comments

blog comments powered by Disqus

PayPlans + Stackideas Pack!