GraphQL powered eCommerce with Snipcart

eCommerce is one of the fastest growing use cases for headless content management over the last few years, as are the APIs powering checkout and payment. Hygraph was built with scalability in mind, and has all of the tools you need to power a fully bespoke eCommerce experience that your customers expect.

Depending on your scale, and how much you need to integrate with other services, there are dozens of commerce service providers to pick from.

Snipcart does things differently when it comes to enabling eCommerce. Snipcart is a drop-in cart and checkout that you can add with a few lines of code to any website. It works with digital and physical products, as well as subscriptions and has an events API that you can hook into to develop custom pre/post checkout integrations.

As a developer, Snipcart is completely agnostic to the what you build, and what you use for the frontend. Snipcart works well with your current inventory — which is great if you're looking to sell your Hygraph backed inventory.

Let's take a look at a few ways you can use Hygraph with Snipcart. I'll assume you're familiar with Hygraph, so I will leave you to setup, configure and integrate Snipcart by following their documentation, and instantiate a GraphQL client for Hygraph.

#Hygraph for Products

I'll be using a simple content model and relationships between categories, products, prices, and the enumeration for currencies.

• A Category has many Products
• A Product belongs to one Category
• A Product has many Prices
• A Price belongs to one Product

Category | Product | Price | Currency --- | --- | --- | --- Name (String) | Name (String) | Amount (Int) | EUR Slug (String) | Slug (String) | Currency (Enum) | GBP Products (Relation) | Description | | USD

| | Image (Asset) | |

| | Prices (Relation) | |

| | Category (Relation) | |

Hygraph also gives you a "Commerce Shop" starter you can use to quickly bootstrap a project with some example data for products.

#Fetching Products

You've probably seen a collection of all products before, to do this we can fetch all products, their fields, and relations with a single GraphQL query.

A query for this would look something like:

{
  products {
    id
    name
    slug
    description {
      html
    }
    image {
      url
      width
         height 
    }
    prices {
      amount
      currency
    }
  }
}

#Fetching Products by Category

Similar to fetching all products, it's also common to show pages of products per category. We can use the Hygraph GraphQL API to fetch a single Category by slug, and all of the products that belong to that category.

{
  category(where: {slug: "tshirts"}) {
    name
    products {
      id
      name
      slug
      description {
        html
      }
      image {
        url
        width
        height
      }
      prices {
        amount
        currency
      }
    }
  }
}

#Product Display Pages

As with any eCommerce store you'll most likely want to show a page for your product, including any additional images, prices, description, related products, and that important "Add to Bag" button.

Snipcart makes this all too easy with adding attributes to a div with the options you want for your "Add to Bag" button.

<button
  className="snipcart-add-item"
  data-item-id="your-product-id"
  data-item-price="your-product-price"
  data-item-url="a-link-to-this-page"
  data-item-image="your-product-image-asset-url"
  data-item-name="your-product-name"
>
  Add to Bag
</button>

Let's imagine we have the following query to fetch products by the slug:

query ProductPageQuery($slug: String!) {
  product(slug: { eq: $slug }) {
      id
      name
      prices {
        amount
        currency
      }
      description {
        html
      }
      image {
        url
      }
    }
  }
}

You'll remember with the content model we had above that a Product has many Prices. Snipcart supports currencies, so we can specify the current for our product when adding to cart. You'll need to configure currencies within your Snipcart project for them to work properly though!

Hopefully this post has given you an idea of how you can use Hygraph as your PIM. Using Hygraph as a PIM can be done at scale in a similar way..