HTML Block Module Pro strives to make your content development experience delightful

HTML Block Module Pro is a very powerful OpenCart extension which can be used in many different ways. With this extension,  you can add HTML content blocks, JavaScript and CSS styles anywhere you want inside OpenCart.


To purchase this extension, visit:

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=19519

Feature highlights

Easy content editing

HTML Block Module Pro is a very powerful OpenCart module which allows you to add HTML blocks to OpenCart, JavaScript and CSS blocks anywhere you want inside OpenCart.

HTML blocks can be added anywhere!

In addition to using the layout system of OpenCart, this extension provides a special way of adding your HTML blocks to any location you like within your store(s), such as header, footer, or even elsewhere.

Powerful Template editor

HTML Block Module Pro comes prepared with a powerful but easy-to-use template editor, to make it easier to create or edit your template (.tpl) files on the fly. Very useful for adding custom PHP or JS code.

Images and social scripts

With HTML Block Module Pro, you can insert images and media such as YouTube videos, Vimeo videos, and social scripts (like Facebook) without knowing or mastering HTML.

Custom scripts and styles

With this extension, implementing CSS or JavaScript is effortless and easy. Simply specify the path to the external CSS/JS files you want to include, or enter your code directly in a given field to run internal CSS/JS.

Conditional display

Many display conditions are available to use out-of-the-box. Those conditions can be used to control under what conditions a HTML Block module should appear.

Extension features list

HTML Block Module Pro includes a number of features and benefits, perfect for your online store. Using this OpenCart module, you can efficiently:

  • Create an unlimited number of HTML blocks on any layout and any supported position
  • Add your HTML blocks to any location you like within your frontend theme, such as header, footer, or even elsewhere
  • Create a unique module title for each installed language
  • Add a hyperlink to the title on module header
  • Create as many frontend templates (.twig/.tpl files) as you need
  • Use Template editor to create/edit templates files (.twig/.tpl files) on the fly
  • Select stores where a HTML Block module can be inserted. Supports multistore setups
  • Select customer groups (plus guest users) that can view a HTML Block module
  • Show or hide a HTML Block module on selected category pages
  • Show or hide a HTML Block module on selected information pages
  • Show or hide a HTML Block module on selected manufacturer info pages
  • Show or hide a HTML Block module on product pages in selected categories
  • Show or hide a HTML Block module on selected product pages
  • Include external CSS and JS (JavaScript) files
  • Run internal CSS and JS (JavaScript)
  • Pass optional parameters to template (.twig/.tpl) files
  • Create your own language files by copying and translating the original ones. Defaults to English (en-gb/english)
  • Install and setup this extension quickly and easily
  • Specify your own HTML id for the HTML element that wraps your module output

Easy content editing

Here is a simple example of how to show a piece of HTML content using HTML Block Module Pro.

HTML Block Module Pro makes it easy for you to create and maintain the content on your web store from anywhere on the web.

This OpenCart extension comes equipped with the built-in WYSIWYG editor, Summernote (It is also possible to disable Summernote, if you don't like it). You can create and edit all sorts of HTML content directly on your store.

This can be accomplished in a relatively simple way — create your own HTML content in your administration and add it to a layout in your Design > Layouts, and then you are all set.

Conditional display

This extension allows you to use its powerful display options with which you can:

  • Select stores where a HTML Block module can be inserted. Supports multistore setups
  • Select customer groups (plus guest users) that can view a HTML Block module
  • Show or hide a HTML Block module on selected category pages
  • Show or hide a HTML Block module on selected information pages
  • Show or hide a HTML Block module on selected manufacturer info pages
  • Show or hide a HTML Block module on product pages in selected categories
  • Show or hide a HTML Block module on selected product pages

For more information on how you can apply these conditions to a HTML block, navigate to Administration > HTML Blocks tab > Display Conditions section.

Template include

HTML Block Module Pro offers a special way to show HTML blocks, which allows you to add your HTML blocks to any location you like within your frontend theme. This is particularly useful when you need to display a HTML block somewhere other than the built-in layouts and positions that OpenCart supports, such as header, footer, or any other locations.

In order to include your HTML blocks, navigate to your administration > HTML Blocks tab > Template section. Copy the PHP code (for OpenCart 2) or the Twig code (for OpenCart 3) shown in the Template Include field, and paste it into the template (.tpl) files in your theme.

The code should look like the following, but you will be required to replace the id number with your own id:

Example code for OpenCart 2x

<?php echo HtmlBlock::show(49); ?>

Example code for OpenCart 3x

{{ html_block(49) }}

It is strongly recommended that you use OCMod or vQmod rather than directly modify your theme files to add the code.

You can see a working example of this feature at the bottom of this page — Template Include Example on the Footer, which is implemented using the following OCMod script:

Example code for OpenCart 2x

<?xml version="1.0" encoding="utf-8"?>
<modification>
  <name>Html Block Module Pro - Custom</name>
  <version></version>
  <link></link>
  <author></author>
  <code>cuispi_html_block_custom</code>
  <file path="catalog/view/theme/*/template/common/footer.tpl">
    <operation>
      <search><![CDATA[
        <div class="container">
      ]]></search>
      <add position="after"><![CDATA[
        <?php echo HtmlBlock::show(49); ?>
      ]]></add>
    </operation>
  </file>
</modification>

Example code for OpenCart 3x

<?xml version="1.0" encoding="utf-8"?>
<modification>
  <name>Html Block Module Pro - Custom</name>
  <version></version>
  <link></link>
  <author></author>
  <code>cuispi_html_block_custom</code>
  <file path="catalog/view/theme/default/template/common/footer.twig">
    <operation>
      <search index="0"><![CDATA[
        <div class="container">
      ]]></search>
      <add position="after"><![CDATA[
        {{ html_block(49) }}
      ]]></add>
    </operation>
  </file>
</modification>

Template editor

HTML Block Module Pro comes prepared with a powerful but easy-to-use template editor, to make it easier to create or edit your template (.twig/.tpl) files on the fly.

This advanced and outstanding tool is extremely useful, especially for those who need to:

  • Change the HTML structure of the default template
  • Implement a custom piece of PHP code in your template files
  • Add a JavaScript code directly to your template files
  • Pass some key value pairs that are created in your administration > HTML Blocks tab > Misc section > Parameters textarea

If you have created a template with a different name other than the default, html_block.twig/html_block.tpl, you need to assign it in your HTML Block tab > Template section > Template field.

In order to see the template editor in action, go to Administration and click the Template Editor tab and select the default theme from the dropdown list.

External CSS and external JS

External CSS/JS refers to a .css/.js file that you link your web page to, and is often suitable for global site changes in design, or running some JavaScript code throughout your site, respectively. HTML Block Module Pro has a feature that makes it possible to link to .css/.js files anywhere on the web and run them in your store.

External CSS

In some cases, you may need to make some design tweaks to a HTML block. You could drop some HTML into the HTML block, and then link up their stylesheet as an internal or external resource in your administration > HTML Blocks tab > Scripts and Styles section > External CSS field.

To link up a stylesheet as an internal resource, enter the path to the .css file in the following manner:

catalog/view/theme/[THEME]/stylesheet/stylesheet.css

The base path points to your opencart root directory. The tag [THEME] is replaced with an active theme folder name automatically on page load. Multiple .css files can be specified per line.

To link up a stylesheet as an external resource, enter the path to the .css file in the following manner:

//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css

Multiple .css files can be specified per line.

External JS

Similarly, you may need to use a JavaScript library for a HTML block. Just include the URL to that library either located in your OpenCart store as an internal resource, or hosted somewhere on the web as an external resource in your administration > HTML Blocks tab > Scripts and Styles section > External JS field, and you're all set to use it.

To link up a JavaScript file as an internal resource, enter the path to the .js file in the following manner:

catalog/view/javascript/common.js

The base path points to your opencart root directory. Multiple .css files can be specified per line.

To link up a JavaScript file as an external resource, enter the path to the .js file in the following manner:

//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js

Multiple .css files can be specified per line.

For further information on how they should be configured, navigate to Administration > HTML Blocks tab > Scripts and Styles section.

Internal CSS and internal JS

CSS/JS can be included on the web page by using a <style>/<script> element — this is called Internal CSS or Internal JS, respectively. It is often helpful to use internal CSS/JS, especially if you would like to make some small design changes or run a small piece of JavaScript code.

Internal CSS

There is occasionally, or maybe frequently, a need to use a <style> element to make some design changes to a HTML block. You could drop some HTML into the HTML block, and then write their stylesheet in your administration > HTML Blocks tab > Scripts and Styles section > Internal CSS field.

It is strongly recommend that you add a special tag [module] to the beginning of each CSS rule declaration to limit the extent of the styles you create so that it should not affect anywhere else but a specific module on the front-end of your store(s). The [module] tag is replaced with a valid CSS selector automatically on page load.

[module] h3 {
  color: #333;
}
[module] p {
  font-size: 1.4em;
  line-height: 1.5em;
}

Internal JS

Sometimes you may want to use JavaScript for a HTML block. Just write some JavaScript code in your administration > HTML Blocks tab > Scripts and Styles section > Internal JS field, and you're all set to run it.

It is strongly recommend that you use a special tag [module] to limit the extent of the JavaScript code you create so that it should not affect anywhere else but a specific module on the front-end of your store(s). The [module] tag is replaced with a valid jQuery selector automatically on page load.

/* Hide paragraphs on a HTML block when they are clicked: */
$('[module]').on('click', 'p', function(e) {
  $(this).slideUp();
});

For further information on how they should be configured, navigate to Administration > HTML Blocks tab > Scripts and Styles section.

Real world examples

Here are some examples of HTML Block Module Pro being used in the real world.

 

Embedding videos

A HTML Block module configured to embed online videos such as YouTube, Vimeo and Dailymotion.

Facebook Social Plugins

A HTML Block module configured to display Facebook Social Plugins.

On a multi store setup

A HTML Block module configured to appear on a different store on a multi store setup.

Where to buy

Buy now and get started right away. Get this OpenCart extension at the OpenCart website.