Integrating Snipcart with Umbraco:
Pre-Zombie Apocalypse E-Commerce

What is Umbraco?

Umbraco is one of the most reliable .NET content management system. It's also the most deployed CMS on the Microsoft Stack. It's a powerful developer-oriented tool for service providers, and it also provides a very user-friendly interface for mere mortals who aren't well-versed in the art of code. Last but not least, it’s offered to the community for free, making it a perfect open-source subject to integrate with Snipcart.

So today, I'm going to show you how to integrate Snipcart with Umbraco.

More specifically, I'm going to show you how to create a pre-apocalypse online store for zombie invasion survivors. Let's do this.

This post will use plain vanilla Umbraco features. If you want to dive deeper into it, I recommend checking out Surface Controllers, uCreate, and this awesome project built with the best Umbraco development practices.

Umbraco installation

Thanks to its great documentation, installing Umbraco through NuGet is pretty much straightforward. Just follow these steps and you will be up and running in 5 minutes.

Now let's get our hands dirty

For this post, I assume you have a compiling project that can be accessed on both IIS and Cassini. Choose your favorite methodology; it won't affect the results at all.

1. Document types

Our first document type will be used as a container for all our products and our second one will contain all product information. Let's head to the Settings panel and create the following components:

Product with those properties

  • Name, as a "Textstring" field
  • Description, as a "Textstring" field
  • Price, as a "Numeric" field
  • Picture, as a "Media Picker" field
  • Then, choose your favorite icon! In my case, I will use a simple shirt icon provided by Umbraco Icons.

Products

  • In the structure tab, enable "Product" as the allowed child node.
  • Enable list view.
  • Work as a container, so we don't need to add any properties.
  • Here, I don't feel the need to choose a particular icon; the default one is a folder, which makes sense.

snipcart-umbraco-document-types

Then, edit the default "Home" node and add the doctype "Products" as an allowed child node.

2. Content

Now let's create awesome products so our zombie apocalypse survivors have a fighting chance against the ruthless, swarming hordes of hungry undead.

Expand the Home node in the Content section and create a new "Products" node. (You can name this node however you want. But if you want to dedicate a single page to each product, then this name is going to be part of its URL.) After that, you will be able to create a product. These are the ones I chose to sell:

  1. Katana, with "A Japanese long sword used mostly by samurai warriors and apocalypse bad-asses." as description, and 60 as price.

  2. War Rig, with "There’s big, there’s bigger, and then there’s holy-crap gargantuan. A six-wheel-drive Tatra semi powered by two supercharged V-8s seems big enough to qualify for that last category." as description, and 150 000 as price.

  3. Shovel, with "There is probably nothing in your arsenal more useful than a good ol' shovel." as description, and 30 as price.

snipcart-umbraco-product

So, good news now folks: we are already done configuring our shop in Umbraco!

3. Front-end (HTML & CSS)

Since the apocalypse is imminent, our survivors can't afford to spend time searching for products on our website. So we'll make them appear directly on the homepage. To do so, let's open the template named "Home". Remove useless stuff from the Umbraco starter kit theme, and add this snippet to your view:

@{
    Layout = "Master.cshtml";
    var products = Model.Content.Children.First(x => x.DocumentTypeAlias == "Products").Children;
}

<div class="container">
    <div class="row clearfix">
    @foreach (var product in products)
    {
        var pictureId = product.GetPropertyValue<int>("Picture");
        var pictureElement = Umbraco.TypedMedia(pictureId);
        var price = product.GetPropertyValue("Price");

        <div class="col-md-4 column">
            <div>
                <h2>@product.GetPropertyValue("Name")</h2>
                <img src="@pictureElement.Url" />
                <p>@product.GetPropertyValue("Description")</p>
                <p>
                    <a href="#"
                       class="snipcart-add-item"
                       data-item-id="@product.Id"
                       data-item-name="@product.GetPropertyValue("Name")"
                       data-item-description="@product.GetPropertyValue("Description")"
                       data-item-price="@price"
                       data-item-url="@Model.Content.UrlAbsolute()">
                        Buy
                    </a>
                </p>
            </div>
        </div>
    }
   </div>
</div>

Add the following HTML inside the file "Master.cshtml":

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

Shall we take a look at our zombie apocalypse online store now?

snipcart-umbraco-online-shop

Code-wise, the integration of Snipcart to Umbraco is now complete. We're ready to cash out on the inevitable, upcoming zombie apocalypse. There is only one final step left for our customers: survive.  

Conclusion

Integrating Snipcart to Umbraco's open source CMS was simple, quick and painless. Like I mentioned at the beginning of this post, there are lots of ways to push Umbraco further. As a fan of the CMS myself, I invite you to check out the provided links and explore the Umbraco universe a bit more.


Your thoughts & questions on this Umbraco/Snipcart e-commerce integration are more than welcomed in the comments. Same thing goes for your thoughts on the zombie apocalypse and survival best practices. If you found this post valuable and/or entertaining, please, take a second to share it on Twitter.

Suggested posts: