Edicy Is Now Shopping Cart Enabled with Snipcart

Important notice: Edicy is now operating as Voog. The integration demonstrated below might vary when executed with their new CMS.

This is another post concerning the integration of Snipcart with a simple hosted CMS that is Edicy. Edicy is a powerful multilingual CMS that offers simplicity and interesting capabilities for power users. Say you're usgin Edicy and would love to setup an ecommerce with a shopping cart to sell your products online?! This post will guide you through the simple integration of Snipcart and it might take 15 minutes if you’re using a 56k internet connection!

After signing up on Edicy, as usual we’ll need to include our magical Snipcart scripts and css in the header of your pages. To do that, click on the “DESIGN” section of your Edicy dashboard and click on the “MAXIMIZE” button.

You’ll then need to click on the “CUSTOM” link to enter the html edition panel.

Edicy template edition custom

We will keep Edicy default files, to include the Javascript file, go to the JS component and copy paste the <script> tag:

<!-- lang: html -->

<script type="text/javascript" 
    id="snipcart" 
    src="https://app.snipcart.com/scripts/snipcart.js" 
    data-api-key="MWY2NWExNzctZDYzZi00NjRkLWE5MmYtNDdhOWNmZDk3Yjc3"></script>

Then, open SiteHeader and include Snipcart default stylesheet

<!-- lang: html -->

<link id="snipcart-theme" type="text/css"
    href="https://app.snipcart.com/themes/base/snipcart.css" 
    rel="stylesheet">

The next step will be to create a new Catalog. A catalog in edicy is where you will store all the details of your website objects. In other words, this is your database where you will store the products you will want to sell online.

You will need to leave the site designer, click on the settings icon in the bottom right corner and go to Catalogs

Go to Catalogs

Create your first model by hitting the Add first model button. Name your model Product and add the following properties:

Once the model is created, you will need to create a new Layout that will list all the products that you add to your Catalog. To do so, go back in the site editor by clicking on Design in the bottom toolbar.

In the Layouts section, click on the + sign and create a new Layout:

Products layout

Notice that you have to choose Elements as layout content type.

Create another Layout that will be the product details page. Click on the + sign again and create the following layout:

Product layout

Make sure to choose Element as content type and Products as parent layout.

You will now be table to create the page, leave the site editor and go to Site Structure

Site structure

I removed every pages except the Home Page in my case but you can keep other pages if you want to.

Create a new page under Home Page and name it Store, make it use Products Type and layout.

Store

Now, you can start creating new products in your catalog, navigate to Catalogs and hit New object button to create your first product.

Let's say you want to sell some bacon, create an item like the following:

Bacon

If you go to your site preview by click on the Preview link in the bottom right corner, you will see the Store menu, if you click on it, a blank page will show up. This is because the Layouts that you created earlier are empty, you will have to add some code now. Go back to the site editor and open Products layout.

Type the following code:

<!-- lang: html -->

<html>
  <head>
    {% include "SiteHeader" %}
    {{ blog.rss_link }}
  </head>
  <body>
    {% include "Header" %}
    <div class="main-content main-division">
      <div class="content-center-wrapper">
        {% include "Mainmenu" %}
        {% include "Submenu" %}
        <div class="content-texts content-texts-wrapper cfx">
          <h1>Store</h1>
            <table class="products-table">
              {% for product in elements %}
                <tr>
                  <td>
                    <a href="{{ product.url }}">{{ product.title }}</a>
                  </td>
                  <td>
                    {{ product.price }} $
                  </td>
                  <td>
                    <a href="#" class="snipcart-add-item"
                      data-item-id="{{ product.uniqueid }}"
                      data-item-name="{{ product.title }}"
                      data-item-image="{{ product.image }}"
                      data-item-price="{{ product.price }}"
                      data-item-description="{{ product.description }}"
                      data-item-url="{{ product.url }}">Add to cart</a>
                  </td>
                </tr>
              {% endfor %}
            </table>
        </div><!-- .content-texts -->
      </div><!-- .content-center-wrapper -->
    </div><!-- .main-content -->
    {% include "Footer" %}
    {% include "JS" %} 
  </body>
</html>

Products layout content

This will create a <table> that will list all your products with a Add to cart button. In the first column, you will have a link to your product details page.

Now, you will have to add code to your product details page. Open Product layout and paste the following code:

<!-- lang: html -->

<!DOCTYPE html>
<html>
<head>
  {% include "SiteHeader" %}
  {{ blog.rss_link }}
</head>
  <body>
    {% include "Header" %}
    <div class="main-content main-division">
      <div class="content-center-wrapper">
        {% include "Mainmenu" %}
        {% include "Submenu" %}
        <div class="content-texts content-texts-wrapper cfx">
          <h1>Store</h1>
          <div>
            <h2>{{ element.title }}</h2>
            <a href="#" class="snipcart-add-item"
              data-item-id="{{ element.uniqueid }}"
              data-item-image="{{ element.image }}"
              data-item-name="{{ element.title }}"
              data-item-price="{{ element.price }}"
              data-item-description="{{ element.description }}"
              data-item-url="{{ element.url }}">Buy for {{ element.price }}$</a>
          </div>
        </div><!-- .content-texts -->
      </div><!-- .content-center-wrapper -->
    </div><!-- .main-content -->
    {% include "Footer" %}
    {% include "JS" %} 
  </body>
</html>

Product layout content

Now, if you preview your website, you should have a products table with Bacon in it and you should be able to navigate to the Product details page.

If you click on Add to cart, you should see Snipcart in action! You can now add all the products you want, edit your Layouts and make it look the way you want!

Snipcart in action

You are certainly flabergasted by how easy it was to integrate, but there is not cart summary! Let's add one. Go to the site editor, and open Header component.

Add this snippent after the header-slogan div tag.

<!-- lang: html -->

<div>
  <span class="snipcart-summary">
    Number of items: <span class="snipcart-total-items"></span>
    Total price: <span class="snipcart-total-price"></span>
  </span>
  <a href="#" class="snipcart-checkout" style="color: #000">View cart</a>
</div>

Cart summary

If you go to your site preview, you will now have a cart summary. It will also be displayed on your homepage!

Summary in action

If you click on View cart, the Snipcart popup will show up!

You now have a complete online store, running on Edicy powered by Snipcart! And it took less than 15 minutes to setup!

Suggested posts: