9 | {product.title} - {product.variant.title} 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /docs/src/components/examples/ExampleUseAddItemToCart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Button} from 'theme-ui'; 3 | import {useAddItemToCart, useCartCount} from 'gatsby-theme-shopify-manager'; 4 | import {useProducts} from '../../utils'; 5 | 6 | export function ExampleUseAddItemToCart() { 7 | const cartCount = useCartCount(); 8 | const addItemToCart = useAddItemToCart(); 9 | const products = useProducts(); 10 | 11 | async function addToCart() { 12 | const variantId = products[0].variants[0].shopifyId; 13 | const quantity = 1; 14 | 15 | try { 16 | await addItemToCart(variantId, quantity); 17 | alert('Successfully added that item to your cart!'); 18 | } catch { 19 | alert('There was a problem adding that item to your cart.'); 20 | } 21 | } 22 | 23 | return ( 24 | <> 25 |There are currently {cartCount} items in your cart.
26 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /docs/src/components/examples/ExampleUseAddItemsToCart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Button} from 'theme-ui'; 3 | import {useAddItemsToCart, useCartCount} from 'gatsby-theme-shopify-manager'; 4 | import {useProducts} from '../../utils'; 5 | 6 | export function ExampleUseAddItemsToCart() { 7 | const cartCount = useCartCount(); 8 | const addItemsToCart = useAddItemsToCart(); 9 | const products = useProducts(); 10 | 11 | async function addToCart() { 12 | const items = [ 13 | { 14 | variantId: products[0].variants[0].shopifyId, 15 | quantity: 1, 16 | }, 17 | ]; 18 | 19 | try { 20 | await addItemsToCart(items); 21 | alert('Successfully added that item to your cart!'); 22 | } catch { 23 | alert('There was a problem adding that item to your cart.'); 24 | } 25 | } 26 | 27 | return ( 28 | <> 29 |There are currently {cartCount} items in your cart.
30 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /docs/src/components/examples/ExampleUseCart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {useCart} from 'gatsby-theme-shopify-manager'; 3 | 4 | export function ExampleUseCart() { 5 | const cart = useCart(); 6 | 7 | if (cart == null) { 8 | returnThe cart object is currently null.
; 9 | } 10 | 11 | const cartDate = new Date(cart.createdAt).toLocaleDateString(); 12 | 13 | return ( 14 |
15 | Your cart was created on {cartDate}.
16 |
17 | You have ${cart.totalPrice} worth of products in your cart.
18 |
Your cart has {cartCount} items.
; 8 | } 9 | -------------------------------------------------------------------------------- /docs/src/components/examples/ExampleUseCartItems.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {useCartItems} from 'gatsby-theme-shopify-manager'; 3 | 4 | export function ExampleUseCartItems() { 5 | const keyModifier = `ExampleUseCartItems`; 6 | const cartItems = useCartItems(); 7 | 8 | if (cartItems.length < 1) { 9 | returnYour cart is empty.
; 10 | } 11 | 12 | return ( 13 | <> 14 |Your cart has the following items:
15 |There is no active checkout.
10 | ) : ( 11 |12 | 13 | Complete Your Order → 14 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /docs/src/components/examples/ExampleUseRemoveItemFromCart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Button} from 'theme-ui'; 3 | import { 4 | useRemoveItemFromCart, 5 | useCartItems, 6 | } from 'gatsby-theme-shopify-manager'; 7 | 8 | export function ExampleUseRemoveItemFromCart() { 9 | const keyModifier = 'ExampleUseRemoveItemFromCart'; 10 | const cartItems = useCartItems(); 11 | const removeItemFromCart = useRemoveItemFromCart(); 12 | 13 | async function removeFromCart() { 14 | if (cartItems.length < 1) { 15 | return; 16 | } 17 | const variantId = cartItems[0].variant.id; 18 | 19 | try { 20 | await removeItemFromCart(variantId); 21 | alert('Successfully removed an item from your cart!'); 22 | } catch { 23 | alert('There was a problem removing that item from your cart.'); 24 | } 25 | } 26 | 27 | const cartMarkup = 28 | cartItems.length > 0 ? ( 29 | <> 30 |Your cart has the following items:
31 |Your cart is empty.
41 | ); 42 | 43 | return ( 44 | <> 45 | {cartMarkup} 46 | 49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /docs/src/components/examples/ExampleUseRemoveItemsFromCart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Button} from 'theme-ui'; 3 | import { 4 | useRemoveItemsFromCart, 5 | useCartItems, 6 | } from 'gatsby-theme-shopify-manager'; 7 | 8 | export function ExampleUseRemoveItemsFromCart() { 9 | const keyModifier = 'ExampleUseRemoveItemsFromCart'; 10 | const cartItems = useCartItems(); 11 | const removeItemsFromCart = useRemoveItemsFromCart(); 12 | 13 | async function removeFromCart() { 14 | if (cartItems.length < 1) { 15 | return; 16 | } 17 | const variantId = cartItems[0].variant.id; 18 | 19 | try { 20 | await removeItemsFromCart([variantId]); 21 | alert('Successfully removed an item from your cart!'); 22 | } catch { 23 | alert('There was a problem removing that item from your cart.'); 24 | } 25 | } 26 | 27 | const cartMarkup = 28 | cartItems.length > 0 ? ( 29 | <> 30 |Your cart has the following items:
31 |Your cart is empty.
41 | ); 42 | 43 | return ( 44 | <> 45 | {cartMarkup} 46 | 49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /docs/src/components/examples/ExampleUseUpdateItemQuantity.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {Flex, Button, Input} from 'theme-ui'; 3 | import { 4 | useUpdateItemQuantity, 5 | useCartItems, 6 | } from 'gatsby-theme-shopify-manager'; 7 | 8 | export function ExampleUseUpdateItemQuantity() { 9 | const [quantity, setQuantity] = useState(1); 10 | const [item] = useCartItems(); 11 | const updateItemQuantity = useUpdateItemQuantity(); 12 | 13 | async function updateQuantity() { 14 | if (item == null) { 15 | return; 16 | } 17 | 18 | const variantId = item.variant.id; 19 | 20 | try { 21 | await updateItemQuantity(variantId, quantity); 22 | alert('Successfully updated the item quantity!'); 23 | } catch { 24 | alert("There was a problem updating that item's quantity."); 25 | } 26 | } 27 | 28 | function submitForm(event) { 29 | event.preventDefault(); 30 | event.stopPropagation(); 31 | updateQuantity(); 32 | } 33 | 34 | const itemMarkup = 35 | item == null ? ( 36 |Your cart is empty.
37 | ) : ( 38 |39 | {item.title} - {item.variant.title} ({item.quantity}) 40 |
41 | ); 42 | 43 | const formMarkup = ( 44 |There are currently {cartCount} items in your cart.
37 | 40 | 41 | ); 42 | } 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /docs/src/content/hooks/useAddItemsToCart.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | --- 4 | 5 | import {ExampleUseAddItemsToCart, ExampleWithCode} from '../../components'; 6 | 7 | ### useAddItemsToCart() 8 | 9 | The `useAddItemsToCart` hook allows you to add multiple items to the cart at a single time. The hook returns a function that accepts an array of objects with keys `variantId` and `quantity`. It returns a `void` promise that will throw if it encounters an error. You can optionally include an array of `customAttributes` with each item. 10 | 11 |There are currently {cartCount} items in your cart.
41 | 44 | 45 | ); 46 | } 47 | 48 | ``` 49 | 50 | -------------------------------------------------------------------------------- /docs/src/content/hooks/useCart.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | import {ExampleUseCart, ExampleWithCode} from '../../components'; 6 | 7 | ### useCart() 8 | 9 | The most basic hook is the `useCart()` hook. This hook gives you access to the current cart state (or null, if there is no cart state). From this object you can get access to the line items, the total amounts, and additional checkout-related information. 10 | 11 |The cart object is currently null.
; 22 | } 23 | 24 | const cartDate = new Date(cart.createdAt).toLocaleDateString(); 25 | 26 | return ( 27 |
28 | Your cart was created on {cartDate}.
29 |
30 | You have ${cart.totalPrice} worth of products in your cart.
31 |
Your cart has {cartCount} items.
; 21 | } 22 | ``` 23 | 24 | -------------------------------------------------------------------------------- /docs/src/content/hooks/useCartItems.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | import {ExampleUseCartItems, ExampleWithCode} from '../../components'; 6 | 7 | ### useCartItems() 8 | 9 | The `useCartItems()` hook provides access to the items currently in the cart. This hook always returns an array. 10 | 11 |Your cart is empty.
; 22 | } 23 | 24 | return ( 25 | <> 26 |Your cart has the following items:
27 |There is no active checkout.
22 | ) : ( 23 |24 | 25 | Complete Your Order → 26 | 27 |
28 | ); 29 | } 30 | 31 | ``` 32 | 33 | -------------------------------------------------------------------------------- /docs/src/content/hooks/useRemoveItemFromCart.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | order: 8 3 | --- 4 | 5 | import {ExampleUseRemoveItemFromCart, ExampleWithCode} from '../../components'; 6 | 7 | ### useRemoveItemFromCart() 8 | 9 | The `useRemoveItemFromCart` is similar to the `useRemoveItemsFromCart` hook, but is only for a single item at a time. The hook returns a function that accepts a single argument: `variantId`. 10 | 11 |Your cart has the following items:
43 |Your cart is empty.
53 | ); 54 | 55 | return ( 56 | <> 57 | {cartMarkup} 58 | 61 | 62 | ); 63 | } 64 | ``` 65 | 66 | -------------------------------------------------------------------------------- /docs/src/content/hooks/useRemoveItemsFromCart.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | order: 7 3 | --- 4 | 5 | import {ExampleUseRemoveItemsFromCart, ExampleWithCode} from '../../components'; 6 | 7 | ### useRemoveItemsFromCart() 8 | 9 | The `useRemoveItemFromCart` hook allows you to remove multiple items from the cart at a single time. The hook returns a function that accepts an array of `variantId` strings. It returns a `void` promise that will throw if it encounters an error. 10 | 11 |Your cart has the following items:
43 |Your cart is empty.
53 | ); 54 | 55 | return ( 56 | <> 57 | {cartMarkup} 58 | 61 | 62 | ); 63 | } 64 | ``` 65 | 66 | -------------------------------------------------------------------------------- /docs/src/content/hooks/useUpdateItemQuantity.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | order: 9 3 | --- 4 | 5 | import {ExampleUseUpdateItemQuantity, ExampleWithCode} from '../../components'; 6 | 7 | ### useUpdateItemQuantity() 8 | 9 | The `useUpdateItemQuantity()` hook returns a function that updates the quantity of a lineitem currently in the cart. The returned function accepts two arguments: `variantId` and `quantity`. It returns a `void` Promise that throws if it encounters an error. If `0` is passed in as the quantity, it removes the item from the cart. 10 | 11 |Your cart is empty.
44 | ) : ( 45 |46 | {item.title} - {item.variant.title} ({item.quantity}) 47 |
48 | ); 49 | 50 | const formMarkup = ( 51 |Only Down is an example site that shows how to use the gatsby-theme-shopify-manager plugin.
207 |{content}
; 12 | } 13 | 14 | const {getAllByText} = render({content}
; 24 | } 25 | 26 | const {getAllByText} = render({error.message}
; 38 | } 39 | 40 | returnfail
; 41 | } 42 | 43 | const {getAllByText} = render({cart?.id}
; 12 | } 13 | 14 | afterEach(() => { 15 | LocalStorage.set(LocalStorageKeys.CART, ''); 16 | jest.clearAllMocks(); 17 | }); 18 | 19 | describe('ContextProvider', () => { 20 | it('throws an error if the accessToken is missing', () => { 21 | function MockComponent() { 22 | const {client} = useContext(Context); 23 | return{typeof client}
; 24 | } 25 | 26 | const originalError = console.error; 27 | console.error = jest.fn(); 28 | 29 | expect(() => 30 | render( 31 |pass
; 147 | } 148 | 149 | const wrapper = render( 150 |pass
; 172 | } 173 | 174 | const wrapper = render( 175 |{content}
; 196 | } 197 | 198 | const {getByText} = render( 199 |{content}
; 225 | } 226 | 227 | const {asFragment} = render( 228 |{content}
; 253 | } 254 | 255 | const {asFragment} = render( 256 |{content}
; 283 | } 284 | 285 | const {asFragment} = render( 286 |{content}
; 317 | } 318 | 319 | const {asFragment} = render( 320 |{content}
; 352 | } 353 | 354 | const {asFragment} = render( 355 |Content
; 387 | } 388 | 389 | render( 390 |,
14 | ): Promise ,
14 | ): RenderHookResult {shopName} {accessToken}