How to use Shortcodes in OpenCart

Shortcodes, popularized by WordPress, is a technique which makes it easy to insert dynamic content into your page. It help you generate product url alias, add video or even load a modules in your content with a pieces of code.

It’s an easy task for us to add products link on product description, blog content or information page. But most of us will put the raw product URL (route) even though our site supporting URL alias. The reason is because we don’t want to edit all content when the product alias change.

OpenCart Shortcodes will help us put the link in page content. Even if the product url alias is changed, shortcodes will recognise it and show the correct output. But not just limited to link, with shortcodes we can add video, popup image or even load modules in content.

Install Shortcodes

First we need to download OpenCart Shortcodes.

To install you need to extract then use Extension Installer in your admin site to upload shortcodes.ocmod.zip. Or manually through FTP to upload all files inside upload/ to your site root.

Shortcodes Tags

Before using shortcodes, we need to understand how shortcodes formatted. Shorcode tags available in two format:

Self-closing tags:

[tag atts="x" /]

Enclosing tags:

[tag atts="x"]content[/tag]

To show the usage, let’s say we want to add link to product with id 42. We could use something like this:

[link_product id="42" /]

Which will later replaced with html link tags and the product name

// SEO URL alias disabled
<a href="http://example.com/index.php?route=product/product&product_id=42" title="Apple Cinema 30"">Apple Cinema 30"</a>
// SEO URL alias enabled
<a href="http://example.com/apple-cinema.html" title="Apple Cinema 30"">Apple Cinema 30"</a>

Shortcodes Sample

Shortcodes tags parsed only in few pages like information, product and category content. But you might wonder how to write shortcodes in the editor, image below show you shortcode look like in editor:

To make easy for you to use, OpenCart Shortcodes come with ready to use shortcodes tags which you can see all the list and how to use it here.

Now we will use the sample that come with OpenCart Shorcodes in information pages. Go to your OpenCart 2 Admin > Catalog > Information and add new Information. In the editor click the “Code View” then copy-paste quick-sample-code.txt content to your editor.

Open your information page at the front site and you will get the same result as on Shortcodes demo page.

Conclusion

Shortcodes help us from insert product link that return URL alias, add video content from YouTube or Vimeo, or even popup image and load modules which is require some sytlesheet and javascript to work properly become easy.

Have you try to use Shortcodes? what you think about it?

Disclosure: OpenCart Shortcodes developed by the author of this post.

Tags: extension, shortcodes, themes