E-Commerce on a Custom Webhook CMS Project With Snipcart

Well hello all. Max here, new developer at Snipcart. You might've caught me sharing my first week at Snipcart on the blog. Or discussing how to integrate our shopping cart with October CMS. Anyhow, this week, I'm playing around with another awesome tool: Webhook CMS.

In the following tutorial, I'm going to show you how to integrate our shopping cart platform directly within a custom Webhook CMS. The result will be a clean, easy-to-use e-commerce backend for developers and merchants alike.

Let's get started.

What is Webhook CMS

Webhook is a cool app that lets you design custom CMS for online projects. It runs locally on your computer, either via their app or command line tools. Your local site auto-refreshes your changes in the browser while you're developing, making for a cool workflow. Playing around with content types and simple widgets & fields allows you to create a fully functioning CMS in a blast. You can invite clients and collaborators to manage and add website content at any point.

Once you're ready to go live, Webhook generates blazing fast static sites with their cheap hosting. And if you're not new on the blog, you might already know how much we like static sites. You can also use your own infrastructure to host your site.

5 steps to integrate Snipcart inside Webhook CMS

You'll need a Snipcart account before getting started. You can sign up free here and complete the simple activation steps.

Note: for this post, I'm assuming you're already familiar with Webhook CMS a bit. If you're not, check out their Quick start documentation.

1. Create a content type for your API key

First, you'll want to create a container to store your API key and avoid hard-coding it in your pages.

Click on the Add/Edit Content types in the configuration panel. Then, click on the green Add new content type button. Name your new content type as you wish. For instance, I used "Snipcart".

Model your content type as follows:

snipcart-webhook-cms-content-type-snipcart

This will grant you access to your newly created content type in the Your Content panel.

You can now give a value and a name to your API key.

2. Create a new product content type

At this point, simply repeat the process above, but for a Product content type.

Your content type attributes should look like this:

snipcart-webhook-cms-content-type-product

Done Great! Now you can create your products. :)

For this tutorial, I created two products for our Focused Geeks demo store.

snipcart-webhook-cms-two-products

3. Create your store page

Time to get our hands dirty! Leave the CMS and jump in your code repo. There, create a page to display your products.

Let's start by adding a new page extending base.html which is our main layout that contains scripts and CSS things.

We will need to implement the scripts_extra and the head_extra blocks to include our Snipcart scripts and styles. This way, they'll only be served on necessary pages.

{% extends "templates/partials/base.html" %}

{% block head_extra %}
  <link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />
{% endblock %}

{% block scripts_extra %}
  <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api- key={{ cms.snipcart.api_key }}></script>
{% endblock %}

As you can see, we provide the data-api-key value with the Snipcart content type created earlier.

To render the different products in your CMS, you will want to loop for every Product content type and provide an associated template for each.

  {% for product in cms.product %}
    {% include "templates/partials/product.html" %}
  {% endfor %}

You'll now only need to create this specific product template and the job will be done!

4. Create your template

The template we are creating will be put it in the template/partials folder.

For our example, let's do a fairly simple one:

<div class="product">
  <h3>{{ product.name }}</h3>
  <img src="{{ product.image|imageSize(200, 200) }}" />
  <p>{{ product.description }}</p>
  <button
     class="snipcart-add-item waves-effect waves-light btn"
     data-item-id="{{ product.product_id }}"
     data-item-name="{{ product.name }}"
     data-item-price="{{ product.price }}"
     data-item-url= "{{ // + getSetting('site_url') }}"
     data-item-description="{{ product.description }}">
  Buy now!
  </button>
</div>

5. Make tons of money with your new e-commerce site!

By now, you should have a simple e-commerce set up, like this:

snipcart-webhook-cms-end-result

Check out the code for this demo on our GitHub repo.

Conclusion

Integrating Snipcart in Webhook CMS for this e-commerce demo was a great experience overall. The drag-and-drop builder was a fast and hassle-free way to create content types while staying in the CMS. The workflow is easy to get and lets you start doing real work in minutes.

Of course, we'd love to see more Webhook CMS + Snipcart e-commerce sites pop up. If you work on such a project and need a hand, don't hesitate to shoot us an email at geeks@snipcart.com. We'd love to help and share your project with the community once it's completed!


If you enjoyed this post and found it valuable in any way, go ahead and send a tweet our way. That would be awesome of you. :) Any questions about Webhook CMS & Snipcart? Hit the comments!

Suggested posts: