Component Templates

Components can have templates just like pages can have templates. This allows the designer/developer to obfuscate and partition specific code from being editable by a non-technical user. For instance, suppose your component is marked up like this:

<div class="promo">
<p>Lorem Ipsum dolor sit amet</p>
</div>

If the user placed this component in the WYSIWYG editor, they may inadvertently delete the <div> and subsequently any style associated with it. Using Component Templates, we can make the surrounding markup un-editable and allow the user to edit content without worrying about deleting anything necessary for providing specific style.

To use Component Templates, add a CFML file to {context}/{SiteID}/includes/themes/{themeName}/templates/components/ (name it anything you want, e.g. promo.cfm) with the markup from the example above, replacing the content with the appropriate variable using the Mura scope, like so:

<cfoutput>
<div class="promo">
#$.component('body')#
</div>
</cfoutput>

Now when you create a new component, you'll have the option of selecting the template on the Advanced tab.

If you want to make sure [mura] tags get rendered in components when placing them on a page. 

An example Component Template has been provided in the Merced theme:

<!-- /MuraBootstrap3/templates/components/example.cfm -->
<cfoutput>
<div class="promo">
#$.setDynamicContent(component('body'))#
</div>
</cfoutput>