Improved E-Commerce Integration for Joomla! Developers

In a rush? Skip to tutorial steps or GitHub repo & live demo.

Last week our content guys came up to me with a request that shocked me out of my morning sleepiness.

"We need to make a Joomla! tutorial for the blog."

With all the headless CMS and static site generators talk we've been doing lately, it sounded like a big editorial stretch, suddenly making a piece about the traditional CMS that is Joomla!.

Once I came back to my senses, I remembered how often we're asked through our support if it's possible to integrate Snipcart with this very CMS. The simple answer is yes, you can. Snipcart is actually a great fit for Joomla!, or any other traditional CMS for that matter.

For a more thorough answer, we thought it would be a good idea to offer a Joomla! tutorial for developers interested in a custom e-commerce experience.

In this article, I want to present different options for dealing with e-commerce on your Joomla! website. Whether you want to explore pre-existing plugins (some of them built with Snipcart) or you want a more custom integration for your shopping cart, you'll find what you need below.

What is Joomla?

what-is-joomla

Joomla! is a free and open-source content management system.

It's an important player in web development, being the most popular open-source CMS out there, coming in second overall behind WordPress.

Its non-corporate background makes it a community-driven product. It's backed by volunteer developers working out of passion for crafting something that truly meets their needs.

When you need tons of features and a rock-solid admin for editing content, a traditional CMS like this has a lot to offer. Since its inception in 2005, its wide community has created thousands of extensions, plugins & templates to help developers and non-technical users alike expand their projects.

As for e-commerce, there's a bunch of reasons why Joomla! can be a good option for your online store:

  • Wide array of extensions
  • Enhanced security
  • Multilingual capabilities
  • Resourceful community

First, let's see what Joomla! already offers for e-commerce and where Snipcart fits in.

Joomla! e-commerce plugins

I've got to admit I was happily surprised by the quality of some of the plugins for Joomla! built around Snipcart. For non-technical users looking to rapidly craft sleek stores, these could be quite helpful.

S5 Snipcart by Shape 5

This one is quite basic as it simply injects Snipcart's JavaScript in your website. You'll have to use our HTML product definition, which requires a bit of technical manipulations. It will be easy to use Snipcart's features though. It's important to mention that, unfortunately, it only runs with the v1.0 of our cart.

CMSnipcart by CMExtension

This one is a cool piece of work, mainly in the admin part. Most configuration options of Snipcart for product definition have been transposed into corresponding editable fields—from product weight to order & product custom fields. The author even used our REST API to expose some part of our dashboard directly into the CMS admin! You can find a demo store right here. Once again, this plugin only uses our v1.0.

We still offer support for v1.0 and will continue to do so, should you want to go with these options. You could also contact plugin developers and asked them to update their plugins to our v2.0. ;)

Versla template by RocketTheme

This one genuinely impressed me. It explores more deeply Snipcart's flexibility, thanks to its use of Snipcart's v2.0. It was developed by RocketTheme, which has a lot of experience creating plugins for multiple CMS. It's built using Gantry, so if you are familiar with it or ever used other themes by RocketTheme, you should feel right at home. It enables complete products configuration and provides you with a simple yet good-looking shopping experience, as you can see in the link above.

For more available e-commerce solutions for Joomla!, here's a useful extension directory.

Now, for a use case that is developer-oriented, let's see how you can integrate Snipcart in one of these plugins and add some cool shopping features to your website.

Joomla! tutorial for developers: plugin update

Both CMSnipcart and Versla themes are fully plug’n’play and have good documentation, so if one of these fits your needs you should be able to get started pretty quickly.

Here, I’ll focus on how to start from a base Joomla! installation and add Snipcart using an updated version of the S5 Snipcart plugin. For this demo, I’ll consider that you are already familiar with Joomla! and installing plugins. If you aren't, here's a good place to start.

The only prerequisites you need to follow along are a Snipcart account (forever free in test mode) and a Joomla! instance running.

Let’s start by updating the plugin to support Snipcart v2.0, then we’ll go on to add some features to our cart.

1. Updating S5 Snipcart Joomla! plugin to v2.0

That plugin being really simple, all we need to do is to change the included Snipcart tags for those of the v2.0. In tmpl/default.php, we'll rewrite the tags to:

$document->addCustomTag('<link rel="stylesheet" href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" />');
// and
<script type="text/javascript" id="snipcart" src="https://cdn.snipcart.com/scripts/2.0/snipcart.js"  <?php if ($s5_sc_cartpopup == "no") { ?>data-autopop="false"<?php } ?> data-api-key="<?php echo $s5_apikey ?>"></script>

All that's left to do is to create a new zip containing the updated files. You can also directly grab the new module's package here. If you previously installed the old version, it will simply replace it and keep your configurations.

To enable that module, go to Extensions > Modules > S5 Snipcart V2 then

  • Add your Snipcart public API Key
  • Select a position to show the module (I put mine in position-1 which for my chosen theme is in the site header)
  • Set the status to published
  • Set the Module assignment to "On all pages"

joomla-plugin-config

You'll now have the shopping cart button somewhere on your site corresponding to the theme's selected position.

2. Adding our products

With Snipcart, this step simply consists of attributes on a link. We can put buy buttons anywhere Joomla! allows us to edit content in HMTL, so I created a few articles and added my buy buttons under Tools > Source Code:

joomla-component-source

Then we simply create our products with the following lines:

<a class="snipcart-add-item" href="#" 
    data-item-id="moose-hat"
    data-item-name="Moose Hat"
    data-item-url="https://snipcart-joomla-demo.herokuapp.com/index.php/2-uncategorised/1-awesome-moose-hat"
    data-item-price="15">Buy it for 15$</a>

3. Styling our Joomla! shop's buttons

As you may know, Snipcart gives you a whole lot of freedom when it comes to customizing your shopping cart. For this simple demo, I'll simply and quickly stylize my buy buttons.

To do so, I add to my template's main CSS:

.snipcart-add-item {
    padding: 10px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    border-radius: 3px;
    text-decoration: none;
    color: #f2f2f2;
    background-color: #005e8d;
    font-size: 1.5em;
    font-weight: bold;
}

And there you go! We quickly get a small Joomla! shop that runs with Snipcart's v2.0.

joomla-demo-store

joomla-cart

Joomla! tutorial for developers live demo

You can now browse our demo website, view product details and add them to the cart:

See GitHub repo for v2.0 plugin

See live demo

Closing thoughts

Reviewing the integrations made by the community was a delight. They are great examples of what can be achieved with Snipcart's developer-focused features. Although, like I've shown, if you prefer you can always start from scratch and use Snipcart's markup directly!

Quick tip: it's always a good thing to understand what's going on inside a plugin in case it doesn't support a feature you want to use.

It took me no more than a few hours to craft the whole thing, this including the time it took to understand everything necessary to put it all together. I have to admit that it was a first time for me playing around Joomla!. Updating and repackaging the plugin only took a few minutes.

I was impressed by the number of plugins available for Joomla! and I feel there's probably some that would have been great additions to this demo. Don't hesitate to share your favorite ones in the comment section!

I remind you that Joomla! is open source, so feel free to join the community and participate.


If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!

Suggested posts: