Integrating Snipcart with Kirby CMS to Enable E-CommerceJuly 30, 2015
A few weeks ago, our content guy Francois came to me asking if I knew a little about Kirby. Since I was a Nintendo aficionado in my younger days, I automatically answered: "Yes, of course."
If, like me, you first thought of that cute/badass pink character, think again. Kirby also happens to be a lean, file-based PHP CMS. Our lead developer Charles had already spotted quite a few mentions of Snipcart in e-commerce threads on their awesome Discourse-powered forum. So what Francois was asking me, basically, was to dig a little into their documentation and come up with a Snipcart-Kirby integration we could show off. I tried not to think about the awesome Nintendo conversation we could've had and got to work.
I was happily surprised to discover how easy to use Kirby actually was. I managed to build a demo online shop with Snipcart and Kirby in about 30 minutes. So for this post, I'm going to show you how to start selling lightsabers and blasters with our platform and Kirby's.
Setting up my Snipcart-powered Rebel Forces shop on Kirby
Before we dive into the code, let's take a quick look at the demo shop I built for the Rebels:
Disclaimer: for this blog post, I'm assuming you know the basics of using Kirby as a CMS.
Adding the Snipcart dependencies to our site
Your Kirby project is created? Nice! Now we can start this.
After inserting the Snipcart code snippet, here's what my header.php file looks like:
Adding products to our store
Second step is to create our products in our Kirby site. To do this, I created a root folder called
products, in which I added a folder for each product I wanted to create. Here's a screenshot from my actual file tree:
As you can see, I've added "1-" and "2-" to my product folders. I did this because Kirby will set the display of my items by considering their order in my root folder. After you create your product folders, you will need to add a product.txt file in each one of them. Let's see the content of those files.
Name: Lightsaber ---- Price: 10.50 ---- Identifier: 1 ---- Weight: 10 ---- Description: Luke Skywalker's first lightsaber imitation ----
Name: Blaster ---- Price: 23.50 ---- Identifier: 2 ---- Weight: 10 ---- Description: Refurbished stormtrooper blaster ----
This is the way we add data-fields in Kirby. You can see here that I added my Snipcart mandatory fields name: Identifier, Price and Weight. I'll show you how to use them in the "add to cart" button.
Displaying our products on our site
Now, we will create a snippet to contain our Rebel Forces items list. First, in the snippets folder, create a new file called products.php. In this file, we will add HTML and PHP to show a list of products. This is what I put in my products.php file:
<h2>Products</h2> <ul class="teaser cf"> //Iterate in products list <?php foreach(page('products')->children()->visible() as $product): ?> <li> <h3> <a href="<?php echo $product->url() ?>"><?php echo $product->name()->html() ?></a> <span> <?php echo $product->price()->html() ?>$</span> </h3> <p><?php echo $product->text()->excerpt(80) ?></p> <?php if($image = $product->images()->first()): ?> <p> <img width="200" src="<?php echo $image->url() ?>" /> </p> <?php endif ?> <p> <a href="#" class="snipcart-add-item" data-item-id="<?php echo $product->identifier()->html()?>" data-item-name="<?php echo $product->name()->html()?>" data-item-price="<?php echo $product->price()?>" data-item-weight="<?php echo $product->weight()?>" data-item-url="<?php echo $product->url()?>" data-item-description="<?php echo $product->description()->html()?>"> Add to cart </a> </p> </li> <?php endforeach ?> </ul>
Adding a checkout link to our menu
If we want to add the checkout link to the menu, you can simply edit the menu.php snippet:
<nav role="navigation"> <ul class="menu cf"> <li> <a href="#" class="snipcart-checkout">Checkout</a> </li> </ul> </nav>
This'll make for a quick access point to the cart itself. And if you allow customers to create on-site accounts, they'll also be able to log in from there.
Importing our products.php snippet
Now one last thing and we will have a working Rebel Forces shop!
In the templates folder, find the home.php file and add your products.php snippet to it.
<?php snippet('header') ?> <main class="main" role="main"> <?php snippet('products') ?> </main> <?php snippet('footer') ?>
Well that was quick.
That's it folks! It took us less than 30 minutes to provide the Rebel Forces with enough laser-power to fight back against the Empire. In other words: setting up an online shop with Kirby and Snipcart was easy, straightforward and fast. I'm glad I got to play around with Kirby a little for this one. And since Snipcart can be plugged into any CMS out there, I'll probably have the chance to play with many others!
If you're a Kirby user (or not) and have feedback, questions, suggestions regarding this integration, go ahead and hit the comments. We're opened to discuss ideas and stuff for sure! And if you enjoyed this post, feel free to share it on Twitter.