Making your template compatible with CMSE Content Framework

Any template can be configured to function with the extension, simply by implementing the changes below. Be sure to make a duplicate of your template and change the folder name before making changes.

Download the sixflix template package and review the structure

(242 downloads)
sixflix.zip (1.27M) file hash value: 9f153f629525e8ed893035b674d7d86f

 

Make a template installable

  • Create a file and name it template.xml and place in your template's root folder.
  • Enter the following coding in that new file.
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.0" type="whmcstemplate" method="update" core="true">
	<name>My Great Template</name>
	<folder>mytemplate</folder>
	<version>1.0</version>
	<creationDate>04/11/19</creationDate>
	<author>Michael Mulder</author>
	<authorEmail>mail@mm.com</authorEmail>
	<authorUrl>http://www.mm.com</authorUrl>
	<copyright>MM Devs</copyright>
	<license>GNU/GPL</license>

	<positions>
		<position>head</position>
		<position>toprow</position>
		<position>midrow</position>
		<position>maintop</position>
		<position>mainbottom</position>
		<position>sideleft</position>
		<position>sideright</position>
		<position>bottomrow</position>
		<position>foot</position>
		<position>copyright</position>
		<position>errorpage</position>
		<position>none</position>
	</positions>
</extension>

The positions are where widgets will display and can be named as desired and be as many or few as needed. Just up to your concept. See below section on adding the modular position output coding to the .tpl files.

  • Compile the folder as a .zip package
  • Open the CMSE Framework Installer
  • Browse for the .zip package and upload

    install-template

  • Go to CMSE Template Manager and click Install for the new template to make it detectable by the extension and available to be set as specific page template. If it needs to be the default template, use the core WHMCS general setup to select it as default.

    template-manager-new-install

 

Page Content Output Hook

The template will need to include the follow hook in order to display category pages, post pages, product detail pages and product group pages.

This is best placed in the header.tpl file within the <section id="main-body"> or what ever your template uses for a primary content area.

{*load component template*}
{if !empty($component)}
{include file="$template/components/{$component}/index.tpl"}
{/if}


Example placement

<section id="main-body">

	<!-- Container for main page display content -->
	<div class="main-content">
	
		{*load component template*}
		{if !empty($component)}
		{include file="$template/components/{$component}/index.tpl"}
		{/if}
	<!-- begin footer.tpl -->

 

Then create a folder and name it components and within that folder, create 2 other folders name posts and products

template-structure

 

In the folder posts, create a file named index.tpl and place the following code.

<div class="cmse-post">
	<div class="componentwrap">
		{if $view eq 'post'}
		
		<div class="">
		{$postitem}
		<div class="clearall nopad nomargin"></div>
		</div>

		{elseif $view eq 'category'}

		<div class="cmse-category">
		{$category_view}
		<div class="clearall"></div>
		</div>

		{elseif $view eq 'categories'}

		<div class="cmse-categories">
		{$postcategories}
		<div class="clearall nopad nomargin"></div>
		</div>

		{/if}
	</div>
		
<div class="clearall"></div>
</div>

 

In the folder products, create a file named index.tpl and place the follow code

<div class="cmse-post">
			
	<div class="componentwrap">
		{if $view eq 'productdetail'}
		
		<div class="cmse-post">
		{$productdetail}
		<div class="clearall"></div>
		</div>
		
		{elseif $view eq 'productgroup'}
		
		<div class="cmse-category">
		{$productgroup}
		<div class="clearall"></div>
		</div>

		{elseif $view eq 'productgroups'}

		<div class="cmse-categories">
		{$productgroups}
		<div class="clearall nopad nomargin"></div>
		</div>

		{/if}
	</div>
		
<div class="clearall"></div>
</div>

 

The class names and elements can be what ever you prefer. If kept as shown, the global css instructions will define the display.

 

Add modular coding to .tpl files

In order to display the sidebar widgets, the template files must be edited to include the modular positions as used in the template.xml manifest.

The coding is primarily HTML mixed with a bit of Smarty tags. The following just means:

Show this container element if a widget is assigned to the position named headitem, on the specified page.

{if "headitem"|in_array:$position}
<section id="header" class="header">
	<div class="container fullwidth">
	{getWidgets("headitem")}
	<div class="clearall"></div>
	</div>
</section>
{/if}


So the logic will work for any spot in a template you wish to use as a sidebar.

 

Template variables

These Smarty template variables will deliver useful source code data that will serve for styling and page identification

 

Body tag classes

<body class="theme theme-{$template}{$bodyclass}{$sidecol}" data-phone-cc-input="{$phoneNumberInputStyle}">

 

Will output

<body class="theme theme-sixflix component cmseContentFramework english ishome product-group product-group-6 sideright-active" data-phone-cc-input="1">

 

Page title

<title>{$pagetitle}</title>

 

Will output the current page title using the format defined in the global configuration to show the company name or not, and what position to place the name in relation to the page title.

custom-pagetitle-config-output

custom-pagetitle-config

 

Add Configuration Options To A Template

GUI configurations lessen the need for coding and simplifies styling and formatting for the user.

Within the template.xml manifest file which is used for the installation, add field tags which will output standard form fields.

<fields>
	<fieldset label="Layout">
		<field type="text" name="footerlabel" placeholder="Look Here" label="Add a footer label" />

		<field type="number" name="layoutwidth" min="940" max="1920" value="1180" label="Layout Max Width" />
	
		<field type="list" name="columnorder" value="2|1|3" class="clear" label="Column Order">
			<option value="2|1|3">2|1|3</option>
			<option value="1|2|3">1|2|3</option>
		</field>
	</fieldset>
</fields>

 

Example output

A user can then easily create a child instance of a template and configure as desired then assign to a product group, category or menu item to have an entirely different display. See the files in the template provided for download at the top of this page.


template-configuration-fields-eg

 

This process will require a supporting PHP document named exactly as _templateConfigs.php

The underscore has the purpose of isolating the file at the top of the file list.

The configuration values sent from the GUI are stored in the database and retrieved within the processing file simply as $params->fieldname, fieldname being the name of fields used in the manifest file.

Example

If the manifest file has a field as

<field type="textarea" name="footertext" label="Foot Text" />

In the processor the data would be called as $params->footertext and wrapped in any HTML element if needed.