iGoCordless: a B2C Umbraco E-Commerce Integration with a B2B ERP

In this case study, we interview Vincent Paquette, a frontend developer working at our Québec mother agency, Spektrum. With the help of other developers, he built a cool client site, iGoCordless, which runs Snipcart e-commerce on top of Umbraco CMS.

Vincent, or V-Pac as we like to call him, is the youngest developer in the shop. He's a self-taught, 19-year-old frontend geek with a passion for beautiful code & UX. When he was 13, he built his first site—for his dad's business—and has been in love with coding ever since. Small experiments with JS & PHP scripts eventually led him to Single Page Applications, which he now thoroughly enjoys: Vue.js, good ol' vanilla JS & Netlify are his go-to tools nowadays.

The business

iGoCordless sell high-end, eco-friendly lawn and garden equipment & accessories. Unlike gas-powered machines, their 100% lithium-ion, battery-powered products have zero emissions. They're an authorized reseller of many top-tier brands like Oregon, EGO, & Greenworks. The website, which is the consumer-facing, B2C branch of Théo Turgeon Equipment, a Spektrum customer.

The agency

Spektrum is a high-end web development shop from Québec City, Canada. For nearly 9 years, they've been crafting top-shelf software & sites for big clients. They're also the ones who helped us bootstrap Snipcart in the first place (full story here). Needless to say, we love these guys. <3

Snipcart Integration: Technical interview with Vincent

How was the client operating prior to your development efforts? How were retail and online sales handled?

The B2B company behind iGoCordless, Theo Turgeon, has been running a traditional biz dev operation since 1983: representatives on the road, email/phone follow-ups, shaking hands... that kind of stuff! We (Spektrum) had already developed a custom portal for them. The app basically allowed existing customers to browse & set up recurring purchases from their product lines. Before the iGoCordless e-comm upgrade, the B2C layer was completely absent from their business.

Do you have experience with e-commerce in general? If so, which tools have you been using the most in your workflows? Why?

Spektrum has done a few high end, custom e-commerce systems for clients since its inception. As for me personally, I have experience with WordPress/WooCommerce & PrestaShop. They're cool solutions and all, but a bit too clunky & limiting for my taste! :P

How would you qualify the e-commerce needs your client had for this project? Why pick Snipcart?

Well, it really was a new initiative for the client. They were investing in a consumer-facing project for the first time, so they wanted to get to market ASAP and get a feel for the demand. However, they also needed that B2C e-commerce website to be integrated with their local ERP & CRM to keep everything in sync. Their products & inventory were already in place in their existing systems. So we came up with an e-commerce set up that 1) pushed outbound data writing sales in their financial system, and 2) fetched inbound data to update products inventory. I think Snipcart was a fit because it was both easy to set up—few lines of code and you're good to go—and easy to integrate with other systems thanks to the API & webhooks.

So, you integrated Snipcart on top of Umbraco, which has a special place in our .NET-loving heart. Any interesting parts of that integration to highlight here?

Webhooks

We use Snipcart's webhooks for two reasons: handling shipping methods and managing orders inside the ERP.

Shipping methods

The client has some geographical restrictions regarding where they can ship or not. We need to use the address provided by the user during checkout to match the information we have in the ERP. So, for instance, with an address X, user A could be offered to receive her package directly at home, while user B's address Y could mean she has to pick it up in the nearest distribution center.

Order management

We need to make sure Snipcart orders go through the same process as the distribution centers'. To accomplish that, we had to install a webhook on Snipcart-generated orders that triggers their insertion into the ERP. This was a critical task because we needed to offer real-time product quantities on both ends of the spectrum.

Synchronizing data exposed to Snipcart

We synchronize products available online directly through the CMS. Which means original product names, descriptions, images and quantities always match displayed Snipcart products. Content management is thus centralized in the ERP.

To customize the frontend experience, I used out-of-the-box functionalities like the cart summary and multilingual feature.

How long did it take to get Snipcart up and running? Did you rely much on our API & webhooks?

A few days of focused development if you count CSS customization & ERP integration.

Were our documentation & support helpful?

They were indeed. I mean, we work in the same office as Snipcart's devs, and almost never spoked about the project IRL with you guys!

Did you get the chance to use advanced Snipcart features (inventory management, abandoned carts, email templates customization, multi-currency, etc.)? If so, how did it go?

iGoCordless makes use of a few cool Snipcart features: webhooks (as mentioned above) for sales & inventory sync, abandoned carts campaigns, custom email templates, and we also do funky stuff with the discount system. :)

No multi-currency for now, but I'll surely have future projects in which I'll dive deeper into Snipcart's feature set.

What could we improve to make Snipcart an even better e-commerce solution for developers & merchants?

More flexible HTML customization for the cart: I'd have needed to add some divs for the CSS layout, for instance. It wasn't a really big problem: I managed to do everything I wanted using CSS (flexbox order).

I know you guys are working on a supposedly ultra flexible v3.0, so I'm eager to see how that turns out!

**BONUS: Any specific JS or CSS framework you're enjoying these days? **

I'm a big fan of the JAMstack—completely separating the backend from the frontend. Like you guys, I fell in love with Vue.js a few months ago: it's so easy, I now use it everywhere I can. It allowed me to stop using jQuery and use vanilla JS with the new ES6 features. Of course you still need babel-polyfill to make these work.

As far as CSS frameworks go, I'm not a fan of one in particular. But Bootstrap 4 is pretty nice, and I sometimes use Flexbox Grid to save some time, depending on the project.

We'd like to thank Vincent & the folks at Spektrum for taking the time to collaborate with us on this case study.

It's always a pleasure to see our mother agency using our product, and to get direct feedback from our talented peers! You can follow V-Pac on Twitter or BitBucket.

And if you've got gardening & land care tasks planned, consider copping an eco-friendly tool from iGoCordless!

Liked this post? Take a second to share it on Twitter. All of us (iGoCordless, Spektrum, & Snipcart) would really appreciate it. We'd also love to hear your thoughts and questions on the integration itself below!