• Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site
• Static E-Commerce on Hugo with Product Management in Forestry.io
• Exploring Netlify CMS, a React & Git-Based Content Management System
- 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 |
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: '' | |
}); | |
} |
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: '' | |
}); |
<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 }} $</a> | |
</template> | |
<script> |
<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> |
import butter from '@/buttercms'; | |
import NotFound from './NotFound'; | |
export default { | |
name: 'ProductPage', | |
components: { | |
NotFound, | |
}, | |
data() { | |
return { |
import butter from '@/buttercms'; | |
import BuyButton from './BuyButton'; | |
export default { | |
name: 'ProductList', | |
components: { | |
BuyButton, | |
}, | |
data() { | |
return { |
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', |
import Butter from 'buttercms'; | |
export default Butter('{your buttercms public key here}'); |