Kinderkamer Posters: Cart Implementation on a MODX E-Commerce Site

For this case study, we interview Michiel Zoer, a web developer & designer from the Netherlands. He's been running his prolific "one-man-show" studio, Vlijmscherp, for about ten years. From strategic thinking, UX and design to coding, he handles every part of client work.

His latest project gave him a chance to do something he loves—try new technologies. With kinderkamerposters.com, he implemented Snipcart on a MODX site and built an API connected to a hybrid Vue.js app.

Today, he's going to tell us a little more about his experience doing so!

Here's hoping the case study makes you want to try out a decoupled e-commerce approach yourself. :)

The site

The kinderkamerposters site actually began as a "familial" side project.

Michiel and his wife, both fans of Scandinavian design, were looking for clean, lean posters to hang in their children's rooms. They scoured the Internet, but couldn't find anything they liked. Turning that deception into inspiration, they ended up crafting the posters themselves. The kids loved them, and so did they. After a while, they started thinking other parents would also like to lighten up their homes with joyful designs. So they went all in and decided to launch a web shop filled with their lovely posters.

The site had to be simple, beautiful, and easy to navigate. While Michiel's wife had experience running a Magento store, she now wanted something simpler. Both of them were tired of large e-commerce platforms like Magento & Shopify.

Consequently, Michiel chose to create the store using Snipcart on top of his favorite site builder: MODX, a lean, open source PHP CMS that's easy to maintain & enhance.

Snipcart integration: Technical interview with Michiel

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

Yeah, sure! I used a lot of open source platforms and carts like Magento, Shopify, Ecwid, MODX MiniShop, MODX simplecart, custom-built platforms, etc.

Magento, especially, was implemented for several of my clients because of its many features (order management, payment solutions, shipping solutions, etc.). I think the platform has to fit the client and the project. Each client and shop has its own requirements. Since most of my clients are from The Netherlands, I have to make sure the online payment solution we use here (iDeal) is supported. Because of the complexity of Magento, I have been scaling down my implementations and now outsource these kinds of projects so I can focus on my own expertise: fast and clean MODX websites and shops.

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

Lean and mean. Easy to maintain and simple to enhance and expand. Since we launched this as a side-project, we started small: measure, adjust, enhance, measure, adjust, expand. As mentioned before, the iDeal payment solution is an absolute must. Order management was a nice-to-have, as was shipping management. Other features like newsletters or inventory management would be necessary at a later stage.

The most needed and basic feature was to be able to pay online for products, in a user-friendly, non-distracting manner. The checkout should be easy, almost a pleasure. :-)

There’s a plethora of solutions and tools to handle e-commerce projects. Why use Snipcart?

I implemented Snipcart because of its ease of use, flexibility and, of course, the backend it offers. The implementation has almost no impact on ‘regular’ development: I have all code, images, products in my own CMS, so it's fully flexible there. I really needed to be able to implement the shop in MODX CMS and be able to style the product lists, detail pages, and checkout the way I want. Most of this is simply possible by using Snipcart. Customizing the cart and checkout was probably the most daunting task.

Did you integrate our e-commerce solution on top of a specific CMS or site builder? If so, how did it go?

Yes! My favourite CMS: MODX. Because of the structure of the CMS, the implementation was quite easy. MODX works with ‘resources’, which represent pages. Default pages contain all of the default fields known to pretty much all CMSs (pagetitle, alias/slug, content, introtext, description, etc.). By using custom fields (known as Template Variables in MODX), you can easily add extra fields to a resource. This way you can transform a regular page into a product page. Add some fields for the price, SKU, images, etc. and you’re good to go.

I had some difficulties customizing the cart, because I didn’t want to use the Snipcart modal cart (mainly because of the styling). I wrote some custom code (AJAX JS), which fires upon the add-to-cart event. The code retrieves the cart-items from the snipcart-cart and renders a new piece of HTML which is inserted in my own ‘cart’. I didn’t want to disrupt the shopping process by breaking out the UI until it is time to checkout.

How long did it take to get Snipcart up and running?

Up-and-running in 30 minutes I guess (functional). The total process, including styling and setting up MODX, took me about 1 day. My cart customization took me quite some time. :-/

Did you rely much on our API & webhooks for this integration? If so, how did it go?

As mentioned before, I use some custom script to fetch the cart-items and render my own HTML. Because I use my own ‘cart’, I had to create some other events too. I use the item.added (which triggers the render of the cart HTML) and the item.removed (which also triggers the render of the cart HTML). Haven’t had time to set up the webhooks, but will do soon. I would really like to add all new clients (orders) to my Mailchimp list so I can get some automation going on. The docs seem pretty straightforward, so this shouldn’t take long to integrate.

Were our documentation & our support helpful?

Yeah! Docs were very clear. Code samples useful, just all good I guess. Keep up the good work! I also got quick and helpful replies to a couple of questions.

Did you get the chance to use some of our latest features on this project (inventory management, abandoned carts, email templates customization)? If so, how did it go?

I tried the email template customization, but definitely will have to put some more work into this. The ‘templating’ is easy to understand. First, I have to design and code my responsive emails. After this, I will use them in Snipcart—at the moment this is not my number one priority. :-) The default templates look great, so I will use these for the time being.

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

I would like to be able to use cart and checkout features by using a Snipcart API so I can style and create the whole checkout process myself. That would be awesome. I would also like to be able to use unique id’s for product variants. This would simplify inventory management and would also simplify using a ‘custom’ cart like I do. Updating and deleting items in my custom cart and using product variants is something I have disabled for the moment because of this.

We'd like to thank Michiel for taking the time to answer our questions. He's really built a cool shopping experience with kinderkamerposters.com. If you're a parent (or maybe a child at heart?), have a look at their posters!

Liked this post? Take a sec to share it on Twitter. It would mean a lot for all of us (Michiel, his wife, and us). We'd also love to hear your thoughts and questions on the integration itself below!