https://github.com/alexanderprod/shopify-react-context
https://github.com/alexanderprod/shopify-react-context
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alexanderprod/shopify-react-context
- Owner: AlexanderProd
- Created: 2022-07-06T09:14:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-06T12:31:42.000Z (over 3 years ago)
- Last Synced: 2025-03-16T17:51:22.912Z (10 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Installation
Add the package to your project via `npm install shopify-react-context` or `yarn add shopify-react-context`.
## Usage
Import your the `StoreContextProvider` component and wrap your components with it. For example a Layout component in `GatsbyJS`:
```JS
import React from 'react'
import { StoreContextProvider }from 'shopify-react-context'
const Layout = ({ children }) => {
return (
{children}
)
}
export default Layout
```
Now to access the Context use the React `useContext` hook and pass the `StoreContext` to it.
```JS
const {
addVariantToCart,
store: { client, adding },
} = useContext(StoreContext)
```
## Example
This is an example for a ProductForm component using the Context exposed by `shopify-react-context`.
```JS
import React, { useState, useContext, useEffect, useCallback } from 'react'
import { StoreContext } from 'shopify-react-context'
import isEqual from 'lodash/isEqual'
import find from 'lodash/find'
const ProductForm = ({ product }) => {
const {
options,
variants,
variants: [initialVariant],
priceRange: { minVariantPrice },
} = product
const [variant, setVariant] = useState({ ...initialVariant })
const [quantity, setQuantity] = useState(1)
const {
addVariantToCart,
store: { client, adding },
} = useContext(StoreContext)
const productVariant =
client.product.helpers.variantForOptions(product, variant) || variant
const [available, setAvailable] = useState(productVariant.availableForSale)
const checkAvailability = useCallback(
productId => {
client.product.fetch(productId).then(fetchedProduct => {
// this checks the currently selected variant for availability
const result = fetchedProduct.variants.filter(
variant => variant.id === productVariant.shopifyId
)
setAvailable(
result[0]?.available ?? fetchedProduct.variants[0].available
)
})
},
[client.product, productVariant.shopifyId]
)
useEffect(() => {
checkAvailability(product.shopifyId)
}, [productVariant, checkAvailability, product.shopifyId])
const handleQuantityChange = ({ target }) => {
setQuantity(target.value)
}
const handleOptionChange = (optionIndex, { target }) => {
const { value } = target
const currentOptions = [...variant.selectedOptions]
currentOptions[optionIndex] = {
...currentOptions[optionIndex],
value,
}
const selectedVariant = find(variants, ({ selectedOptions }) =>
isEqual(currentOptions, selectedOptions)
)
setVariant({ ...selectedVariant })
}
const handleAddToCart = () => {
addVariantToCart(productVariant.shopifyId, quantity)
}
const checkDisabled = (name, value) => {
const match = find(variants, {
selectedOptions: [
{
name: name,
value: value,
},
],
})
if (match === undefined) return true
if (match.availableForSale === true) return false
return true
}
const price = Intl.NumberFormat(undefined, {
currency: minVariantPrice.currencyCode,
minimumFractionDigits: 2,
style: 'currency',
}).format(variant.price)
return (
<>
{price}
{options.map(({ id, name, values }, index) => (
{name}
handleOptionChange(index, event)}
>
{values.map(value => (
{value}
))}
))}
Quantity
Add to Cart
{!available && This Product is out of Stock!
}
>
)
}
```