4 | 5 | Gatsby Shopify starter 6 |
4 | 
20 | ) : null
21 |
22 | const selectedOptions = item.variant.selectedOptions
23 | ? item.variant.selectedOptions.map(
24 | option => `${option.name}: ${option.value} `
25 | )
26 | : null
27 |
28 | const handleRemove = () => {
29 | removeLineItem(client, checkout.id, item.id)
30 | }
31 |
32 | return (
33 | 38 | {item.title} 39 | {` `} 40 | {item.variant.title === !'Default Title' ? item.variant.title : ''} 41 |
42 | {selectedOptions} 43 | {item.quantity} 44 | 45 |$ {checkout.subtotalPrice}
24 |$ {checkout.totalTax}
27 |$ {checkout.totalPrice}
30 |This Product is out of Stock!
} 140 | 141 | ) 142 | } 143 | 144 | ProductForm.propTypes = { 145 | product: PropTypes.shape({ 146 | descriptionHtml: PropTypes.string, 147 | handle: PropTypes.string, 148 | id: PropTypes.string, 149 | shopifyId: PropTypes.string, 150 | images: PropTypes.arrayOf( 151 | PropTypes.shape({ 152 | id: PropTypes.string, 153 | originalSrc: PropTypes.string, 154 | }) 155 | ), 156 | options: PropTypes.arrayOf( 157 | PropTypes.shape({ 158 | id: PropTypes.string, 159 | name: PropTypes.string, 160 | values: PropTypes.arrayOf(PropTypes.string), 161 | }) 162 | ), 163 | productType: PropTypes.string, 164 | title: PropTypes.string, 165 | variants: PropTypes.arrayOf( 166 | PropTypes.shape({ 167 | availableForSale: PropTypes.bool, 168 | id: PropTypes.string, 169 | price: PropTypes.string, 170 | title: PropTypes.string, 171 | shopifyId: PropTypes.string, 172 | selectedOptions: PropTypes.arrayOf( 173 | PropTypes.shape({ 174 | name: PropTypes.string, 175 | value: PropTypes.string, 176 | }) 177 | ), 178 | }) 179 | ), 180 | }), 181 | addVariantToCart: PropTypes.func, 182 | } 183 | 184 | export default ProductForm 185 | -------------------------------------------------------------------------------- /src/components/ProductGrid/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import { GatsbyImage } from 'gatsby-plugin-image' 3 | import { useStaticQuery, graphql, Link } from 'gatsby' 4 | 5 | import StoreContext from '~/context/StoreContext' 6 | import { Grid, Product, Title, PriceTag } from './styles' 7 | 8 | const ProductGrid = () => { 9 | const { 10 | store: { checkout }, 11 | } = useContext(StoreContext) 12 | const { allShopifyProduct } = useStaticQuery( 13 | graphql` 14 | query { 15 | allShopifyProduct(sort: { fields: [createdAt], order: DESC }) { 16 | edges { 17 | node { 18 | id 19 | title 20 | handle 21 | createdAt 22 | images { 23 | id 24 | originalSrc 25 | altText 26 | localFile { 27 | childImageSharp { 28 | gatsbyImageData(layout: FULL_WIDTH) 29 | } 30 | } 31 | } 32 | featuredImage { 33 | altText 34 | id 35 | localFile { 36 | childImageSharp { 37 | gatsbyImageData(layout: FULL_WIDTH) 38 | } 39 | } 40 | } 41 | variants { 42 | price 43 | } 44 | } 45 | } 46 | } 47 | } 48 | ` 49 | ) 50 | 51 | const getPrice = price => 52 | Intl.NumberFormat(undefined, { 53 | currency: checkout.currencyCode ? checkout.currencyCode : 'EUR', 54 | minimumFractionDigits: 2, 55 | style: 'currency', 56 | }).format(parseFloat(price ? price : 0)) 57 | 58 | return ( 59 |No Products found!
91 | )} 92 |You just hit a route that doesn't exist... the sadness.
10 | 11 | ) 12 | 13 | export default NotFoundPage 14 | -------------------------------------------------------------------------------- /src/pages/cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Cart from '~/components/Cart' 4 | import { Container } from '~/utils/styles' 5 | 6 | const CartPage = () => ( 7 |Welcome to your new Shop powered by Gatsby and Shopify.
12 |Welcome to page 2
11 | Go back to the homepage 12 | 13 | ) 14 | 15 | export default SecondPage 16 | -------------------------------------------------------------------------------- /src/provider/ContextProvider.js: -------------------------------------------------------------------------------- 1 | import fetch from 'isomorphic-fetch' 2 | import React, { useState, useEffect, useRef } from 'react' 3 | import Client from 'shopify-buy' 4 | 5 | import Context from '~/context/StoreContext' 6 | 7 | const client = Client.buildClient( 8 | { 9 | storefrontAccessToken: process.env.SHOPIFY_ACCESS_TOKEN, 10 | domain: `${process.env.SHOP_NAME}.myshopify.com`, 11 | }, 12 | fetch 13 | ) 14 | 15 | const ContextProvider = ({ children }) => { 16 | let initialStoreState = { 17 | client, 18 | adding: false, 19 | checkout: { lineItems: [] }, 20 | products: [], 21 | shop: {}, 22 | } 23 | 24 | const [store, updateStore] = useState(initialStoreState) 25 | const isRemoved = useRef(false) 26 | 27 | useEffect(() => { 28 | const initializeCheckout = async () => { 29 | // Check for an existing cart. 30 | const isBrowser = typeof window !== 'undefined' 31 | const existingCheckoutID = isBrowser 32 | ? localStorage.getItem('shopify_checkout_id') 33 | : null 34 | 35 | const setCheckoutInState = checkout => { 36 | if (isBrowser) { 37 | localStorage.setItem('shopify_checkout_id', checkout.id) 38 | } 39 | 40 | updateStore(prevState => { 41 | return { ...prevState, checkout } 42 | }) 43 | } 44 | 45 | const createNewCheckout = () => store.client.checkout.create() 46 | const fetchCheckout = id => store.client.checkout.fetch(id) 47 | 48 | if (existingCheckoutID) { 49 | try { 50 | const checkout = await fetchCheckout(existingCheckoutID) 51 | // Make sure this cart hasn’t already been purchased. 52 | if (!isRemoved.current && !checkout.completedAt) { 53 | setCheckoutInState(checkout) 54 | return 55 | } 56 | } catch (e) { 57 | localStorage.setItem('shopify_checkout_id', null) 58 | } 59 | } 60 | 61 | const newCheckout = await createNewCheckout() 62 | if (!isRemoved.current) { 63 | setCheckoutInState(newCheckout) 64 | } 65 | } 66 | 67 | initializeCheckout() 68 | }, [store.client.checkout]) 69 | 70 | useEffect(() => () => { 71 | isRemoved.current = true 72 | }) 73 | 74 | return ( 75 |