Difference between revisions of "Template Tricks"

From TMM Wiki
Jump to navigationJump to search
(Created page with 'There are some common things that many clients wish to do on their pages with Smarty templates. These are a few examples and how to complete them. If you have suggestions for o…')
 
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
<H1>Smarty tips and tricks for NATS templating</H1>
 +
 
There are some common things that many clients wish to do on their pages with Smarty templates.  These
 
There are some common things that many clients wish to do on their pages with Smarty templates.  These
 
are a few examples and how to complete them.  If you have suggestions for other examples, please let us
 
are a few examples and how to complete them.  If you have suggestions for other examples, please let us
Line 13: Line 15:
 
based on your preferences.
 
based on your preferences.
  
By default you have something that looks like this:
+
By default your template will have something that looks similar to this:
  
 
<pre><select class="join_select" name="signup[country]">{html_options options=$countries selected=$country}</select></pre>
 
<pre><select class="join_select" name="signup[country]">{html_options options=$countries selected=$country}</select></pre>
  
To modify this you would need to change it into a foreach loop like this:
+
To modify this you would need to change it into a foreach loop such as:
 
<pre>
 
<pre>
 
<select class="join_select" name="signup[country]">
 
<select class="join_select" name="signup[country]">
{forach from=$countries item=countryname key=countryid}
+
{foreach from=$countries item=countryname key=countryid}
 
<option value={$countryid}>{$countryname}</option>
 
<option value={$countryid}>{$countryname}</option>
 
{/foreach}  
 
{/foreach}  
 
</select>
 
</select>
 
</pre>
 
</pre>
At this point we have the html options command broken into a loop.  Now to actually remove a country, we would do
+
At this point we have the html options command broken into a loop.  To remove a country, we would use a smarty if statement as such:
something like this:
 
 
<pre>
 
<pre>
 
<select class="join_select" name="signup[country]">
 
<select class="join_select" name="signup[country]">
Line 50: Line 51:
 
</select>
 
</select>
 
</pre>
 
</pre>
 +
 +
'''NOTE: In NATS 4 there is a configuration variable, found in the configuration admin under the Surfers section called SKIP_COUNTRIES.  This will prevent the provided list of countries from being listed on the join page.  However, this template change will allow you to make specific changes on specific join pages.  SKIP_COUNTRIES, will affect all join pages in your NATS installation '''
 +
 
==Determining the values of variables on a page==
 
==Determining the values of variables on a page==
  
Line 71: Line 75:
 
==Modifying join pages to show custom information about options==
 
==Modifying join pages to show custom information about options==
  
Let us say that you wish to have a join option display a more verbose description than what is in NATS.  You could hardcode
+
If you wish to have a join option display a more verbose description than what is in NATS.  You could hardcode
 
the form, but then adding new options or changing what options are displayed means you have to have multiple templates for
 
the form, but then adding new options or changing what options are displayed means you have to have multiple templates for
 
each situation.  A simpler method would be to create a conditional that displays the messages only for the particular option.
 
each situation.  A simpler method would be to create a conditional that displays the messages only for the particular option.
Line 82: Line 86:
 
can do this by changing from the above code to something like:
 
can do this by changing from the above code to something like:
 
<pre>
 
<pre>
{foreach $join_optionids key=my_key item=option_id}
+
{foreach from=$join_optionids item=option_id}
<input type="radio" name="signup[optionid]" value={$option_id}>{if $option_id == my_option}My description
+
        <input type="radio" name="signup[optionid]" value={$option_id}>{if $option_id == my_option}My description
{elseif $option_id == my_other_option}My Other Description{/if}
+
              {elseif $option_id == my_other_option}My Other Description{/if}
.
 
 
.
 
.
 
.
 
.
{else}{$join_options[$join_optionids]}{/if}<br>
+
.       
 +
              {else}{$join_options[$option_id]}{/if}<br>
 
{/foreach}
 
{/foreach}
 
</pre>
 
</pre>
Line 102: Line 106:
 
option id matches this default, it will insert the "checked" text into the input tag and make the option checked by default.
 
option id matches this default, it will insert the "checked" text into the input tag and make the option checked by default.
  
Using image links as the join form
+
==Using image links as the join form==
 +
 
 +
Using images are a popular way to have the users select a join option for a site. Setting up images as join option links allow for more appeal on a site. The following link will force the NATS cascade to run with the provided cascade and join option.
 +
 
 +
<pre>
 +
<a href="http://<linkdomain>/signup/signup.php?nats=<NATS_Code>&signup[optionid]=<id>&cascade=<cascade_id>&step=signup"><img src="<img_location>" alt="<alt_text>"/></a>
 +
</pre>
 +
 
 +
The places to edit this link to convert it into a working link are:
 +
*<linkdomain> - the link domain of the site for the join option.
 +
 
 +
*<NATS_Code> - the NATS code associated with the join page.
 +
*<NATS_Code> can also be generated with the Smarty variable {$nats_code}. This is only possible on the join template.
 +
 
 +
*<id> - the ID number of the join option you want to use.
 +
 
 +
*<cascade_id> - the ID number of the biller cascade you want to use for the join option.
 +
 
 +
'''NOTE: without a username or password, a random username and password will be generated for the member and will be replaced when the biller posts back information in regards to the username and password'''
 +
 
 +
*Additional optional values:
 +
**By default, if a user name is not supplied, a random one will be generated by NATS. You can control the random username and password generated by inserting “&signup[random_userpass]=<rand_code>” into the link.
 +
**<rand_code> is a code that takes three parameters separated by colons.
 +
***The first parameter is the length of characters for both the user name and password field.
 +
***The second parameter is either 0 to allow for uppercase, lowercase letters and numbers. Setting this to 1 will allow only lowercase letters and numbers.
 +
***The third parameter is the number of tries to generate the random user name and passwords.
 +
***An example of this code will be signup[random_userpass]=10:1:5. This would be a user name and password that are 10 characters long, allow only lowercase letters and try 5 times.
 +
 
 +
*If the user name, password and/or email will be supplied from another source, you can add "&signup[username]=<username>", "&signup[password]=<password>", and/or "&signup[email]=<email>" to the link. This is useful for a sign up that spans across different pages.
 +
'''NOTE: any item found on the join page can be added to the link and be placed into nats (Example:  to include the first name you would add "&signup[firstname]=<firstname>" )
 +
*<img_location> has to be the location of the image in reference to your NATS installation.
  
Suppose you want to, instead of using the normal NATS join form, instead wanted to use images that represented each of the options
+
*<alt_text> is the alternative text that will be displayed if the image is not found.
for a site. You could set this up in a few ways.  If you don't mind your members being generated with random usernames and passwords,
 
you can setup the images as links that post directly into the signup script.  The link for your script would look like:
 

Latest revision as of 17:03, 9 March 2010

Smarty tips and tricks for NATS templating

There are some common things that many clients wish to do on their pages with Smarty templates. These are a few examples and how to complete them. If you have suggestions for other examples, please let us know

Removing a country from the Country list or renaming a country on the list

One thing you may wish to do on your signup pages, is remove particular countries from the country list. Normally we will display all of the countries setup in the default configuration to the surfer using a smarty function called html_options.

To remove specific countries from the list you would need to break the single function call into a foreach loop that loops through the countries and chooses which ones to display based on your preferences.

By default your template will have something that looks similar to this:

<select class="join_select" name="signup[country]">{html_options options=$countries selected=$country}</select>

To modify this you would need to change it into a foreach loop such as:

<select class="join_select" name="signup[country]">
{foreach from=$countries item=countryname key=countryid}
	<option value={$countryid}>{$countryname}</option>
{/foreach} 
</select>

At this point we have the html options command broken into a loop. To remove a country, we would use a smarty if statement as such:

<select class="join_select" name="signup[country]">
{forach from=$countries item=countryname key=countryid}
	{if $countryid != <something I want removed>}
		<option value={$countryid}>{$countryname}</option>
	{/if}
{/foreach}
</select>

What this will do is make it so that as long as the countryid isn't equal to the country you want to remove from the list, it will put the option in the select list. Otherwise it will ignore the country. You could also modify it so rather than removing an item, you instead rename it. Normally this is done in the case of very long country names.

<select class="join_select" name="signup[country]">
{forach from=$countries item=countryname key=countryid}
	{if $countryid == <something I want renamed>}
		<option value={$countryid}>What I want</option>
	{else}
		<option value={$countryid}>{$countryname}</option>
	{/if}
{/foreach}
</select>

NOTE: In NATS 4 there is a configuration variable, found in the configuration admin under the Surfers section called SKIP_COUNTRIES. This will prevent the provided list of countries from being listed on the join page. However, this template change will allow you to make specific changes on specific join pages. SKIP_COUNTRIES, will affect all join pages in your NATS installation

Determining the values of variables on a page

It may be the case that you are trying to setup conditional statements on a page and you need to know the value of a variable or if that variable exists. To easily do this you can use the template function {debug}. This function will create a pop-up window when you visit the page it is included on. This pop-up window will contain all of the smarty variables used on that page, as well as their values.

You may not want this to appear for everyone who visists the page, so you can restrict the creation of the pop-up by doing the following:

{if $smarty.request.variable == some_val}{debug}{/if}

In the above code you can change variable to whatever you like (say for example debug) and will need to change some_val to a valid value (be it numeric, a word, etc). This will make it so that when you visist the page, to create a debug window you will need to append &variable=some_val to the URL of the page and reload the page.

The {debug} call can be used on any NATS template, this means that any template in the skins and templates section, any of the site templates, and even the dump formats (which could be useful for trying to get dumps to display a certain way).

Modifying join pages to show custom information about options

If you wish to have a join option display a more verbose description than what is in NATS. You could hardcode the form, but then adding new options or changing what options are displayed means you have to have multiple templates for each situation. A simpler method would be to create a conditional that displays the messages only for the particular option.

<select name="signup[optionid]" class="join_select">
				{html_options options=$join_options selected=$vars.optionid}
</select>

You would first need to convert this into a group of radio buttons, so you can display more verbose text between them. You can do this by changing from the above code to something like:

{foreach from=$join_optionids item=option_id}
        <input type="radio" name="signup[optionid]" value={$option_id}>{if $option_id == my_option}My description
               {elseif $option_id == my_other_option}My Other Description{/if}
		.
		.
		.        
               {else}{$join_options[$option_id]}{/if}<br>
{/foreach}

In this code you replace my_option with the option id you want to have a special description for, my_other_option with a subsequent ID you want to make a special option for, My Description and My Other Description become the expanded descriptions. To add additional cases, simply put in more elseif statements. The else statement at the end will catch any option you haven't set up and display what is set in NATS as the description of the join option. You can further set a default with this system by modifying the code further so that the input statement looks like this:

<input type="radio" name="signup[optionid]" value={$option_id} {if $option_id==my_default}checked{/if}>

The added code in the end will have my_default replaced by the option ID you want to be the default choice for the form. If the option id matches this default, it will insert the "checked" text into the input tag and make the option checked by default.

Using image links as the join form

Using images are a popular way to have the users select a join option for a site. Setting up images as join option links allow for more appeal on a site. The following link will force the NATS cascade to run with the provided cascade and join option.

<a href="http://<linkdomain>/signup/signup.php?nats=<NATS_Code>&signup[optionid]=<id>&cascade=<cascade_id>&step=signup"><img src="<img_location>" alt="<alt_text>"/></a>

The places to edit this link to convert it into a working link are:

  • <linkdomain> - the link domain of the site for the join option.
  • <NATS_Code> - the NATS code associated with the join page.
  • <NATS_Code> can also be generated with the Smarty variable {$nats_code}. This is only possible on the join template.
  • <id> - the ID number of the join option you want to use.
  • <cascade_id> - the ID number of the biller cascade you want to use for the join option.

NOTE: without a username or password, a random username and password will be generated for the member and will be replaced when the biller posts back information in regards to the username and password

  • Additional optional values:
    • By default, if a user name is not supplied, a random one will be generated by NATS. You can control the random username and password generated by inserting “&signup[random_userpass]=<rand_code>” into the link.
    • <rand_code> is a code that takes three parameters separated by colons.
      • The first parameter is the length of characters for both the user name and password field.
      • The second parameter is either 0 to allow for uppercase, lowercase letters and numbers. Setting this to 1 will allow only lowercase letters and numbers.
      • The third parameter is the number of tries to generate the random user name and passwords.
      • An example of this code will be signup[random_userpass]=10:1:5. This would be a user name and password that are 10 characters long, allow only lowercase letters and try 5 times.
  • If the user name, password and/or email will be supplied from another source, you can add "&signup[username]=<username>", "&signup[password]=<password>", and/or "&signup[email]=<email>" to the link. This is useful for a sign up that spans across different pages.

NOTE: any item found on the join page can be added to the link and be placed into nats (Example: to include the first name you would add "&signup[firstname]=<firstname>" )

  • <img_location> has to be the location of the image in reference to your NATS installation.
  • <alt_text> is the alternative text that will be displayed if the image is not found.