Get conditional text in RapidWeaver, with automatic initial capitalization and capitalizing each first letter!

Recently, I needed to have several different landing pages for a set of web seminars that I am starting. I wanted to be able to have essentially the same page but the greeting and some terms be different, depending on where the reader came from. Think of it as being like a merge-data form letter in a word processor.

The pages all contained essentially the same text, except certain terms needed to be different and certain sections would appear in some pages but not others. I used YourHead Software's Blocks to import a styled text page that contained the marketing text, and used Nilrog's @stash (with a soupçon of Javascript) to populated that styled text with the terms I wanted.

This way, I can change the marketing text in only one place, saving me a great deal of time later because I would not have to open up and change each of the several different landing pages for a single webinar offering.

Here's how I did it:

Create a styled text page to hold the body text.

Put in holder for the variables you want. For example, I needed to specify different audiences, so I used "!!AUDIENCE!!" which would be easy to find. Since we're going to simply include the body into a Blocks page, sidebars and the Header don't matter.

Create a Blocks page for each different landing page you need.

I needed a different landing page for people who came from Facebook, my blogads account, and my Tweets. I created a Blocks page for each one. This let me have different sidebars, titles, etc.

Create the @stash snippets with the Javascript

For my site, I wanted to use a different name for each audience and then be able to refer to their field. Because I was using these in different places, I needed to be able to have the text in:

• all lower case
• Initial word only capitalized
• Each Word Capitalized

I only want to have create a single variable and then have Javascript handle the capitalization. This keeps things as simple as possible. If the variable didn't exist, I wanted the code to default to a general phrase.

The code is only slightly modified from that created by jscheuer1. The display of code on this page was only possible through High-Light, another RapidWeaver plugin from Nilrog.

To customize this code, change audience to the name of your variable, and hidden high potentials to something that you'd like to default to, in case you forget to put the variable into the header.

Initial Capital

Here is the code for the @stash item (AudienceInitialCap) that would make the first letter in my variable text capitalized:

<script type="text/javascript">
function stCap(strObj){
return(strObj.charAt(0).toUpperCase()+strObj.substr(1));
}
if ( typeof( window[ 'audience' ] ) != "undefined" ) {
    document.write(stCap(audience));
   }
else {
    document.write("Hidden high potentials");
}
</script>

This will test if the variable audience exists, and if it does, capitalize the first letter in that string. If not, it writes out "hidden high potentials".

All Lowercase

Here is the code for the @stash item (AudienceLowercase) that would simply writes out the variable, since I create them in all lowercase:

<script type="text/javascript">
if ( typeof( window[ 'audience' ] ) != "undefined" ) {
    document.write(audience);
   }
else {
    document.write("hidden high potentials");
}
</script>

This will test if the variable audience exists, and if it does, simply writes it out. If not, it writes out "hidden high potentials".

Capitalized

To capitalize the phrase, I simply use the CSS "text-transform" property to wrap the same code as I used for All Lowercase.

<span style="text-transform: capitalize;">
<script type="text/javascript">
if ( typeof( window[ 'audience' ] ) != "undefined" ) {
    document.write(audience);
   }
else {
    document.write("Hidden High Potentials");
}
</script>
</span>


Define the variables in the Blocks pages.

Once you have the @stash items created, it's time to add the variables to your Blocks pages. You'll have to do this for every page, except the ones that will use the default text you created. (My default phrase in the examples is "hidden high potentials".)

In the Page Inspector, click Header, then click Javascript. In the Custom Javascript box, define your variables. In the sample image, I defined two variables: myVariable1 and myVariable2. Use a variable name will make sense to you a year from now. In my sample, I used "audience" as the name for my variable that described my audience. What could be clearer?

Add the @stash Tags to Your Styled Text Page

Now all you have to do is add your @stash items to your Styled Text page by dropping them to replace your placeholder texts.

You are now the proud owner of conditional text! Go forth and create customized landing pages for each of your demographics!

E. Forrest Christian's guide to creating conditional text in Realmac Software's RapidWeaver using Nilrog's @stash and YourHead Software's Bocks