Update ecommerce search scaffold

.gitignore

@@ -85,4 +85,7 @@ dist
 sw.*
 
 # Mac OSX
-.DS_Store
+.DS_Store
+# Local Netlify folder
+.netlify
+.history

README.md

@@ -1,30 +1,59 @@
-# 🛍 Ecommerce Store with Netlify Functions and Stripe
+# 🛍 E-Commerce Store with Nuxt, Netlify Functions, Tigris Cloud and Stripe
 
-> A serverless function to process stripe payments with Nuxt, Netlify, and Lambda
+> This is forked from [sdras/ecommerce-netlify](https://github.com/sdras/ecommerce-netlify).
+> 
+> We have made the e-commerce site dynamic by using 
+> [Tigris](https://www.tigrisdata.com/jamstack) as the backend and also 
+> added search capability. Tigris is responsible for storing the product 
+> catalog and providing querying and search capabilities. It is integrated 
+> with Netlify Functions.
 
-Demo site is here: [E-Commerce Store](https://ecommerce-netlify.netlify.com/)
+Demo site is here: [E-Commerce Store](https://nuxt-ecommerce-netlify.netlify.app/)
 
 ![screenshot of site](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/ecommerce-screenshot.jpg "E-Commerce Netlify Site")
 
-There are two articles explaining how this site is set up:
-* Explanation of Netlify Functions and Stripe: [Let's Build a JAMstack E-Commerce Store with Netlify Functions](https://css-tricks.com/lets-build-a-jamstack-e-commerce-store-with-netlify-functions/)
-* Explanation of dynamic routing in Nuxt for the individual product pages: [Creating Dynamic Routes in Nuxt Application](https://css-tricks.com/creating-dynamic-routes-in-a-nuxt-application/)
+# ⚙️ Deploying the site
 
-## Build Setup
+All you need is a [Github](https://github.com), 
+[Netlify](https://www.netlify.com/) and Tigris account
+([sign up for a free account](https://www.tigrisdata.com/jamstack#signup-form)). 
+Now, Hit "Deploy" and follow instructions to deploy app to your Netlify account.
 
-``` bash
-# install dependencies
-$ yarn install or npm run install
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/tigrisdata/tigris-netlify-ecommerce&utm_source=github)
 
-# serve with hot reload at localhost:3000
-$ yarn dev or npm run dev
+## 📖 Building & Running locally
 
-# build for production and launch server
-$ yarn build or npm run build
-$ yarn start or npm run start
+### Prerequisites
 
-# generate static project
-$ yarn generate or npm run generate
-```
+1. Tigris installed on your dev computer
+ - For **macOS**: `brew install tigrisdata/tigris/tigris-cli`
+ - Other operating systems: [See installation instructions here](https://docs.tigrisdata.com/cli/installation)
+2. Netlify CLI installed on your dev computer
+ ```shell
+ npm install netlify-cli -g
+ ```
+3. Node.js version 16+
 
-For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
+### Instructions
+
+1. Install dependencies
+ ```shell
+ npm install
+ ```
+2. Start Tigris local development environment
+ ```shell
+ tigris dev start
+ ```
+3. Run the app server locally with hot reload to preview your site
+ ```shell
+ netlify dev
+ ```
+
+:tada: All done. Feel free to play around. :tada:
+
+## Helpful links
+
+- Getting started with Tigris: [Quickstart](https://docs.tigrisdata.com/quickstart)
+- Explanation of Netlify Functions and Stripe: [Let's Build a Jamstack E-Commerce Store with Netlify Functions](https://css-tricks.com/lets-build-a-jamstack-e-commerce-store-with-netlify-functions/)
+- Explanation of dynamic routing in Nuxt for the individual product pages: 
+ [Creating Dynamic Routes in Nuxt Application](https://css-tricks.com/creating-dynamic-routes-in-a-nuxt-application/)

components/AppFeaturedProducts.vue

@@ -20,6 +20,7 @@
 export default {
  computed: {
  featuredProducts() {
+ console.log(this.$store.getters.featuredProducts)
  return this.$store.getters.featuredProducts;
  }
  }

db/models/products.ts

@@ -0,0 +1,39 @@
+import {
+ Field,
+ PrimaryKey,
+ TigrisCollection,
+ TigrisDataTypes,
+ } from "@tigrisdata/core";
+
+ @TigrisCollection("products")
+export class Product {
+ @PrimaryKey(TigrisDataTypes.INT32, { order: 1, autoGenerate: true })
+ id!: number;
+
+ @Field(TigrisDataTypes.STRING)
+ color: string;
+
+ @Field(TigrisDataTypes.STRING)
+ description: string;
+
+ @Field(TigrisDataTypes.STRING)
+ gender: string;
+
+ @Field(TigrisDataTypes.STRING)
+ name: string;
+
+ @Field(TigrisDataTypes.STRING)
+ reviews: string;
+
+ @Field(TigrisDataTypes.NUMBER)
+ startrating: number;
+
+ @Field(TigrisDataTypes.NUMBER)
+ price: number;
+
+ @Field(TigrisDataTypes.ARRAY, { elements: TigrisDataTypes.STRING })
+ sizes: Array<string>
+
+ @Field(TigrisDataTypes.STRING)
+ img: string;
+}

functions/create-payment-intent.js → functions/create-payment-intent.ts

@@ -1,20 +1,23 @@
-// An endpoint that calculates the order total and creates a 
-// PaymentIntent on Stripe 
+// An endpoint that calculates the order total and creates a
+// PaymentIntent on Stripe
+
+import tigrisDB from "~/lib/tigris";
+import { Product } from "../db/models/products";
 
 require("dotenv").config();
 const axios = require("axios");
-const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY),
+const stripeCreatePayment = require("stripe")(process.env.STRIPE_SECRET_KEY),
  headers = {
  "Access-Control-Allow-Origin": "*",
- "Access-Control-Allow-Headers": "Content-Type"
+ "Access-Control-Allow-Headers": "Content-Type",
  };
 
 exports.handler = async (event, context) => {
  // CORS
  if (event.httpMethod === "OPTIONS") {
  return {
  statusCode: 200,
- headers
+ headers,
  };
  }
 
@@ -28,36 +31,41 @@ exports.handler = async (event, context) => {
  statusCode: 400,
  headers,
  body: JSON.stringify({
- status: "missing information"
- })
+ status: "missing information",
+ }),
  };
  }
 
+ const productCollection = tigrisDB.getCollection<Product>(Product);
+
  // Stripe payment processing begins here
  try {
  // Always calculate the order amount on your server to prevent customers
  // from manipulating the order amount from the client
  // Here we will use a simple json file to represent inventory
  // but you could replace this with a DB lookup
- const storeDatabase = await axios.get(
- "https://ecommerce-netlify.netlify.app/storedata.json"
- );
+ let amount = 0;
+ for (let item of data.items) {
+ const product = await productCollection.findOne({
+ filter: { id: item.id },
+ });
+
+ if (product == undefined) {
+ continue;
+ }
+
+ amount = amount + product.price * item.quantity;
+ }
 
- const amount = data.items.reduce((prev, item) => {
- // lookup item information from "database" and calculate total amount
- const itemData = storeDatabase.data.find(
- storeItem => storeItem.id === item.id
- );
- return prev + itemData.price * 100 * item.quantity;
- }, 0);
+ console.log("amount charging ", amount);
 
  // Create a PaymentIntent on Stripe
  // A PaymentIntent represents your customer's intent to pay
  // and needs to be confirmed on the client to finalize the payment
- const paymentIntent = await stripe.paymentIntents.create({
+ const paymentIntent = await stripeCreatePayment.paymentIntents.create({
  currency: "usd",
  amount: amount,
- description: "Order from store"
+ description: "Order from store",
  });
 
  // Send the client_secret to the client
@@ -67,8 +75,8 @@ exports.handler = async (event, context) => {
  statusCode: 200,
  headers,
  body: JSON.stringify({
- clientSecret: paymentIntent.client_secret
- })
+ clientSecret: paymentIntent.client_secret,
+ }),
  };
  } catch (err) {
  console.log(err);
@@ -77,8 +85,8 @@ exports.handler = async (event, context) => {
  statusCode: 400,
  headers,
  body: JSON.stringify({
- status: err
- })
+ status: err,
+ }),
  };
  }
 };

functions/handle-payment-succeeded.js → functions/handle-payment-succeeded.ts

@@ -3,7 +3,7 @@
 // For more information read https://stripe.com/docs/webhooks
 require("dotenv").config();
 
-const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+const stripeHandlePayment = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
 // Create your webhook in the Stripe dashboard at https://dashboard.stripe.com/webhooks
 // Use the secret listed in the "Signing secret" section
@@ -15,7 +15,7 @@ exports.handler = async (event, context) => {
 
  try {
  // Verifies that the event was sent by Stripe and deserializes the event
- stripeEvent = stripe.webhooks.constructEvent(
+ stripeEvent = stripeHandlePayment.webhooks.constructEvent(
  event.body,
  sig,
  endpointSecret

functions/read-all-products.ts

@@ -0,0 +1,26 @@
+import { Handler } from "@netlify/functions";
+import tigrisDB from "~/lib/tigris";
+import { Product } from "~/db/models/products";
+
+const handler: Handler = async (event, context) => {
+ const productCollection = tigrisDB.getCollection<Product>(Product);
+
+ try {
+ const productCursor = productCollection.findMany();
+ const products = await productCursor.toArray();
+ return {
+ statusCode: 200,
+ body: JSON.stringify(products)
+ };
+ } catch (err) {
+ console.log(err);
+ return {
+ statusCode: 500,
+ body: JSON.stringify({
+ status: err
+ })
+ }
+ }
+};
+
+export {handler};

layouts/default.vue

@@ -16,6 +16,9 @@ export default {
  components: {
  AppFooter,
  AppNav
+ },
+ created() {
+ this.$store.dispatch("getAllProducts");
  }
 };
 </script>

lib/tigris.ts

@@ -0,0 +1,7 @@
+import { Tigris } from "@tigrisdata/core";
+
+const tigrisClient = new Tigris();
+const tigrisDb = tigrisClient.getDatabase();
+
+// export to share DB across modules
+export default tigrisDb;

netlify.toml

@@ -1,2 +1,11 @@
 [build]
- functions = "functions"
+ functions = "functions"
+[context.dev]
+ NODE_ENV = "development"
+ environment = {TIGRIS_URI = "localhost:8081"}
+[template.environment]
+ TIGRIS_URI = "api.preview.tigrisdata.cloud"
+ TIGRIS_CLIENT_ID = "change me for your tigris client id"
+ TIGRIS_CLIENT_SECRET = "change me for your tigris client secret"
+[functions]
+ external_node_modules = ["app-root-path", "@tigrisdata/core"]

nuxt.config.js

@@ -1,12 +1,9 @@
-import data from './static/storedata.json'
-let dynamicRoutes = () => {
- return new Promise(resolve => {
- resolve(data.map(el => `product/${el.id}`))
- })
-}
-
 export default {
- mode: 'universal',
+ /*
+ ** Nuxt target
+ ** See https://nuxtjs.org/api/configuration-target
+ */
+ target: 'static',
  /*
  ** Headers of the page
  */
@@ -23,18 +20,15 @@ export default {
  content: process.env.npm_package_description || ''
  }
  ],
- link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  link: [
+ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  {
  rel: 'stylesheet',
  href:
  'https://fonts.googleapis.com/css?family=Montserrat:300,600|PT+Serif&display=swap'
  }
  ]
  },
- generate: {
- routes: dynamicRoutes
- },
  /*
  ** Customize the progress-bar color
  */
@@ -55,9 +49,6 @@ export default {
  ** Build configuration
  */
  build: {
- /*
- ** You can extend webpack config here
- */
- extend(config, ctx) {}
- }
+ },
+ buildModules: ['@nuxt/typescript-build']
 }