Integrating Snipcart with Kirby CMS to Enable E-Commerce

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."

snipcart-kirby-integration-character

"Of course I know Kirby, man."

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:

snipcart-kirby-integration-demo-shop

The code for this demo is available on GitHub. One important thing you'll need to do before we start is create a Kirby project. You can do this right here.

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.

The first step you need to do is to add the JavaScript and CSS dependencies of Snipcart to our Kirby site. To do so, you'll need to go to the snippets folder and edit the header.php file.

<script 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    type="text/javascript"></script>
<script type="text/javascript"
    id="snipcart"
    src="https://cdn.snipcart.com/scripts/snipcart.js"
    data-api-key="YOUR_API_KEY"></script>
<link id="snipcart-theme" type="text/css"
    href="https://cdn.snipcart.com/themes/base/snipcart.min.css"
    rel="stylesheet">

After inserting the Snipcart code snippet, here's what my header.php file looks like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>
  <meta name="description" content="<?php echo $site->description()->html() ?>">
  <meta name="keywords" content="<?php echo $site->keywords()->html() ?>">
  <?php echo css('assets/css/main.css') ?>
  <script
    src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    type="text/javascript"></script>
  <script type="text/javascript"
      id="snipcart"
      src="https://cdn.snipcart.com/scripts/snipcart.js"
      data-api-key="YOUR_API_KEY"></script>
  
  <link id="snipcart-theme" type="text/css"
      href="https://cdn.snipcart.com/themes/base/snipcart.min.css"
      rel="stylesheet">
</head>
<body>
  <header class="header cf" role="banner">
    <a class="logo" href="<?php echo url() ?>">
      <img width="200" src="<?php echo url('assets/images/snipcart-logo.png') ?>" alt="<?php echo $site->title()->html() ?>" />
    </a>
    
    <?php snippet('menu') ?>
  </header>

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:

Kirby project products arborescence

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.

1-Lightsaber/product.txt

Name: Lightsaber
----
Price: 10.50
----
Identifier: 1
----
Weight: 10
----
Description: Luke Skywalker's first lightsaber imitation
----

2-Blaster/product.txt

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.

Suggested posts: