Building a Pagekit CMS E-commerce Demo with a Products Extension

That's what our content guy told me while pouring his first coffee of the morning. I had just asked him what my next blog post should be. After taking a hot sip myself, I replied:

"How about something with Vue.js? Would be fun to try that framework."

He raised an eyebrow, interested: our last posts on Angular & React had been quite successful. I gave him the TL;DR on what Vue.js was all about. He nodded:

"Awesome. Go for it."

And so I did. I dived into a rabbit hole of Vue.js resources. I stayed down there much longer than I should've. But eventually, I climbed back with what I was looking for: Pagekit CMS.

A few months old, this CMS leverages Vue.js for its frontend, and a bunch of other cool, powerful stuff. Its sexy material UI caught my eye, and I decided to see how well it could play with our own HTLM/JS shopping cart platform.

Today, I'll show you how I built a Pagekit e-commerce demo from scratch. I'm going to share steps, code, and the custom extension I came up with.

Shall we?

A word on Pagekit CMS

Pagekit is an open source CMS crafted by the folks at YOOtheme. It uses modern frameworks like Symfony & Vue.js. Much like Snipcart, it fosters a lightweight, modular approach to web development. The result is a refreshing CMS with a focus on managing content through crisp UIs.

Results: Pagekit live demo & code repos

Conclusion

I won't lie to you: crafting this demo took me way longer than I'd have thought! I spent a good 5-6 hours on it. My PHP skills weren't that sharp when I started this mini project, and my lack of knowledge regarding Pagekit's unique CMS stack slowed my development. For PHP beginners, a little more thorough documentation could go a long way. Their active Gitter community, on the other hand, provided me with some much-needed help a few times!

Honestly, I found Pagekit's modular approach to be very neat. Minimal scaffolding; lots of control. It might make for rougher starts for novices, but the growing extension marketplace will help. All in all, I feel quite positive about my experience with Pagekit. And I loved playing with Vue.js!

I do hope this post encourages developers to work on e-commerce projects with Pagekit and Snipcart. If you do build such a setup, make sure to share it with us!