MojoMotor User Guide Version 1.2.1


MojoMotor Tags

Overview

MojoMotor uses a very simple tagging language to facilitate some tasks throughout the system. MojoMotor tags are surrounded in curly braces "{" and "}" and are always prefaced with "mojo". Arguments are separated by colons. There are 3 types of tags; page, site and setting. This is much easier to understand by example.

{mojo:site:site_name} In the above snippet, notice the entire tag is wrapped in curly braces. It is prefaced with "mojo". The tag type comes next, in this case "site" and finally the information we are looking for is referenced last, in this case the name of the site.

Mojo tags cannot be used inside of editable regions.

Site Tags {mojo:site:tag}

These are tags that pertain to information about the site as a whole.

{mojo:site:site_name}

The name of the site provided during installation, and found in Site Settings.

<title>{mojo:site:site_name}</title>

// Produces something similar to

<title>League of Heroes</title>

{mojo:site:site_url}

Returns your site base URL. For example, "http://example.com/". This can easily be changed in system/mojomotor/config/config.php.

{mojo:site:asset_url}

This tag produces a URL that you can use to build links to site resources such as stylesheets, scripts or images. By default it is usually something similar to "http://example.com/import/default" but can easily be changed in system/mojomotor/config/config.php.

<link rel='stylesheet' type='text/css' media='all' href='{mojo:site:asset_url}css/userguide.css' />

// Produces something similar to

<link rel='stylesheet' type='text/css' media='all' href='http://example.com/import/default/css/userguide.css' />
<img src="{mojo:site:asset_url}images/header_back.png">

// Produces something similar to

<img src="http://example.com/import/default/images/header_back.jpg">

{mojo:site:link}

Used to create links between pages on your site. Links should always point to the page's "url_title".

<a href='{mojo:site:link}about'>About Us</a>

// Produces something similar to

<a href='http://example.com/index.php/page/about'>About Us</a>
An optional "page" attribute, allows you to specify the exact page you want linked to. <a href='{mojo:site:link page="aboutus"}'>About Us</a>

// Produces

<a href='http://example.com/index.php/page/aboutus/'>About Us</a>

{mojo:site:login}

If you have "in page login" site in Site Settings, this tag produces an automated login link. If "in page login" is not turned on, it will simply be ignored.

Typically, this tag would be included in a page footer, or similar out of the way page location.

The link will simply be the text "login" (localized to your language file), but the optional "text" attribute, allows you to specify the exact text used by the login link.

{mojo:site:login text="Login to our site now"}

If the optional require_cookie_consent configuration setting is set to y, login is not allowed for users who have not accepted cookies. In this case, the tag will produce a link to allow cookies (localized to your language file).

{mojo:site:page_list}

Generates a "menu" based on your page settings. The output is an unordered list, nested as per your pages organization. Pages which have "Include in Page List?" unchecked in the page options will not be listed (nor will its children).

{mojo:site:page_list} Parameters

The markup produced by page_list is a nested, unordered list, with each list item holding an id of "mojo_page_list_urltitle", where url_title is the URL title specified in the page settings. The page you are currently on will have a class of "mojo_active" on it, which can be used for styling or identification purposes. Additionally links pointing to your site's default page will exclude the url_title identification. For example, if we were on the "contact" page, then {mojo:site:page_list id="nav" class="menu"} will generate:

<ul id="nav" class="menu">
     <li id="mojo_page_list_about"><a href="http://example.com/index.php/page/about">About</a>
     <ul>
          <li id="mojo_page_list_subpage"><a href="http://example.com/index.php/page/subpage">subpage</a></li>
     </ul>
     </li>
     <li id="mojo_page_list_contact" class="mojo_active"><a href="http://example.com/index.php/page/contact">Contact</a></li>
     <li id="mojo_page_list_index"><a href="http://example.com/index.php">Home</a></li>
</ul>

Pages with "Include in Page List?" unchecked will not show in the list, however if such a page is explicitly called via the page parameter, its children will be visible.

Page Tags {mojo:page:tag}

These are tags that pertain to specific pages.

{mojo:page:page_title}

The page title, as provided in page settings.

{mojo:page:url_title}

The page url title, as provided in page settings.

{mojo:page:keywords}

The page keywords, as provided in page settings.

{mojo:page:description}

The page description, as provided in page settings.

Layout Tags {mojo:layout:tag}

These are tags that relate with MojoMotor layouts.

{mojo:layout:stylesheet stylesheet="layout_name"}

Used to link stylesheet layouts into your site.

<head>
<title>Document Title</title>
<style type="text/css">{mojo:layout:stylesheet stylesheet="styles"}</style>
</head>
produces <head>
<title>Document Title</title>
<style type="text/css">
/* The layout content. In this case, a single style rule for paragraph */
p {font-size: 100%;}
</style>
</head>

{mojo:layout:javascript script="layout_name"}

Used to include javascript templates into your page.

<head>
<title>Document Title</title>
<script type="text/javascript">{mojo:layout:javascript script="myscript"}</script>
</head>
produces <head>
<title>Document Title</title>
<script type="text/javascript">
/* The layout content. In this case, a single alert command */
alert('Javascript is running');
</script>
</head>

{mojo:layout:append_content}

Allows for content to be appended to the very bottom of the document, immediately before </body>, but after MojoMotor has finished its output. Useful for adding your own javascript to the document, or an analytics package. This tag can be called from anywhere in a layout, and can be used as often as is needed.

{mojo:layout:append_content}
<script type="text/javascript">
jQuery(document).ready(function() {
     alert('Waited for jQuery's ready() function before I did this.');
});
</script>
{/mojo:layout:append_content}

More information on using javascript with MojoMotor is available in the Using Javascript section of the User Guide.

{mojo:layout:embed layout="header"}

Used to include an Embed Content Layout in another layout. For example, you may have a block of code you use at the top of every page, across multiple layouts. Instead of writing the same code in each layout, you can put it in a single Embed layout and include that layout in all of the others, thus allowing you to edit it in only one layout and affect all of them.

Embed Content Layout named 'header':

<h1>Welcome to our site!</h1>
<div class="mojo_global_region" id="latest_news">
Link to the featured product goes here!
</div>

Main Content Layout: html header, etc.....
{mojo:layout:embed layout="header"}

Setting Tags {mojo:setting:tag}

These are tags that pertain to Site Settings.

{mojo:setting:version}

Outputs the currently installed version of MojoMotor.

Commenting Layout Code

MojoMotor allows developers to comment their layouts in an easy syntax so that the comments will be available to them when editing their layouts but the comments will never be displayed when that layout is rendered. This allows developers to jot down notes about their usage of tags, variables, etc, for future reference while keeping users from ever seeing those notes.

The syntax for commenting your layout code is fairly similar to HTML comments, just instead of the greater than and lesser than symbols, you use the opening and closing curly quote brackets, like with other MojoMotor Tags:

{!--

Your comments will go in here.
You can even span it across multiple lines.

--}

Any MojoMotor code that you put in these comments will NOT be rendered, so you can comment out old code or perhaps reference tags for later.

Cookie Consent Tags {mojo:cookie_consent:tag}

These tags produce links that will allow and disallow the setting of cookies. Note that the $config['require_cookie_consent'] configuration variable must be set to 'y' for these tags to output content.

{mojo:cookie_consent:allow_cookies_link}

This tag produces a URL that, when clicked, sets a cookies_allowed cookie, which indicates to MojoMotor that permission has been granted to set site cookies.

By default, the tag is replaced by a URL. The optional text attribute allows you to specify the exact text used to create a link. If link text is specified, you may also specify an optional class for the link.

{mojo:cookie_consent:allow_cookies_link text="Allow cookies to proceed to login" class="cookie_style}

{mojo:cookie_consent:disallow_cookies_link}

This tag works exactly like the allow_cookies_link, except it produces a URL/link that will disallow cookies. Clicking the link will remove all site cookies with the MojoMotor cookie prefix and prevent the setting of new ones.