merged

README.md

@@ -13,6 +13,7 @@ This is a production ready Headless Shopify storefront using Next.js, Shopify St
 
 ## Topics Covered
 
+* NEW 2022 Updated! Using SWR for automatically updating content on SSG (Static Site Generation) websites.
 * Blazing fast storefronts using Next.js for eCommerce.
 * Managing Cart data with React Context and localStorage.
 * Rapid component development with Tailwind CSS.
@@ -42,7 +43,6 @@ This is a production ready Headless Shopify storefront using Next.js, Shopify St
 
 ## Future Updates:
 This is an ongoing project that is currently released in beta. Future updates will include:
-* Using SWR for automatically updating content on SSG (Static Site Generation) websites.
 * Webhooks triggering for product updates, etc. 
 * Additional ecommerce ready sections for Next.js using Tailwind CSS (currently 5 are included with the course assets)
 * Addition of lectures covering Shopify’s Hydrogen (when released)

components/ProductForm.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import { useState, useContext, useEffect } from "react"
 import { formatter } from '../utils/helpers'
 import ProductOptions from "./ProductOptions"
@@ -12,17 +13,43 @@ const fetcher = (url, id) => (
  }
  }).then((res) => res.data)
 )
+=======
+import { useState, useEffect, useContext } from "react"
+import { formatter } from '../utils/helpers'
+import ProductOptions from "./ProductOptions"
+import { CartContext } from "../context/shopContext"
+import axios from "axios"
+import useSWR from 'swr'
+
+// setup inventory fetcher
+const fetchInventory = (url, id) =>
+ axios
+ .get(url, {
+ params: {
+ id: id,
+ },
+ })
+ .then((res) => res.data)
+>>>>>>> 6f27da660ef7b33f21fa153535ea64a2d5fa3c34
 
 export default function ProductForm({ product }) {
 
  const { data: productInventory } = useSWR(
  ['/api/available', product.handle],
+<<<<<<< HEAD
  (url, id) => fetcher(url, id),
+=======
+ (url, id) => fetchInventory(url, id),
+>>>>>>> 6f27da660ef7b33f21fa153535ea64a2d5fa3c34
  { errorRetryCount: 3 }
  )
 
  const [available, setAvailable] = useState(true)
 
+<<<<<<< HEAD
+=======
+
+>>>>>>> 6f27da660ef7b33f21fa153535ea64a2d5fa3c34
  const { addToCart } = useContext(CartContext)
 
  const allVariantOptions = product.variants.edges?.map(variant => {
@@ -82,6 +109,19 @@ export default function ProductForm({ product }) {
  }, [productInventory, selectedVariant])
 
 
+ useEffect(() => {
+ if (productInventory) {
+ const checkAvailable = productInventory?.variants.edges.filter(item => item.node.id === selectedVariant.id)
+
+ if (checkAvailable[0].node.availableForSale) {
+ setAvailable(true)
+ } else {
+ setAvailable(false)
+ }
+ }
+ }, [productInventory, selectedVariant])
+
+
  return (
  <div className="rounded-2xl p-4 shadow-lg flex flex-col w-full md:w-1/3">
  <h2 className="text-2xl font-bold">{product.title}</h2>
@@ -94,6 +134,9 @@ export default function ProductForm({ product }) {
  values={values}
  selectedOptions={selectedOptions}
  setOptions={setOptions}
+ selectedVariant={selectedVariant}
+ productInventory={productInventory}
+ available={available}
  />
  ))
  }
@@ -103,6 +146,7 @@ export default function ProductForm({ product }) {
  onClick={() => {
  addToCart(selectedVariant)
  }}
+<<<<<<< HEAD
  className="bg-black rounded-lg text-white px-2 py-3 mt-3 hover:bg-gray-800">
  Add To Card
  </button>
@@ -112,6 +156,16 @@ export default function ProductForm({ product }) {
  Sold out!
  </button>
  }
+=======
+ className="bg-black rounded-lg text-white px-2 py-3 mt-3 hover:bg-gray-800">Add To Card
+ </button> :
+ <button
+ className="rounded-lg text-white px-2 py-3 mt-3 bg-gray-800 cursor-not-allowed">
+ Sold out!
+ </button>
+ }
+
+>>>>>>> 6f27da660ef7b33f21fa153535ea64a2d5fa3c34
  </div>
  )
 }

components/ProductOptions.js

@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
-export default function ProductOptions({ name, values, selectedOptions, setOptions }) {
+export default function ProductOptions({ name, values, selectedOptions, setOptions, productInventory, selectedVariant }) {
+
  return (
  <fieldset className="mt-3">
  <legend className="text-xl font-semibold">{name}</legend>
@@ -12,7 +13,7 @@ export default function ProductOptions({ name, values, selectedOptions, setOptio
 
  return (
  <label key={id} htmlFor={id}>
- <input 
+ <input
  className="sr-only"
  type="radio"
  id={id}

components/ProductPageContent.js

@@ -4,9 +4,8 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import SwiperCore, { Navigation, Pagination } from 'swiper'
 import RecommendedList from './RecommendedList'
 
-
 export default function ProductPageContent({ product }) {
-
+ 
  const images = []
 
  product.images.edges.map((image, i) => {

context/shopContext.js

@@ -54,7 +54,6 @@ export default function ShopProvider({ children }) {
  newCart = [...cart, newItem]
  }
 
-
  setCart(newCart)
  const newCheckout = await updateCheckout(checkoutId, newCart)
  localStorage.setItem("checkout_id", JSON.stringify([newCart, newCheckout]))

lib/shopify.js

@@ -101,6 +101,7 @@ export async function getProduct(handle) {
  handle
  title
  id
+ totalInventory
  images(first: 5) {
  edges {
  node {
@@ -145,6 +146,7 @@ export async function getProduct(handle) {
  }
  title
  id
+ availableForSale
  priceV2 {
  amount
  }

package.json

@@ -14,7 +14,7 @@
  "react-dom": "^17.0.2",
  "sass": "^1.38.2",
  "swiper": "^6.7.5",
- "swr": "^1.2.1"
+ "swr": "^1.2.0"
  },
  "devDependencies": {
  "autoprefixer": "^10.2.6",

pages/api/available.js

@@ -1,5 +1,7 @@
-export default async function available(req, res) {
- const { query: { id } } = req
+export default async function send(req, res) {
+ const {
+ query: { id },
+ } = req
 
  const domain = process.env.SHOPIFY_STORE_DOMAIN
  const storefrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESSTOKEN
@@ -31,19 +33,19 @@ export default async function available(req, res) {
 
  async function getProduct(handle) {
  const query = `
- {
- productByHandle(handle: "${handle}") {
- id
- variants(first: 25) {
- edges {
- node {
- id
- availableForSale
+ {
+ productByHandle(handle: "${handle}") {
+ id
+ variants(first: 25) {
+ edges {
+ node {
+ id
+ availableForSale
+ }
  }
  }
  }
- }
- }`
+ }`
 
  const response = await ShopifyData(query)
 
@@ -52,8 +54,7 @@ export default async function available(req, res) {
  return product
  }
 
- const products = await getProduct(id)
+ const product = await getProduct(id)
 
- res.status(200)
- res.json(products)
+ res.json(product)
 }

pages/products/[product].js

@@ -1,7 +1,13 @@
 import ProductPageContent from "../../components/ProductPageContent"
 import { getAllProducts, getProduct, recursiveCatalog } from "../../lib/shopify"
 
-export default function ProductPage ({ product }) {
+export default function ProductPage({ product }) {
+
+ // const realId = Buffer.from(product.id, 'base64').toString('utf8').split("/").pop()
+ // console.log(realId)
+
+
+
  return (
  <div className="min-h-screen py-12 sm:pt-20">
  <ProductPageContent product={product} />

yarn.lock

@@ -2373,10 +2373,17 @@
  "dom7" "^3.0.0"
  "ssr-window" "^3.0.0"
 
+<<<<<<< HEAD
 "swr@^1.2.1":
  "integrity" "sha512-1cuWXqJqXcFwbgONGCY4PHZ8v05009JdHsC3CIC6u7d00kgbMswNr1sHnnhseOBxtzVqcCNpOHEgVDciRer45w=="
  "resolved" "https://registry.npmjs.org/swr/-/swr-1.2.1.tgz"
  "version" "1.2.1"
+=======
+"swr@^1.2.0":
+ "integrity" "sha512-C3IXeKOREn0jQ1ewXRENE7ED7jjGbFTakwB64eLACkCqkF/A0N2ckvpCTftcaSYi5yV36PzoehgVCOVRmtECcA=="
+ "resolved" "https://registry.npmjs.org/swr/-/swr-1.2.0.tgz"
+ "version" "1.2.0"
+>>>>>>> 6f27da660ef7b33f21fa153535ea64a2d5fa3c34
 
 "tailwindcss@^2.2.4":
  "integrity" "sha512-jv35rugP5j8PpzbXnsria7ZAry7Evh0KtQ4MZqNd+PhF+oIKPwJTVwe/rmfRx9cZw3W7iPZyzBmeoAoNwfJ1yg=="