Skip to content

Commit 3e18760

Browse files
AlexanderProdAlexanderProd
committed
upgraded dependencies
using the new gatsby-source-shopify
1 parent 1eae6f0 commit 3e18760

File tree

7 files changed

+5804
-7946
lines changed

7 files changed

+5804
-7946
lines changed

‎.env.development‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
SHOP_NAME=graphql
2-
SHOPIFY_ACCESS_TOKEN=dd4d4dc146542ba7763305d71d1b3d38
1+
SHOP_NAME=alexanderprod-gatsby-starter
2+
SHOPIFY_ACCESS_TOKEN=567fcd6a0a6aa8a7069394493109e1d6
3+
SHOPIFY_SHOP_PASSWORD=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
4+
GATSBY_SHOPIFY_STORE_URL=alexanderprod-gatsby-starter.myshopify.com

‎.env.production‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
SHOP_NAME=graphql
2-
SHOPIFY_ACCESS_TOKEN=dd4d4dc146542ba7763305d71d1b3d38
1+
SHOP_NAME=alexanderprod-gatsby-starter
2+
SHOPIFY_ACCESS_TOKEN=bcae5b8bc0139c38731a40d11fd9382b
3+
SHOPIFY_SHOP_PASSWORD=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
4+
GATSBY_SHOPIFY_STORE_URL=alexanderprod-gatsby-starter.myshopify.com

‎gatsby-config.js‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const path = require('path')
22

33
require('dotenv').config({
4-
path: `.env.${process.env.NODE_ENV}`
4+
path: `.env.${process.env.NODE_ENV}`,
55
})
66

77
module.exports = {
@@ -21,6 +21,7 @@ module.exports = {
2121
},
2222
`gatsby-transformer-sharp`,
2323
`gatsby-plugin-sharp`,
24+
`gatsby-plugin-image`,
2425
`gatsby-plugin-layout`,
2526
{
2627
resolve: `gatsby-plugin-manifest`,
@@ -35,26 +36,12 @@ module.exports = {
3536
},
3637
},
3738
{
38-
resolve: `gatsby-source-shopify`,
39+
resolve: 'gatsby-source-shopify',
3940
options: {
40-
// The domain name of your Shopify shop. This is required.
41-
// Example: 'gatsby-source-shopify-test-shop' if your Shopify address is
42-
// 'gatsby-source-shopify-test-shop.myshopify.com'.
43-
shopName: process.env.SHOP_NAME,
44-
45-
// An API access token to your Shopify shop. This is required.
46-
// You can generate an access token in the "Manage private apps" section
47-
// of your shop's Apps settings. In the Storefront API section, be sure
48-
// to select "Allow this app to access your storefront data using the
49-
// Storefront API".
50-
// See: https://help.shopify.com/api/custom-storefronts/storefront-api/getting-started#authentication
51-
accessToken: process.env.SHOPIFY_ACCESS_TOKEN,
52-
53-
// Set verbose to true to display a verbose output on `npm run develop`
54-
// or `npm run build`. This prints which nodes are being fetched and how
55-
// much time was required to fetch and process the data.
56-
// Defaults to true.
57-
verbose: true,
41+
password: process.env.SHOPIFY_SHOP_PASSWORD,
42+
storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
43+
downloadImages: true,
44+
shopifyConnections: ['collections'],
5845
},
5946
},
6047
{
@@ -66,7 +53,7 @@ module.exports = {
6653
{
6754
resolve: `gatsby-plugin-google-analytics`,
6855
options: {
69-
trackingId: "UA-134421805-1",
56+
trackingId: 'UA-134421805-1',
7057
anonymize: true,
7158
respectDNT: true,
7259
},

‎package.json‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,31 @@
99
},
1010
"dependencies": {
1111
"@emotion/core": "^11.0.0",
12-
"@emotion/react": "^11.1.1",
13-
"@emotion/styled": "^11.0.0",
14-
"gatsby": "^2.32.3",
15-
"gatsby-image": "^2.11.0",
16-
"gatsby-plugin-google-analytics": "^2.0.13",
17-
"gatsby-plugin-layout": "^1.0.11",
18-
"gatsby-plugin-manifest": "^2.2.23",
19-
"gatsby-plugin-offline": "^3.0.16",
20-
"gatsby-plugin-react-helmet": "^3.1.13",
21-
"gatsby-plugin-root-import": "^2.0.6",
22-
"gatsby-plugin-sharp": "^2.14.1",
23-
"gatsby-source-filesystem": "^2.11.0",
24-
"gatsby-source-shopify": "^3.10.0",
25-
"gatsby-transformer-sharp": "^2.12.0",
12+
"@emotion/react": "^11.9.3",
13+
"@emotion/styled": "^11.9.3",
14+
"gatsby": "^4.19.2",
15+
"gatsby-image": "^3.11.0",
16+
"gatsby-plugin-google-analytics": "^4.19.0",
17+
"gatsby-plugin-image": "^2.19.0",
18+
"gatsby-plugin-layout": "^3.19.0",
19+
"gatsby-plugin-manifest": "^4.19.0",
20+
"gatsby-plugin-offline": "^5.19.0",
21+
"gatsby-plugin-react-helmet": "^5.19.0",
22+
"gatsby-plugin-root-import": "^2.0.8",
23+
"gatsby-plugin-sharp": "^4.19.0",
24+
"gatsby-source-filesystem": "^4.19.0",
25+
"gatsby-source-shopify": "6.10.2",
26+
"gatsby-transformer-sharp": "^4.19.0",
2627
"isomorphic-fetch": "^3.0.0",
27-
"js-yaml": "^3.13.1",
28+
"js-yaml": "^4.1.0",
2829
"lodash": "^4.17.19",
2930
"prop-types": "^15.7.2",
3031
"querystringify": "^2.0.0",
31-
"react": "^17.0.1",
32-
"react-dom": "^17.0.1",
32+
"react": "^18.2.0",
33+
"react-dom": "^18.2.0",
3334
"react-helmet": "^6.1.0",
34-
"set-value": "^3.0.2",
35-
"shopify-buy": "^2.11.0"
35+
"set-value": "^4.1.0",
36+
"shopify-buy": "2.14.0"
3637
},
3738
"keywords": [
3839
"gatsby",

‎src/components/ProductForm/index.js‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ const ProductForm = ({ product }) => {
1010
options,
1111
variants,
1212
variants: [initialVariant],
13-
priceRange: { minVariantPrice },
13+
priceRangeV2: { minVariantPrice },
1414
} = product
1515
const [variant, setVariant] = useState({ ...initialVariant })
1616
const [quantity, setQuantity] = useState(1)
17+
const [loading, setLoading] = useState(false)
1718
const {
1819
addVariantToCart,
1920
store: { client, adding },
@@ -24,23 +25,21 @@ const ProductForm = ({ product }) => {
2425
const [available, setAvailable] = useState(productVariant.availableForSale)
2526

2627
const checkAvailability = useCallback(
27-
productId => {
28-
client.product.fetch(productId).then(fetchedProduct => {
29-
// this checks the currently selected variant for availability
30-
const result = fetchedProduct.variants.filter(
31-
variant => variant.id === productVariant.shopifyId
32-
)
33-
setAvailable(
34-
result[0]?.available ?? fetchedProduct.variants[0].available
35-
)
36-
})
28+
async productId => {
29+
setLoading(true)
30+
const fetchedProduct = await client.product.fetch(productId)
31+
const result = fetchedProduct.variants.filter(
32+
variant => variant.id === productVariant.shopifyId
33+
)
34+
setAvailable(result[0]?.available ?? fetchedProduct.variants[0].available)
35+
setLoading(false)
3736
},
3837
[client.product, productVariant.shopifyId]
3938
)
4039

4140
useEffect(() => {
4241
checkAvailability(product.shopifyId)
43-
}, [productVariant, checkAvailability, product.shopifyId])
42+
}, [checkAvailability, product.shopifyId])
4443

4544
const handleQuantityChange = ({ target }) => {
4645
setQuantity(target.value)
@@ -62,8 +61,8 @@ const ProductForm = ({ product }) => {
6261
setVariant({ ...selectedVariant })
6362
}
6463

65-
const handleAddToCart = () => {
66-
addVariantToCart(productVariant.shopifyId, quantity)
64+
const handleAddToCart = async () => {
65+
await addVariantToCart(productVariant.shopifyId, quantity)
6766
}
6867

6968
/*

‎src/templates/ProductPage/index.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import { graphql } from 'gatsby'
3+
import { GatsbyImage } from 'gatsby-plugin-image'
34

45
import SEO from '~/components/seo'
56
import ProductForm from '~/components/ProductForm'
@@ -14,17 +15,19 @@ import { ProductTitle, ProductDescription } from './styles'
1415

1516
const ProductPage = ({ data }) => {
1617
const product = data.shopifyProduct
18+
19+
console.log(product.images)
1720
return (
1821
<>
1922
<SEO title={product.title} description={product.description} />
2023
<Container>
2124
<TwoColumnGrid>
2225
<GridLeft>
2326
{product.images.map(image => (
24-
<Img
25-
fluid={image.localFile.childImageSharp.fluid}
27+
<GatsbyImage
2628
key={image.id}
27-
alt={product.title}
29+
image={image.localFile.childImageSharp.gatsbyImageData}
30+
alt="Produktfoto Karl"
2831
/>
2932
))}
3033
</GridLeft>
@@ -61,13 +64,13 @@ export const query = graphql`
6164
title
6265
price
6366
availableForSale
64-
shopifyId
67+
shopifyId: storefrontId
6568
selectedOptions {
6669
name
6770
value
6871
}
6972
}
70-
priceRange {
73+
priceRangeV2 {
7174
minVariantPrice {
7275
amount
7376
currencyCode
@@ -82,9 +85,11 @@ export const query = graphql`
8285
id
8386
localFile {
8487
childImageSharp {
85-
fluid(maxWidth: 910) {
86-
...GatsbyImageSharpFluid_withWebp_tracedSVG
87-
}
88+
gatsbyImageData(
89+
width: 910
90+
placeholder: TRACED_SVG
91+
layout: CONSTRAINED
92+
)
8893
}
8994
}
9095
}

0 commit comments

Comments
 (0)