This article is about developing MerchantPortal Themes. If you wish to learn more about how to install and use our themes, please visit our support center. This topic is different from “How to use Themes” as it describes the programically and technical aspects of developing your own Theme. The other topic describes how to activate and use the theme from a more user related aspect.
Why MerchantPortal Themes
MerchantPortal Themes are files that in collaboration with the underlying source code are designed to create the frontend and functionality of a Payment Merchant Portal. Each theme is different, and offer ofte many choices for you as Payment Service Provider to use and make you unique.
There can be several reasons to develop a MerchantPortal Theme. It can be for your own use, for a client or to make a profit on it through the MerchantPortal Theme Directory. Why else do it – if you can’t make money?
With the IPP Merchant Portal you can make advantage of:
- A unique look for your Payment Service Provider
- advantage of tags, embedded features, service hooks to generate different results and looks
- Provide alternative templates for specific sites, where the normal content isn’t what you want to show.
- Easy switch between site layouts, allow users to change design themself or add-in an style switcher for light and dark mode.
The usual benefits
Our theme structure provides several benefits, and align our focus on security with your focus on usability and user experience:
- The theme is seperated from the technical layer, ensuring security and service upgrades without massive changes to the user experience.
- Generates full customization of the MerchantPortals functionality.
- Allows rapid changes to the visual design and layout of your Payment Service Provider.
- Removes needs for coding which decrease the needs to learn HTML and PHP for having an awesome PSP.
Development Standards
Public themes must:
- Use a well-structured, flawless PHP and valid HTML structure.
- Use clean, validated CSS.
- Follow general design guidelines without external service components.
Technical life of a Theme
MerchantPortal Themes is hosted and live within a subdirectory of the MerchantPortal Base directory.
By default this directory is /themes/.
The Theme’s subdirectory contain all of the Themes specific styleshetts, templates, and optional functionality files, Javascripts, and images. It is important that the Theme only host files related to the Theme.
We do encourage not to use numeric values for the Theme names, as it can have unexpected consequences while displaying the themes in overviews and systematically.
MerchantPortal includes our standard theme in all installations. The theme is based on Bootstrap 5, and we do suggest you examine the files in the standard theme catefully to get a good idea of how to build and develop your own Theme.
A Theme do generally contain a small number of files, which controls the overall interface of your MerchantPortal.
- A Theme Header File
- A Theme Footer File
- A Theme Stylesheet, often callsed style.css.
Basic Themes
Developing Basic Themes requires only few files. The three files defined in the Technical life of a Theme, is all that is required for a Theme to function.
The Header and Footer files are very flexible and is being used across the MerchantPortal.
Typically a Theme also contains a subdirectory for Template Parts, which overwrites the standard file configuration, into a more Theme controlled environment.
Tempalte File Checklist
While developing a Theme is fairly straight forward, we do always encourage you to check your Theme files against the following Theme file standard.
Header.php - The Document Head
Follow the HTML5 standards of:
- The opening HTML tag should include the page language
- The META tag should be placed before the TITLE tag
Here is the example of the a Theme header file.
<?php
function head() {
global $plugins,$lang,$IPP_CONFIG;
$html = '<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>'.$IPP_CONFIG["PORTAL_TITLE"].'</title>
</head>
<body>
';
}
Footer.php - The Document Finalization
The footer must contain bit more information, as we through the footer is initializing all Javascripts and extra CSS requirements to use the MerchantPortal.
<?php
function foot() {
global $inline_css, $inline_script,$load_script,$plugins,$IPP_CONFIG;
$css = "";
$script = "";
foreach($load_script as $value) {
$script .= "<script src='".$value."'></script>";
}
if(!is_null($plugins->hook_footer)) {
foreach ($plugins->hook_footer as $value) {
$script .= $value;
}
}
foreach($inline_css as $value) {
$css .= "<style></style>";
}
foreach($inline_script as $value) {
$script .= "<script>".$value."</script>";
}
return "$css $script <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src=https://gcdn.ippeurope.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js></script></body></html>";
