Once you have signed up for an account at Snipcart, you can add the code below to start using the service. Snipcart includes many options and robust features including recurring payments and subscriptions, inventory management, discounts, shipping, invoicing, and customer dashboards to name a few. We are going to implement just the basic features to get you started and to keep the tutorial shorter. Be sure to check out Snipcart’s documentation to discover all they can provide.

Snipcart’s use of JavaScript and jQuery recognizes the button we will provide within a widget, and opens a shopping cart when the button is clicked. When checking out, Snipcart verifies that the products and prices match the data on your website to prevent any shenanigans via the browser console. What makes Snipcart such a time saver to integrate is that the shopping cart and admin interface are already built for you and that the add-on is presented as an overlay to your existing website.

We are going to show you how to add a Snipcart widget to your Scrivito website using the Example App as a reference. You should have a running Scrivito website and an account with Snipcart to get started. Once we have integrated the basic setup for Snipcart, we will create a SnipcartWidget to add products anywhere we want on our Scrivito-powered website.

First we need to add a Snipcart React component to the Scrivito Example App. This will be called in the application JS code so that it is rendered for every page. The Snipcart component will be added in the “src/Components” directory of the Example App. Here we set up the app to get the Snipcart API key from the homepage variables. While optional, it makes the code more universal without the need to have a developer change the keys from development/testing key to the production key.

With a single-page application, we need to ensure that the Snipcart code remains active after navigating to a different page. The add-on is loaded at rendering time (via “/snipcart.js”), along with jQuery and the standard Snipcart theme.

To have Snipcart’s required scripts to be requested and executed as well as jQuery’s, “https://cdn.snipcart.com”, “https://ajax.googleapis.com/”, and 'unsafe-eval' need to be specified as permitted script sources in the CSP header included in the Example App.

Here, we will extend the Homepage object to include an input and attribute for the Snipcart API key. If you decided to make the Snipcart API key an environment variable and omitted the getSnipcartKey() function above, you can skip this step.

Creating a Snipcart widget will allow you and your editors to add products to any page. The following code is a recommendation for a nice-looking product widget. The only part of the component that is required for Snipcart to work is the <button> element, the rest is just eye candy. First, we will create the widget class to define the attributes of the widget instances:

Then we create the component for displaying the content:

Finally, we add the editing configuration the editors will need to define a product:

Snipcart requires the data-item-id, data-item-name, data-item-price and data-item-url product attributes at a minimum.

There are some important things to keep in mind when providing product details. The data-item-url needs to be in the format of “/” followed by either the path, permalink or page object ID to work with Snipcarts security features. For example, the path of this page is “/adding-ecommerce-with-snipcart-32d3d504a64350c7”. The object ID of the page (which can also be found in the page properties on the “System” tab) is unique and thus the safest and recommended option; for this page, one would use “/32d3d504a64350c7”. Note that if you place a product widget on your homepage, you will need to copy the object ID of the Homepage from its page properties because the ID doesn’t show up in the URL path (“/”).

Also, the price should be in the format of 1.00 or 1, without the currency symbol. If you wish to use different currencies, please see Snipcart’s multi-currency guide and update the data-item-price attribute as needed.

Added products can take a while to pre-render, causing an “item not found” error from Snipcart at checkout until pre-rendering has been completed.

After adding the Snipcart API key to the properties of your homepage and fetching it using the above code you will be able to add products wherever you want, and they will be added to your “inventory” at Snipcart. Clicking the “Add to cart” button will launch the Snipcart UI and initiate the checkout process as needed. You can customize the above as much as you like and make it work for your particular store, company or products. Be sure to check out Snipcart’s documentation for additional options and settings.