thefln

- name: Chocolate Chip Cookies
  id: 101
  price: 10.99
  max_quantity: 10
  path: products/chocolate-chip-cookies
  image: https://snipcart.com/media/10107/chocolate-chips-cookies.png
  description: Uncontested, delightful classic.

- name: Oatmeal Raisin Cookies
  id: 102

thefln

Hugo

• Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site

• Static E-Commerce on Hugo with Product Management in Forestry.io

Netlify CMS

• Exploring Netlify CMS, a React & Git-Based Content Management System

thefln

var request = require('request');

exports.handler = function(event, context, callback) {
  // buttercms send webhook data as POST request
  if(event.httpMethod !== 'POST' || !event.body) {
    return callback(null, {
      statusCode: 200,
      body: ''
    });
  }

thefln

var butter = require('buttercms')("{buttercms public API key}");

exports.handler = function(event, context, callback) {

  // snipcart send a GET request when crawling products
  if(event.httpMethod !== 'GET') {
    return callback(null, {
      statusCode: 200,
      body: ''
    });

thefln

<template>
  <a href="#" class="snipcart-add-item"
    :data-item-id="product.product_id"
    :data-item-name="product.name"
    :data-item-price="product.price"
    data-item-url="https://snipcart-buttercms-demo.netlify.com/.netlify/functions/snipcart_json_crawler"
    :data-item-image="product.image">Buy for {{ product.price | price }}&nbsp;$</a>
</template>

<script>

thefln

<template>
  <not-found v-if="notFound" />
  <div class="product-details" v-else>
    <figure>
      <img :src="product.fields.image" :alt="product.fields.name" />
    </figure>
    <section>
      <h2>{{product.fields.name}}</h2>
      <p>{{product.fields.description}}</p>
      <p><buy-button :product="product.fields" /></p>

thefln

import butter from '@/buttercms';
import NotFound from './NotFound';

export default {
  name: 'ProductPage',
  components: {
    NotFound,
  },
  data() {
    return {

thefln

import butter from '@/buttercms';
import BuyButton from './BuyButton';

export default {
  name: 'ProductList',
  components: {
    BuyButton,
  },
  data() {
    return {

thefln

import Vue from 'vue';
import Router from 'vue-router';
import ProductList from '@/components/ProductList';
import ProductPage from '@/components/ProductPage';
import NotFound from '@/components/NotFound';

Vue.use(Router);

export default new Router({
  mode: 'history',

thefln

import Butter from 'buttercms';

export default Butter('{your buttercms public key here}');