In this guidee we will detail how to work with MoneyClick templates, in particular:

  • Customize existing templates
  • The structure and the syntax of a template
  • The available macro that can be used in a template

Customizing existing templates

Let’s start with a consideration: you should never modify the builtin templates provided with WP MoneyClick (the template which name starts with ‘WPMC’): this simply because when you update the plugin to new versions, the ‘WPMC’ templates will be overwritten.

The solution is to clone a builtin templates creating your own copy, so the plugin updates will not affect you anymore.

 

How to clone an existing template ?
To add ‘clone’ capabilities to your WordPress installation we strongly suggent to use the Duplicate Post plugin: it will add a ‘clone’ link on all WP types (pages, posts) as well on all MoneyClick types (contents, smartlinks, templates. display, publishing groups / rules).

Template structure and syntax

Each MoneyClick template is composed by several blocks:

  • Template CSS
  • Header
  • Body
  • Footer
  • Data Attributes

img_570e74b0e7962

So for rendering a shortcode like [ wpmoneyclick id=’123′ ] the system will retrieve which template is associated with the content ID 123, and based on the template definition will render the above blocks (the ‘body’ block will be rendered 1 for each product returned by the shortcode count attribute). Default, if not specified, is 1.

So in a classical definition (shortcode returning 1 product) this is the template structure:

template-structure2

In all these blocks is also possibile to use template macros, that we will see below.

 

Template CSS

This field contains the CSS rules that will be rendered each time this template is used. Here an example:

template-css

 

As you see in a standard CSS syntax. Considering that MoneyClick provides multiple templates, and you can create your own, to avoid CSS name conflicts we suggest to:

  • Create a root level CSS class name for your template. In the example below the name is ‘wpmoneyclick_box_arrow_left‘, that is the name for the template
  • Prefix the other CSS rules with the root CSS class name, so the rules will be applied only when ‘inside’ the template root element

To better explain the second point look at this example:

template-css-2

As you see the .wpmoneyclick_box_content is used in conjuction with the .wpmoneyclick_box_arrow_left class. So the browser will apply it only when an HTML element is contained in an element with wpmoneyclick_box_arrow_left CSS class.

Here an example of HTML code usind the CSS rules:

template-html-block1

Template Header and Footer

These an HTML code blocks can contain any arbitrary, valid, HTML code. The blocks  will be rendered, respectively, at the beginning and at the end of template.

 

Template Body

These HTML code block will be rendered 1 time for each product the shorcode is returning (‘count’ attribute). By default the count is 1.

 

Template Data Attributes

Each template can be parametrized using data attributes. A data attribute is a pair name/value  that, once defined, can be used inside the other template blocks (header, footer, body) using a macro like {{ attr: }}. Note that, automatically, all data attributes name starts with ‘data-‘ prefix 

template-data-attrs

For example to reference the ‘data-primary-color’ inside your template you can use {{ attr: data-primary-color }} macro.

Data attributes can be defined at various level:

  • At template level (the default value)
  • At content level: in this case data are overriding the default values defined in the template data attributes
  • At shortcode level: these values are overriding the values defined at template/content level

Example:

At template level the attribure data-color is ‘red’.

  • A content use this template without specifying a value for the data attributes ‘data-color’. The value of the attribute will be ‘red’.
  • A content use this template but specifies the value ‘black’ for the data attributes ‘data-color’. The value of the attribute will be ‘black’.
  • A content use this template but specifies the value ‘black’ for the data attributes ‘data-color’, but in the shortcode another value is specified:
    [ wpmoneyclick id=’123′ data-color=’green’ ]  : the data attribute value will be ‘green’.

 

Template Macros

To have dynamic templates, MoneyClick implements the concept of macro. A macro is using a simple syntax:

{{ macro }}

There are different types of macro, that can be used in different context:

  • Builtin macros: are always available.
  • Provider-specific macros: are available only when the content is of a particular provider

 

Builtin Macros

These macros can be used in all templates blocks (header, footer, body, …).

{{ _index }}

The current product index. Outside the template body this macro will return 0. Inside the product body block the value will enumerates the products (1, 2, 3, …).
Example: 1

{{ _date }}

The current system date in the dd/mm/yyyy format.
Example: 28/03/2016

{{ _dateDMY }}

The current system date in the ‘dd/mm/yyyy’ format (same as {{ _date }} ).
Example: 28/03/2016

{{ _dateMDY }}

The current system date in the ‘mm/dd/yyyy’ format.
Example: 03/28/2016

{{ _dateYMD }}

The current system date in the ‘yyyy/mm/dd’ format.
Example: 2016/03/28

{{ _dateSHORT }}

The current system date in the ‘dd mmm yyyy’ format.
Example: 28 Mar 2016

{{ _dateLONG }}

The current system date in the ‘dd month yyyy’ format.
Example: 28 March 2016

{{ _dateISO }}

The current system date in the ISO format.
Example: 2016-03-28T21:31:26+00:00

{{ _dateDAY }}

The day of current system date.
Example: For the 28 march 2016, the result will be ’28’

{{ _dateMONTH }}

The month of current system date.
Example: For the 28 march 2016, the result will be ’03’

{{ _dateYEAR }}

The year of current system date.
Example: For the 28 march 2016, the result will be ‘2016’

{{ _time }}

The current time in the ‘hh:mm’ format.
Example: 21:09

{{ _timeLONG }}

The current time in the ‘hh:mm:ss’ format.
Example: 21:09:07

{{ _random(min, max) }}

An integer random number between min / max (included).
Example: _random(2, 5) will return a random number between 2 and 5

{{ _rating }}

Display 0 to 5 stars based on the value of data-wpmc-rating data attribute.

Example: <div class=’wpmc_rating’>{{_rating}}</div>

{{ _request(paramName) }}

Read the value of a HTTP request parameter (GET / POST) and return its value (or an empty string if the parameter is not dedined).
Example: _request(myparam) will return the value of parameter ‘myparam’.

{{ _basepath }}

Return the URL base path of WP MoneyClick Plugin.
Example: _basePath will return a string like ‘http://www.mysite.com/wp-contents/plugins/wpmoneyclick’

{{ attr:attrName }}

Read the value of template / content / shortcode data attribute. Note that this macro can be used, also, to read all the attribute values defined in the shortcode.
Example:  [ wpmoneyclick id=’123′ count=’5′  data-wpmc-rating=’3′ data-color=’red’ ]

{{ attr:id }} will return ’12’
{{ attr:count }} will return ‘5’
{{ attr:data-wpmc-rating }} will return ‘3’
{{ attr:data-color }} will return ‘red’

 

Provider-Specific Macros – Affiliate Products (Amazon, eBay, Apple iTunes, Kelkoo, TrovaPrezzi, Twenga)

These macros are available only when the content is defined using one of the affiliation provider (Amazon, eBay, Apple iTunes, Kelkoo, TrovaPrezzi, Twenga).

{{ provider }}

The content provider Example: ‘amazon’

{{ cid }}

The content ID. Example: 1235

{{ pid }}

The product / offer ID. The string value depends on the content provider. For example for an Amazon product this value will be like ‘B00NGOCP64′
Example: B00NGOCP64

{{ link }}

The complete URL that trigger the affiliation.
Example: ‘http://www.mysite.com/?_wpmcx=eyJ0IjoxLCJzIjoxLCJpZCI6IjE1MTY1MSIsImlkeCI6MX0%3D’

{{ title }}

The product title. The value coming from the provider can be overriden at content level (product title attributes).
Example: ‘Apple iPhone 6s’

{{ descr }}

The long description provided by the provider. If the provider is not passing this value, the product title will be used.
Example: ‘Apple iPhone 6s is a very powerful phone …’

{{ vendor }}

The vendor name. The merchant who is selling this product.
Example: ‘MediaWorld’

{{ vendorImage }}

The vendor small logo image URL. Note that this value is not provided by all content providers.
Example: ‘http://www.mediaworld.com/assets/logo.png’

{{ imageSmall }}    {{ imageMedium }}    {{ imageLarge }}

The product image URL (in different sizes). Note that not all the providers supply 3 different images, and image sizes are different (use CSS styling to get omogenous image sizes).
Example: ‘http://www.mediaworld.com/assets/phones/iphones6_150x150.jpg’

{{ currency }}

The currency symbol. The value is defined in the general settings, and can be overriden at single content level.
Example: €

{{ price }}

The product / offer price. Number of decimals depends on the general settings (and can be overriden at single content level).
Example: 89.90

{{ fullPrice }}

The product / offer full price (without discount). Note that this value is the same of {{ price }} when there is no discount.
Example: 190.90

{{ discount }}

The % of discount (0 if no discount is available for this product).
Example: 15

 

 

A real example: the ‘WPMC Arrow Box Left’ template

Here a complete example of real template. Here the final result:

template-box-arrow-left
The template defines several data attributes to ‘personalize’ the template in the content / shortcode:
template-arrow-box-left-data-attrs

Here the data attributes overriden in the content item:

template-box-arrow-left-content-attrs

As you can see as in the content item the data attribute ‘data-primary-color’ is not defined, it will get the default value coming from the template (‘#1565c0’).

TEMPLATE CSS:

.wpmoneyclick_box_arrow_left
{
   position: relative;
   border: 1px solid #ccc; 
   border-radius: 3px;
   background-color: #f1f1f1; 
   max-width: 100%; 
   text-align: center;
   font-family: helvetica, arial, sans-serif;  
   margin: 30px auto;
}

.wpmoneyclick_box_arrow_left:hover { box-shadow: 3px 3px 10px #BBB; } 
.wpmoneyclick_box_arrow_left A     { text-decoration: none !important; line-height: 1; }
.wpmoneyclick_box_arrow_left .wpmoneyclick_arrow 
{
   position: absolute;
   background-color: #FFF;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 3px solid #bbb;
   top: -4px;
   left: -26px; 
}
.wpmoneyclick_box_arrow_left .wpmoneyclick_box_content
{
   width: 90%;
   box-sizing: border-box;
   padding: 5px;
   margin-left: 25px;
   text-align:left;
}
.wpmoneyclick_box_arrow_left .wpmoneyclick_box_content,
.wpmoneyclick_box_arrow_left .wpmoneyclick_box_content A
{
    font-size: 16px;
}
.wpmoneyclick_box_arrow_left A,
.wpmoneyclick_box_arrow_left .wpmoneyclick_arrow2 I 
{
   color: #287EFF;
}
.wpmoneyclick_box_arrow_left A
{
   line-height: 1.5;
   text-decoration: none;
}
.wpmoneyclick_box_arrow_left .wpmoneyclick_arrow2
{
   text-align: center;
   vertical-align: middle;
   line-height: 40px; 
   margin-left: 2px;
}
.wpmoneyclick_box_arrow_left .wpmoneyclick_arrow2 I 
{ 
   font-size: 22px; 
}



TEMPLATE BODY

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class='wpmoneyclick_box_arrow_left'>
   <div class='wpmoneyclick_arrow'>
     <div class='wpmoneyclick_arrow2'>
      <a href="{{link}}" target='_blank' rel='nofollow'><i class="fa {{attr:data-icon}}" style='color: {{attr:data-primary-color}}'></i></a>
     </div>
   </div>
   <div class='wpmoneyclick_box_content'>
      {{attr:data-text-before-product-title}} <a href='{{link}}' target='_blank' rel='nofollow' style='color: {{attr:data-primary-color}}'>{{title}}</a>
      {{attr:data-text-before-product-price}} <a href='{{link}}' target='_blank' rel='nofollow' style='color: {{attr:data-primary-color}}'><b>{{price}}</b>
         <span>{{currency}}</span></a>
   </div>
</div>