Understanding & Using Parsley Variables

In this guide you will learn briefly what a variable is as well as how to store and call three different types of Parsley variables. We will also briefly cover some cases when to use each.

Variables are a way to store information consistently, so you can access the stored information either later in the code, or at a later time. Variables are also useful for shortening frequently used long pieces of code, or creating one area to update multiple entries of the same information. If this doesn't make sense yet, hopefully the examples will help.

The three types of Parsley variables are standard variables, session variables, and cookies. The only difference between them is how long the information stays stored with the variable.

Standard Variables

Standard variables only last for the page load. As soon as some one clicks to a new page or reloads the site, the information in that variable is forgotten. Below is an example of how to set and call a standard Parsley variable:

You can see we set the variable, $myVariable to the phrase "Hello World" and then called the variable in an h1 tag. The resulting HTML would look like this:

The only HTML that prints out is the h1 with whatever the variable was set to.

In this next example, we'll actually do something you need a standard variable for. We will create a dynamic number of columns, one for each item in a data set.

We are going to write two identical Parsley each loops. In the first loop we will set a variable equal to the index. (If you have questions about each loops or index, review those sections first). The second loop will be the information we would want to show for each data set entry. The initial each loop will run through all the items and reset the variable to the index each time. The last item in the data set will set the variable equal to the total number of items in the data set. Once we know the total number of items, we can use that variable to set the column class denominator in the second each loop. See the code below:

You can see in the code we set the variable, $count, on line 2 and call it on line 7. The result is $count will be equal to the number of "articles" and the row will have a number of columns equal to the number of articles. Each article will always take up one column, no matter if articles are added or deleted.

For example if there were three articles, $count would be set to 3 and each article would be one third of the row. If a fourth was added or one was removed, the code would automatically update to adjust to keep each article the same while filling up the row.

Session Variables

Session variables last as long as the browser session. To put it another way, as long as the browser window stays open and the device keeps internet access. You can set and call session variables the same as standard variables. The only difference is standard variables always need an underscore after the dollar sign. See below:

Same as before, we set the variable, $_mySessionVar to the phrase "Hello Globe" and then called the variable in an h1 tag. The resulting HTML would look like this:

The only HTML that prints out is the h1 with whatever the variable was set to.

Where session variables can be particularly useful is when you want something to only show once per visit to the site. In the following example we set a parsley if statement to check if a session variable is set. If it's not set yet, we know this is the first time they have loaded this page this session. So we add our code for what we want to happen on the first load and then set our session variable so the code doesn't run again this session.

Since the session variable is set to 1 within the if statement we know the script will only load the first time for each session. All times after that, the session variable will fail the if check and will not add the script.

Cookie Variables

Cookie variables are almost the same as session variables except they last for 30 days. These work by storing information to the browser of the visitor. So if the visitor uses a different device or a different browser or manually clears their cookies, then all the parsley cookies would be reset.

Like standard variables and session variables, parsley cookies are set and called the same way. To set a cookie we use the at symbol instead of a dollar sign. See below:

And again, we get the same h1 result:

Cookies are most useful for sites where visitors can select preferences or use a log in system. Cookies allow the code to remember the user's selection for longer so the user doesn't have to enter it as often.

In the example below, we check the result of a form submission to see if a user has signed in. If a sign in has happened we set a cookie variable equal to their user name, if not, we check if there is already a cookie set. If a sign in has happened or a cookie was already set, then we show a welcome message, if neither of those are true we show a sign in form. This way, a user only has to sign in once every 30 days.

  • Note: In this example, we reference post variables. Post variables are variables created by field from a submitted form with the post method. Post variables are not covered in this lesson.

Conclusion

Parsley variables are a tool for storing information we need to access later on in the page or at a later time. We can set a variable by opening a parsley tag, using the correct variable prefix (either $, $_, or @) followed by the variable name, and setting it equal to the information we need stored. Each variable prefix represents a different amount of time the variable will be stored.

Standard Variable's prefix is "$" and will store the data for a single page load.
Session Variable's prefix is "$_" and will store the data until the browser session ends.
Cookie Variable's prefix is "@" and will store the data for 30 days or until the browser clears the cookies.