Gatsby Theme ThePuzzlers Cart

Adds the shopping cart & checkout process for a Boxenstop site.

Getting Started

1. Download from npm: yarn add gatsby-theme-thepuzzlers-cart.
2. Add plugin to your gatsby-config.js file with the required theme options.
3. Add GATSBY_STRIPE_PUBLISHABLE_KEY=pk_test_*** as an environment variable.

Theme Options

ThePuzzlers Theme Options

| Option | Value | Description | Required | | --------------- | ---------------- | ------------------------------------------------------------ | -------- | | url | String | Specify the boxenstop api url | Yes | | stripeReturnUrl | String | Specify the url, that stripe should return to a successful payment. In development that woul be: http://localhost:8000/checkout | Yes | | business_id | String | Specify the id of the business | Yes | | stripeAccountId | String | Specify the id of the business's stripe account | Yes | | orderTypes | [String] | List all provided orderTypes in an array. Possible types: "POSTAL", "DELIVERY", "PICKUP" | Yes | | acceptsCashPayment | Boolean | Set to true if you accept cash payments for delivery and pickup orders. Defaults to false. | No | | intlThemeOptions | IntlThemeConfig | The configuration you would usually pass to the gatsby-theme-thepuzzlers-intl plugin. You don't have to add the intl theme separately when you have the cart theme installed. | Yes | | cacheConfig | Object | Any additional configuration that you want to pass to the InMemoryCache of @apollo/client. | No |

Shopping Cart Context

| Value | Type | Description | | --------------- | ---------------- | ------------------------------------------------------------ |
| items | Array of Order Items | Returns all items in the cart |
| pickupItems | Array of Order Items | Returns all items in the cart with the selected order type of pickup |
| shippingItems | Array of Order Items | Returns all items in the cart with the selected order type of pickup |
| deliveryItems | Array of Order Items | Returns all items in the cart with the selected order type of pickup |
| clearCart | Fn | Empties all items in shopping cart | | addItem | Fn | Adds the specified cart item | | removeItem | Fn | Removes the specified cart item | | incrementItem | Fn | Increases the quantity of the specified cart item | | decrementItem | Fn | Decreases the quantity of the specified cart item | | totalItems | Number | Returns the number of items currently in the cart | / | totalAmount | Number | Returns the total price of all the items in the cart | | lastSelectedOrderType | OrderType | The orderType of the item that was last added to the cart |

Theme Pages

/cart

/checkout

Theme Components

• Shopping Cart

Custom Hooks

Business Hooks

• useBusinessProfile
• useBusinessSettings
• useBusinessLegalDetails
• useSocialLinks
• useShippingFee
• useBusinessId
• useCurrency

Opening Hours Hooks

• useOpeningHours
• useDeliveryHours
• useDayOff
• useDaysOff

Product Hooks

• useProduct
• useProducts

Box Hooks

• useBox
• useBoxes

Utility Hooks

• useNextAvailablePickupTime when passed a pickupLocationId this hook returns the next possible pickupTime of that location. Otherwise it returns the next possible pickupTime out of all pickupLocations of the business.
• useNextAvailableDeliveryTime
• useProductSelection
• useFormatPrice (Returns a function that can be used to format any number to a price). It takes the locale of the page and the currency set in boxenstop into account.