Using Template Overrides in J1.5

One of my favorite tricks with J1.5 is the template overrides.

J1.5 ships with an example set of template overrides in the “beez” template. If you check out the “beez” template directory, you will find a directory named “html”.  This directory contains copies of certain module and component directories and their corresponding views.  

Example  
The directory : templates/beez/html/com_contact/contact/ is a copy of components/com_contact/views/contact/tmpl/

How this works :

Normally (when there is no template override in place), when you create a menu item to a single contact item (ie – Contacts -> Contact -> Standard Contact Layout), J1.5 will load components/com_contact/views/contact/tmpl/default.php to display the contact us page.  Depending on the settings within the menu item, default.php will in-turn load default_address.php (if you have checked off to show the address) and default_form.php which displayed the contact form itself.

J1.5 also checks for the existance of a template override diretory, which normally does not exist.  In the “contact us” case, it will look for the templates/beez/html/com_contact/contact/default.php and if it finds this file, it will override the default files.

Ok, so how do I use it?

The default contact us form doesn’t really collect much information.  So, lets add a new form field to the form.

Load  templates/beez/html/com_contact/contact/default_form.php in your favorite editor.

If you go to line 28, you should have something like :

<div class=”contact_email<?php echo  $this->params->get( ‘pageclass_sfx’ ); ?>”><label id=”contact_emailmsg” for=”contact_email”>
<?php echo JText::_( ‘Email address’ ); ?>*:</label>
<input type=”text” id=”contact_email” name=”email” size=”30″ value=”” class=”inputbox required validate-email” maxlength=”100″ />
</div>

 

After this block, add the following :

<div class=”contact_email<?php echo  $this->params->get( ‘pageclass_sfx’ ); ?>”><label id=”contact_emailmsg” for=”contact_phone”>
<?php echo JText::_( ‘Phone’ ); ?>*:</label>
<input type=”text” id=”contact_phone” name=”phone” size=”30″ value=”” class=”inputbox” maxlength=”100″ />
</div>

Save off the file, then reload your contact us form and you should now have a new field for Phone Number.

Adding some “required” form fields

If you have some fields you want to require your site visitors to fill out, you can add “required” to the field’s class
[code]class=”inputbox required”[/code]

So, using the phone example above, it becomes :

<div class=”contact_email<?php echo  $this->params->get( ‘pageclass_sfx’ ); ?>”><label id=”contact_emailmsg” for=”contact_phone”>
<?php echo JText::_( ‘Phone’ ); ?>*:</label>
<input type=”text” id=”contact_phone” name=”phone” size=”30″ value=”” class=”inputbox required” maxlength=”100″ />
</div>

 

Leave a Reply

Your email address will not be published. Required fields are marked *