5 | 6 | Live Demo Store | Course 7 |
8 |
5 | 6 | Live Demo Store | Course 7 |
8 || Overview | 33 |Performance Breakdown | 34 |
 |
39 |  |
40 |
Shopify + Next.js + Tailwind:
8 |Modern eCommerce
9 | 10 |{formatter.format(price)}
29 | 30 | 31 | ) 32 | } 33 | 34 | export default ProductCard -------------------------------------------------------------------------------- /components/ProductForm.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useContext } from "react" 2 | import { formatter } from '../utils/helpers' 3 | import ProductOptions from "./ProductOptions" 4 | import { CartContext } from "../context/shopContext" 5 | import axios from "axios" 6 | import useSWR from 'swr' 7 | 8 | // setup inventory fetcher 9 | const fetchInventory = (url, id) => 10 | axios 11 | .get(url, { 12 | params: { 13 | id: id, 14 | }, 15 | }) 16 | .then((res) => res.data) 17 | 18 | export default function ProductForm({ product }) { 19 | 20 | const { data: productInventory } = useSWR( 21 | ['/api/available', product.handle], 22 | (url, id) => fetchInventory(url, id), 23 | { errorRetryCount: 3 } 24 | ) 25 | 26 | const [available, setAvailable] = useState(true) 27 | 28 | const { addToCart } = useContext(CartContext) 29 | 30 | const allVariantOptions = product.variants.edges?.map(variant => { 31 | const allOptions = {} 32 | 33 | variant.node.selectedOptions.map(item => { 34 | allOptions[item.name] = item.value 35 | }) 36 | 37 | return { 38 | id: variant.node.id, 39 | title: product.title, 40 | handle: product.handle, 41 | image: variant.node.image?.url, 42 | options: allOptions, 43 | variantTitle: variant.node.title, 44 | variantPrice: variant.node.priceV2.amount, 45 | variantQuantity: 1 46 | } 47 | }) 48 | 49 | const defaultValues = {} 50 | product.options.map(item => { 51 | defaultValues[item.name] = item.values[0] 52 | }) 53 | 54 | const [selectedVariant, setSelectedVariant] = useState(allVariantOptions[0]) 55 | const [selectedOptions, setSelectedOptions] = useState(defaultValues) 56 | 57 | function setOptions(name, value) { 58 | setSelectedOptions(prevState => { 59 | return { ...prevState, [name]: value } 60 | }) 61 | 62 | const selection = { 63 | ...selectedOptions, 64 | [name]: value 65 | } 66 | 67 | allVariantOptions.map(item => { 68 | if (JSON.stringify(item.options) === JSON.stringify(selection)) { 69 | setSelectedVariant(item) 70 | } 71 | }) 72 | } 73 | 74 | useEffect(() => { 75 | if (productInventory) { 76 | const checkAvailable = productInventory?.variants.edges.filter(item => item.node.id === selectedVariant.id) 77 | 78 | if (checkAvailable[0]?.node.availableForSale) { 79 | setAvailable(true) 80 | } else { 81 | setAvailable(false) 82 | } 83 | } 84 | }, [productInventory, selectedVariant]) 85 | 86 | return ( 87 |{product.description}
40 |