Snipcart and Orchard CMS for E-Commerce

Snipcart and Orchard CMS for E-Commerce

While working on an e-commerce store using Orchard CMS for a client I came across Snipcart. Snipcart is an HTML / JavaScript shopping cart that is very easy to add to any website, including static websites. At first I thought Snipcart's claims of being easy were too good to be true, but after integrating Snipcart into Orchard CMS I quickly became a fan.

Snipcart and Orchard CMS Integration Options

There are many ways to integrate Snipcart with Orchard CMS and any of them would be fine depending on your needs.

Since Snipcart just requires a bit of HTML and JavaScript to define products, etc., you could easily add the HTML and JavaScript directly to your Orchard pages or custom Content Types ( e.g. Product ) in perhaps the Body Content Part or HTML Element in Orchard Layouts. If you just have a few products, this is an easy solution to get you up and running.

If manually adding HTML to each product is too much effort ( especially for a large number of products ), one could customize the shapes of a custom Product Content Type, Layouts, etc. to automatically display the Snipcart HTML Tags. This is much easier to maintain and worth doing if you have the necessary Orchard CMS development skills.

If your Orchard CMS skills are even more impressive, other solutions to integrating Snipcart with Orchard CMS would include custom Snipcart Content Parts and Widgets as well as Parameterized Snippets and custom Elements for use with Orchard Layouts. This would require you to develop custom Orchard Modules, but the reusability across your Orchard Websites might be attractive.

Snipcart Features for Orchard CMS

I didn't use Snipcart on the client project, but that didn't stop me from doing a little late night development to integrate Snipcart into Orchard CMS. Shown below are a bunch of features I created for Snipcart in Orchard CMS that I hope to use in future projects. I went ahead and did a very thorough integration that provides 1) custom Orchard settings and resource manifest; 2) various elements for use with Orchard.Layouts, including Add to Cart, View Cart, and Cart Summary Elements; 3) various Content Parts and Widgets; 4) support for Snipcart Webhooks; and 5) Orchard eventhandlers and workflow activities for that extra extensibility.

Snipcart and Orchard CMS E-Commerce

The Snipcart Settings in Orchard CMS handle the basics as you would expect. It allows you to enter your test and production API Keys for Snipcart as well as a secret key that allows you to access the Snipcart API for your account. One can also set some global settings that you may want to configure for Snipcart, such as disabling cart popups when items are added to a cart as well as including custom order fields. This can be further extended depending on what functionality your e-commerce website might need, of course.

Snipcart Settings in Orchard CMS

If you have a few products and just want to use custom elements for Orchard.Layouts, just enable the Snipcart Layouts Module and use the various elements in your pages, widgets, etc. It literally takes minutes to create a page that allows one to buy bacon just like the example shown on the Snipcart Website. The modules handle all the work of making sure the Snipcart CSS, JavaScript, API Key, and HTML tags are populated on your website accordingly. The same is true if it makes more sense to use the custom Orchard Content Parts and Widgets Feature, too.

Snipcart Buy Now Button for Orchard CMS E-Commerce

Snipcart Webhooks and Orchard CMS Workflows

Snipcart Webhooks make things really interesting when it comes to Orchard CMS integration. It would be really easy to handle things like product inventory, downloadable content/distribution, etc. and other features not available with Snipcart. You can do this via the custom Orchard CMS eventhandlers or workflow activities I built for use with Snipcart Webhooks.

Snipcart Webhooks with Orchard CMS Workflow Activities

Conclusion

If you want to build an e-commerce website with Orchard CMS and Snipcart seems like a good fit, let me know. If I were building an e-commerce website today for myself, I would use this combination of Orchard CMS and Snipcart. Orchard CMS is amazingly extensible and Snipcart just makes e-commerce really simple.

Other E-commerce related blog posts: