├── .babelrc.js ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierrc ├── LICENSE ├── README.md ├── components ├── Header.js ├── NavBar.js ├── Search.js ├── assets │ └── react-storefront-logo.svg ├── cart │ ├── CartItem.js │ └── RemoveDialog.js ├── product │ ├── AddToCartConfirmation.js │ ├── ProductItem.js │ └── SuggestedProducts.js ├── reportError.js ├── search │ ├── Search.js │ ├── SearchDesktop.js │ └── SearchMobile.js ├── stubs │ └── react-loading-skeleton.js └── theme.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── api │ ├── cart │ │ ├── add.js │ │ ├── index.js │ │ ├── remove.js │ │ └── update.js │ ├── index.js │ ├── p │ │ ├── [productId].js │ │ ├── [productId] │ │ │ └── suggestions.js │ │ └── media.js │ ├── routes.js │ ├── s │ │ └── [...categorySlug].js │ ├── search.js │ ├── session.js │ └── suggestions.js ├── appShell.js ├── cart.js ├── checkout.js ├── index.js ├── p │ └── [productId].js ├── s │ └── [...categorySlug].js └── search.js ├── public └── favicon.ico ├── server.js └── sw └── service-worker.js /.babelrc.js: -------------------------------------------------------------------------------- 1 | const plugins = [ 2 | [ 3 | 'babel-plugin-transform-imports', 4 | { 5 | '@material-ui/core': { 6 | transform: '@material-ui/core/${member}', 7 | preventFullImport: true, 8 | }, 9 | '@material-ui/styles': { 10 | transform: '@material-ui/styles/${member}', 11 | preventFullImport: true, 12 | }, 13 | '@material-ui/icons': { 14 | transform: '@material-ui/icons/${member}', 15 | preventFullImport: true, 16 | }, 17 | '@material-ui/lab': { 18 | transform: '@material-ui/lab/${member}', 19 | preventFullImport: true, 20 | }, 21 | }, 22 | ], 23 | ] 24 | 25 | const presets = ['next/babel'] 26 | 27 | module.exports = { plugins, presets } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env* 21 | .serverless_nextjs 22 | 23 | # moovweb xdn 24 | .moov 25 | .xdn 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # IDEs 33 | .idea/* 34 | 35 | # yalc 36 | .yalc 37 | yalc.lock 38 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://npm-proxy.fury.io/moovweb/ 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v12.14.0 -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": false, 4 | "trailingComma": "es5", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-storefront-starter-app 2 | 3 | Starter Next.js app for React Storefront 7+ 4 | 5 | # Development 6 | 7 | ``` 8 | npm i 9 | npm run dev 10 | ``` 11 | 12 | # Production 13 | 14 | You can get a better sense of the speed of React Storefront by running a production build: 15 | 16 | ``` 17 | npm run build && npm run prod 18 | ``` 19 | -------------------------------------------------------------------------------- /components/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useCallback, useContext } from 'react' 2 | import { makeStyles } from '@material-ui/core/styles' 3 | import AppBar from 'react-storefront/AppBar' 4 | import CartButton from 'react-storefront/CartButton' 5 | import Search from './search/Search' 6 | import Logo from '../components/assets/react-storefront-logo.svg' 7 | import { Container } from '@material-ui/core' 8 | import Menu from 'react-storefront/menu/Menu' 9 | import MenuButton from 'react-storefront/menu/MenuButton' 10 | import Link from 'react-storefront/link/Link' 11 | import SessionContext from 'react-storefront/session/SessionContext' 12 | import get from 'lodash/get' 13 | 14 | const useStyles = makeStyles(theme => ({ 15 | title: {}, 16 | logo: { 17 | position: 'absolute', 18 | left: 10, 19 | top: 0, 20 | [theme.breakpoints.down('xs')]: { 21 | left: '50%', 22 | top: 6, 23 | marginLeft: -60, 24 | }, 25 | }, 26 | toolbar: { 27 | padding: 0, 28 | margin: 0, 29 | }, 30 | container: { 31 | display: 'flex', 32 | alignItems: 'center', 33 | position: 'relative', 34 | 35 | [theme.breakpoints.down('xs')]: { 36 | padding: 5, 37 | }, 38 | }, 39 | })) 40 | 41 | export default function Header({ menu }) { 42 | const classes = useStyles() 43 | const [menuOpen, setMenuOpen] = useState(false) 44 | const handleMenuClose = useCallback(() => setMenuOpen(false), []) 45 | const handleMenuButtonClick = useCallback(() => setMenuOpen(menuOpen => !menuOpen), []) 46 | const { session } = useContext(SessionContext) 47 | 48 | return ( 49 | <> 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
{item.text} (custom)
} 68 | // renderItemContent={item =>
{item.text} (custom content)
} 69 | // renderBack={item =>
{item.text} back
} 70 | // renderHeader={item =>
{item.text} header
} 71 | // renderFooter={item =>
{item.text} footer
} 72 | /> 73 | 74 | ) 75 | } 76 | -------------------------------------------------------------------------------- /components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react' 2 | import NavTab from 'react-storefront/nav/NavTab' 3 | import NavTabs from 'react-storefront/nav/NavTabs' 4 | import Link from 'react-storefront/link/Link' 5 | import { Container, Paper } from '@material-ui/core' 6 | import { makeStyles } from '@material-ui/core/styles' 7 | 8 | const useStyles = makeStyles(theme => ({ 9 | container: { 10 | [theme.breakpoints.down('xs')]: { 11 | padding: 0, 12 | }, 13 | }, 14 | link: { 15 | display: 'block', 16 | marginTop: theme.spacing(2), 17 | '&:first-child': { 18 | marginTop: 0, 19 | }, 20 | }, 21 | })) 22 | 23 | function NavBar({ tabs }) { 24 | const classes = useStyles() 25 | 26 | return ( 27 | 28 | 29 | 30 | {tabs && 31 | tabs.map(tab => ( 32 | 33 | {tab.items && ( 34 |
35 | {tab.items.map(subcategory => ( 36 | 42 | {subcategory.text} 43 | 44 | ))} 45 |
46 | )} 47 | 48 | ))} 49 | 50 | 51 | 52 | ) 53 | } 54 | 55 | NavBar.defaultProps = { 56 | tabs: [], 57 | } 58 | 59 | export default memo(NavBar) 60 | -------------------------------------------------------------------------------- /components/Search.js: -------------------------------------------------------------------------------- 1 | import React, { useState, memo } from 'react' 2 | import SearchHeader from 'react-storefront/search/SearchHeader' 3 | import SearchForm from 'react-storefront/search/SearchForm' 4 | import SearchField from 'react-storefront/search/SearchField' 5 | import SearchDrawer from 'react-storefront/search/SearchDrawer' 6 | import SearchButton from 'react-storefront/search/SearchButton' 7 | import SearchSuggestions from 'react-storefront/search/SearchSuggestions' 8 | 9 | function Search() { 10 | const [searchOpen, setSearchOpen] = useState(false) 11 | const toggleSearch = () => setSearchOpen(!searchOpen) 12 | const closeSearch = () => setSearchOpen(false) 13 | 14 | return ( 15 | <> 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | export default memo(Search) 30 | -------------------------------------------------------------------------------- /components/assets/react-storefront-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | 20 | 21 | 22 | 23 | 24 | 32 | 33 | 40 | 46 | 47 | 48 | 49 | 55 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /components/cart/CartItem.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useContext } from 'react' 2 | import { Paper, IconButton, Typography } from '@material-ui/core' 3 | import { makeStyles } from '@material-ui/core/styles' 4 | import { Close as CloseIcon } from '@material-ui/icons' 5 | import Row from 'react-storefront/Row' 6 | import Link from 'react-storefront/link/Link' 7 | import QuantitySelector from 'react-storefront/QuantitySelector' 8 | import { Hbox } from 'react-storefront/Box' 9 | import Image from 'react-storefront/Image' 10 | import SessionContext from 'react-storefront/session/SessionContext' 11 | import RemoveDialog from './RemoveDialog' 12 | 13 | const styles = theme => ({ 14 | root: { 15 | flex: 1, 16 | padding: theme.spacing(2, 5, 2, 2), 17 | marginBottom: theme.spacing(2), 18 | position: 'relative', 19 | }, 20 | thumb: { 21 | marginRight: theme.spacing(2), 22 | width: 200, 23 | [theme.breakpoints.down('xs')]: { 24 | width: 100, 25 | }, 26 | }, 27 | label: { 28 | marginRight: theme.spacing(0.6), 29 | }, 30 | remove: { 31 | position: 'absolute', 32 | top: 0, 33 | right: 0, 34 | }, 35 | }) 36 | const useStyles = makeStyles(styles) 37 | 38 | export default function CartItem({ product, updateQuantity, remove }) { 39 | const [open, setOpen] = useState(false) 40 | const classes = useStyles() 41 | 42 | return ( 43 | <> 44 | 45 | 46 |
47 | 48 |
49 |
50 | 51 | 52 | {product.name} 53 | 54 | 55 | {product.priceText} 56 | {product.size && product.size.selected && ( 57 | 58 | Size: 59 | {product.size.selected.text} 60 | 61 | )} 62 | 63 | Quantity: 64 | updateQuantity(product, quantity)} 67 | /> 68 | 69 |
70 | 71 | setOpen(true)}> 72 | 73 | 74 | 75 | remove(product)} 80 | /> 81 | 82 | ) 83 | } 84 | -------------------------------------------------------------------------------- /components/cart/RemoveDialog.js: -------------------------------------------------------------------------------- 1 | import { 2 | Button, 3 | Dialog, 4 | DialogActions, 5 | DialogContent, 6 | DialogContentText, 7 | DialogTitle, 8 | } from '@material-ui/core' 9 | 10 | export default function RemoveDialog({ open, setOpen, name, action }) { 11 | return ( 12 | setOpen(false)} maxWidth="sm"> 13 | {name} 14 | 15 | Are you sure that you want to remove selected item? 16 | 17 | 18 | 19 | 22 | 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /components/product/AddToCartConfirmation.js: -------------------------------------------------------------------------------- 1 | import { 2 | Button, 3 | Dialog, 4 | DialogActions, 5 | DialogContent, 6 | DialogTitle, 7 | Typography, 8 | IconButton, 9 | } from '@material-ui/core' 10 | import get from 'lodash/get' 11 | import { Close as CloseIcon } from '@material-ui/icons' 12 | import { makeStyles } from '@material-ui/core/styles' 13 | import Image from 'react-storefront/Image' 14 | import Link from 'react-storefront/link/Link' 15 | import { Hbox } from 'react-storefront/Box' 16 | 17 | const useStyles = makeStyles(theme => ({ 18 | root: {}, 19 | image: { 20 | height: 150, 21 | width: 150, 22 | [theme.breakpoints.down('xs')]: { 23 | width: 100, 24 | height: 100, 25 | }, 26 | }, 27 | price: { 28 | fontWeight: theme.typography.fontWeightBold, 29 | }, 30 | name: { 31 | fontWeight: theme.typography.fontWeightBold, 32 | }, 33 | info: { 34 | flex: 1, 35 | marginLeft: theme.spacing(2), 36 | }, 37 | viewCart: { 38 | width: '100%', 39 | }, 40 | actions: { 41 | flexDirection: 'column', 42 | margin: theme.spacing(1, 2, 0, 2), 43 | }, 44 | continue: { 45 | margin: theme.spacing(2, 0, 1, 0), 46 | }, 47 | closeButton: { 48 | position: 'absolute', 49 | right: theme.spacing(1), 50 | top: theme.spacing(1), 51 | }, 52 | })) 53 | 54 | export default function AddToCartConfirmation({ 55 | open, 56 | setOpen, 57 | price, 58 | color, 59 | size, 60 | quantity, 61 | product, 62 | }) { 63 | const classes = useStyles() 64 | 65 | return ( 66 | setOpen(false)} fullWidth maxWidth="xs"> 67 | 68 | 69 | Item added to cart 70 | 71 | setOpen(false)} 75 | > 76 | 77 | 78 | 79 | 80 | 81 |
82 | {get(color, 87 |
88 |
89 | {product.name} 90 | {color.text ? `Color: ${color.text}` : ''} 91 | {size.text ? `Size: ${size.text}` : ''} 92 | {quantity ? `Qty: ${quantity}` : ''} 93 | {price} 94 |
95 | 96 | 97 | 98 | 99 | 102 | 103 | setOpen(false)}> 104 | Continue Shopping 105 | 106 | 107 | 108 | ) 109 | } 110 | -------------------------------------------------------------------------------- /components/product/ProductItem.js: -------------------------------------------------------------------------------- 1 | import React, { memo, useState } from 'react' 2 | import Link from 'react-storefront/link/Link' 3 | import { Vbox } from 'react-storefront/Box' 4 | import { Typography } from '@material-ui/core' 5 | import { makeStyles } from '@material-ui/core/styles' 6 | import Rating from 'react-storefront/Rating' 7 | import ForwardThumbnail from 'react-storefront/ForwardThumbnail' 8 | import Image from 'react-storefront/Image' 9 | import clsx from 'clsx' 10 | import ProductOptionSelector from 'react-storefront/option/ProductOptionSelector' 11 | 12 | const useStyles = makeStyles(theme => ({ 13 | root: { 14 | padding: `${theme.spacing(2)}px 0`, 15 | }, 16 | thumbnail: { 17 | marginBottom: theme.spacing(1), 18 | }, 19 | link: { 20 | textDecoration: 'none', 21 | color: 'inherit', 22 | }, 23 | price: { 24 | marginTop: '5px', 25 | }, 26 | reviews: { 27 | marginTop: '5px', 28 | }, 29 | reviewCount: { 30 | marginLeft: '2px', 31 | }, 32 | info: { 33 | margin: '0', 34 | }, 35 | })) 36 | 37 | function ProductItem({ product, index, classes, className, colorSelector }) { 38 | classes = useStyles({ classes }) 39 | const [store, updateStore] = useState(product) 40 | 41 | return ( 42 |
43 | 44 | 45 | 52 | 53 | {= 4 && index < 20 ? 'ssr' : false} 65 | aspectRatio={1} 66 | /> 67 | 68 | 69 | 70 |
71 | 72 | {product.name} 73 | 74 | {colorSelector && ( 75 | updateStore({ ...store, color: value })} 79 | optionProps={{ 80 | size: 'small', 81 | showLabel: false, 82 | }} 83 | /> 84 | )} 85 | 86 | {product.price} 87 |
88 | 89 |
90 | ) 91 | } 92 | 93 | ProductItem.defaultProps = { 94 | colorSelector: true, 95 | } 96 | 97 | export default memo(ProductItem) 98 | -------------------------------------------------------------------------------- /components/product/SuggestedProducts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This component is an example of how we can fetch user-specific data for a product. 3 | * In general, it's a best practice to separate cacheable elements that are shown to all 4 | * users from areas of the page which contained information that should only be displayed 5 | * to a single user, such as recently viewed products and recommendations. This separation 6 | * allows us to deliver most of the content from the CDN's cache and gives us the fastest 7 | * possible page load time. 8 | */ 9 | 10 | import React, { useState, useEffect } from 'react' 11 | import makeStyles from '@material-ui/core/styles/makeStyles' 12 | import PropTypes from 'prop-types' 13 | import fetch from 'react-storefront/fetch' 14 | import ProductItem from './ProductItem' 15 | import { Typography } from '@material-ui/core' 16 | import LoadMask from 'react-storefront/LoadMask' 17 | 18 | export const styles = theme => ({ 19 | products: { 20 | minHeight: 250, 21 | position: 'relative', 22 | margin: theme.spacing(0, -2), 23 | overflowX: 'auto', 24 | maxWidth: '100%', 25 | [theme.breakpoints.down('xs')]: { 26 | maxWidth: '100vw', 27 | }, 28 | }, 29 | wrap: { 30 | padding: theme.spacing(0, 0, 0, 2), 31 | display: 'flex', 32 | flexDirection: 'row', 33 | width: 'max-content', 34 | }, 35 | product: { 36 | margin: theme.spacing(0, 2, 0, 0), 37 | minWidth: 150, 38 | }, 39 | }) 40 | const useStyles = makeStyles(styles, { name: 'RSFSuggestedProducts' }) 41 | 42 | export default function SuggestedProducts({ product }) { 43 | const classes = useStyles() 44 | const [suggestedProducts, setSuggestedProducts] = useState(null) 45 | 46 | // Fetch suggested products when the product page is mounted 47 | useEffect(() => { 48 | fetch(`/api/p/${encodeURIComponent(product.id)}/suggestions`) 49 | .then(res => res.json()) 50 | .then(result => setSuggestedProducts(result)) 51 | }, []) 52 | 53 | return ( 54 |
55 | 56 | Suggested Products 57 | 58 |
59 | 60 |
61 | {suggestedProducts && 62 | suggestedProducts.map((product, i) => ( 63 | 70 | ))} 71 |
72 |
73 |
74 | ) 75 | } 76 | 77 | SuggestedProducts.propTypes = { 78 | /** 79 | * The product being displayed. 80 | */ 81 | product: PropTypes.shape({ 82 | id: PropTypes.string.isRequired, 83 | }), 84 | } 85 | -------------------------------------------------------------------------------- /components/reportError.js: -------------------------------------------------------------------------------- 1 | export default function reportError({ error }) { 2 | console.log('[reportError]', error) 3 | } 4 | -------------------------------------------------------------------------------- /components/search/Search.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SearchDesktop from './SearchDesktop' 3 | import SearchMobile from './SearchMobile' 4 | import { useMediaQuery } from '@material-ui/core' 5 | import { useTheme } from '@material-ui/core/styles' 6 | import Spacer from 'react-storefront/Spacer' 7 | import { useAmp } from 'next/amp' 8 | 9 | function Search() { 10 | const theme = useTheme() 11 | const amp = useAmp() 12 | const isDesktop = useMediaQuery(theme.breakpoints.up('sm')) && !amp 13 | 14 | return ( 15 | <> 16 | {!isDesktop && } 17 | 18 | {isDesktop && } 19 | 20 | ) 21 | } 22 | 23 | export default Search 24 | -------------------------------------------------------------------------------- /components/search/SearchDesktop.js: -------------------------------------------------------------------------------- 1 | import React, { memo, useEffect, useState, useRef } from 'react' 2 | import SearchForm from 'react-storefront/search/SearchForm' 3 | import SearchField from 'react-storefront/search/SearchField' 4 | import SearchSuggestions from 'react-storefront/search/SearchSuggestions' 5 | import SearchProvider from 'react-storefront/search/SearchProvider' 6 | import SearchPopover from 'react-storefront/search/SearchPopover' 7 | 8 | function SearchDesktop() { 9 | const inputRef = useRef(null) 10 | const activeRef = useRef(false) 11 | const [query, setQuery] = useState('') 12 | const [popoverOpen, setPopoverOpen] = useState(false) 13 | 14 | useEffect(() => { 15 | if (!activeRef.current) { 16 | activeRef.current = true 17 | } 18 | }, [popoverOpen]) 19 | 20 | return ( 21 | 22 | setQuery(value)} 25 | value={query} 26 | onFocus={() => setPopoverOpen(true)} 27 | submitButtonVariant="none" 28 | showClearButton={false} 29 | /> 30 | 31 | setPopoverOpen(false)} 36 | > 37 | 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | export default memo(SearchDesktop) 45 | -------------------------------------------------------------------------------- /components/search/SearchMobile.js: -------------------------------------------------------------------------------- 1 | import React, { useState, memo } from 'react' 2 | import SearchHeader from 'react-storefront/search/SearchHeader' 3 | import SearchForm from 'react-storefront/search/SearchForm' 4 | import SearchField from 'react-storefront/search/SearchField' 5 | import SearchDrawer from 'react-storefront/search/SearchDrawer' 6 | import SearchButton from 'react-storefront/search/SearchButton' 7 | import SearchSuggestions from 'react-storefront/search/SearchSuggestions' 8 | import SearchProvider from 'react-storefront/search/SearchProvider' 9 | 10 | function SearchMobile() { 11 | const [drawerOpen, setDrawerOpen] = useState(false) 12 | const [query, setQuery] = useState('') 13 | const toggleDrawer = () => setDrawerOpen(!drawerOpen) 14 | const closeDrawer = () => setDrawerOpen(false) 15 | 16 | return ( 17 | <> 18 | 19 | 20 | 21 | 22 | setQuery(value)} value={query} /> 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default memo(SearchMobile) 34 | -------------------------------------------------------------------------------- /components/stubs/react-loading-skeleton.js: -------------------------------------------------------------------------------- 1 | export default function Skeleton({ children }) { 2 | return children 3 | } 4 | 5 | export const SkeletonTheme = Skeleton 6 | -------------------------------------------------------------------------------- /components/theme.js: -------------------------------------------------------------------------------- 1 | import createTheme from 'react-storefront/theme/createTheme' 2 | import { red } from '@material-ui/core/colors' 3 | 4 | // Create a theme instance. 5 | const theme = createTheme({ 6 | palette: { 7 | primary: { 8 | main: '#556cd6', 9 | }, 10 | secondary: { 11 | main: '#19857b', 12 | }, 13 | error: { 14 | main: red.A400, 15 | }, 16 | background: { 17 | default: '#fff', 18 | }, 19 | }, 20 | overrides: {}, 21 | }) 22 | 23 | export default theme 24 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const withReactStorefront = require('react-storefront/plugins/withReactStorefront') 3 | require('dotenv').config() 4 | 5 | module.exports = withReactStorefront({ 6 | target: 'serverless', 7 | connector: 'react-storefront/mock-connector', 8 | webpack: config => { 9 | config.plugins.push( 10 | new webpack.optimize.LimitChunkCountPlugin({ 11 | maxChunks: 1, 12 | }) 13 | ) 14 | return config 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-storefront-starter-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "", 6 | "homepage": "", 7 | "author": "", 8 | "license": "UNLICENSED", 9 | "scripts": { 10 | "start": "npm run dev", 11 | "dev": "cross-env NODE_ENV=development nodemon server.js", 12 | "prod": "cross-env NODE_ENV=production node server.js", 13 | "build": "next build", 14 | "test": "jest", 15 | "deploy": "npm run build && xdn deploy", 16 | "rsf:link": "yalc add react-storefront", 17 | "prettier": "prettier --write \"**/*.js\" \"!{node_modules,.next,.yalc}/**\"" 18 | }, 19 | "husky": { 20 | "hooks": { 21 | "pre-commit": "lint-staged" 22 | } 23 | }, 24 | "dependencies": { 25 | "@material-ui/core": "4.11.2", 26 | "@material-ui/icons": "4.11.2", 27 | "@material-ui/lab": "4.0.0-alpha.57", 28 | "@material-ui/styles": "4.11.2", 29 | "@svgr/webpack": "^4.3.3", 30 | "clsx": "^1.0.4", 31 | "cross-env": "^5.2.0", 32 | "isomorphic-unfetch": "^3.0.0", 33 | "lorem-ipsum": "^2.0.3", 34 | "module-alias": "^2.2.1", 35 | "next": "^10.0.3", 36 | "preact": "10.1.0", 37 | "preact-render-to-string": "^5.1.2", 38 | "preact-ssr-prepass": "^1.0.0", 39 | "qs": "^6.9.0", 40 | "react": "^17.0.1", 41 | "react-dom": "^17.0.1", 42 | "react-storefront": "^8.17.4", 43 | "react-visibility-sensor": "^5.1.1" 44 | }, 45 | "devDependencies": { 46 | "babel-plugin-transform-imports": "^2.0.0", 47 | "dotenv": "^8.2.0", 48 | "nodemon": "^2.0.2", 49 | "prettier": "^1.19.1" 50 | }, 51 | "lint-staged": { 52 | "*.js": [ 53 | "yalc remove --all", 54 | "npm run prettier", 55 | "git add" 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import React from 'react' 3 | import theme from '../components/theme' 4 | import Header from '../components/Header' 5 | import { CssBaseline } from '@material-ui/core' 6 | import { makeStyles, MuiThemeProvider } from '@material-ui/core/styles' 7 | import PWA from 'react-storefront/PWA' 8 | import NavBar from '../components/NavBar' 9 | import reportError from '../components/reportError' 10 | import useJssStyles from 'react-storefront/hooks/useJssStyles' 11 | import SessionProvider from 'react-storefront/session/SessionProvider' 12 | import useAppStore from 'react-storefront/hooks/useAppStore' 13 | 14 | const styles = theme => ({ 15 | main: { 16 | paddingTop: 3, 17 | }, 18 | }) 19 | 20 | const useStyles = makeStyles(styles) 21 | 22 | export default function MyApp({ Component, pageProps }) { 23 | useJssStyles() 24 | const classes = useStyles() 25 | const [appData] = useAppStore(pageProps || {}) 26 | 27 | return ( 28 | 29 | 30 | {/* */} 35 | 36 | 37 | 38 | 39 |
40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 | ) 48 | } 49 | 50 | MyApp.getInitialProps = async function({ Component, ctx }) { 51 | let pageProps = {} 52 | 53 | if (Component.getInitialProps) { 54 | pageProps = await Component.getInitialProps(ctx) 55 | } 56 | 57 | return { pageProps } 58 | } 59 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Document, { Html, Head, Main, NextScript } from 'next/document' 3 | import { ServerStyleSheets } from '@material-ui/core/styles' 4 | import theme from '../components/theme' 5 | 6 | class MyDocument extends Document { 7 | render() { 8 | return ( 9 | 10 | 11 | 12 | {/* PWA primary color */} 13 | 14 | 15 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | ) 26 | } 27 | } 28 | 29 | MyDocument.getInitialProps = async ctx => { 30 | // Resolution order 31 | // 32 | // On the server: 33 | // 1. app.getInitialProps 34 | // 2. page.getInitialProps 35 | // 3. document.getInitialProps 36 | // 4. app.render 37 | // 5. page.render 38 | // 6. document.render 39 | // 40 | // On the server with error: 41 | // 1. document.getInitialProps 42 | // 2. app.render 43 | // 3. page.render 44 | // 4. document.render 45 | // 46 | // On the client 47 | // 1. app.getInitialProps 48 | // 2. page.getInitialProps 49 | // 3. app.render 50 | // 4. page.render 51 | 52 | // Render app and page and get the context of the page with collected side effects. 53 | const sheets = new ServerStyleSheets() 54 | const originalRenderPage = ctx.renderPage 55 | 56 | ctx.res.setHeader('service-worker-allowed', '/') 57 | 58 | ctx.renderPage = async () => { 59 | const document = originalRenderPage({ 60 | enhanceApp: App => props => sheets.collect(), 61 | }) 62 | 63 | return document 64 | } 65 | 66 | const initialProps = await Document.getInitialProps(ctx) 67 | 68 | return { 69 | ...initialProps, 70 | // Styles fragment is rendered after the app and page rendering finish. 71 | styles: ( 72 | <> 73 | {initialProps.styles} 74 | {sheets.getStyleElement()} 75 | 76 | ), 77 | } 78 | } 79 | 80 | export default MyDocument 81 | -------------------------------------------------------------------------------- /pages/api/cart/add.js: -------------------------------------------------------------------------------- 1 | import { addToCart } from 'react-storefront-connector' 2 | 3 | async function handler(req, res) { 4 | const result = await addToCart(req.body, req, res) 5 | res.json(result) 6 | } 7 | 8 | export const config = { 9 | api: { 10 | bodyParser: true, 11 | }, 12 | } 13 | 14 | export default handler 15 | -------------------------------------------------------------------------------- /pages/api/cart/index.js: -------------------------------------------------------------------------------- 1 | import { cart } from 'react-storefront-connector' 2 | 3 | export default async function(req, res) { 4 | res.json(await cart(req, res)) 5 | } 6 | -------------------------------------------------------------------------------- /pages/api/cart/remove.js: -------------------------------------------------------------------------------- 1 | import { removeCartItem } from 'react-storefront-connector' 2 | 3 | export default async function handler(req, res) { 4 | const { item } = req.body || {} 5 | res.json(await removeCartItem(item, req, res)) 6 | } 7 | 8 | export const config = { 9 | api: { 10 | bodyParser: true, 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /pages/api/cart/update.js: -------------------------------------------------------------------------------- 1 | import { updateCartItem } from 'react-storefront-connector' 2 | 3 | export default async function handler(req, res) { 4 | const { item, quantity } = req.body 5 | res.json(await updateCartItem(item, quantity, req, res)) 6 | } 7 | 8 | export const config = { 9 | api: { 10 | bodyParser: true, 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /pages/api/index.js: -------------------------------------------------------------------------------- 1 | import { home } from 'react-storefront-connector' 2 | 3 | export default async function(req, res) { 4 | res.json(await home(req, res)) 5 | } 6 | -------------------------------------------------------------------------------- /pages/api/p/[productId].js: -------------------------------------------------------------------------------- 1 | import { product } from 'react-storefront-connector' 2 | 3 | export default async function pdp(req, res) { 4 | const { productId } = req.query 5 | return res.json(await product({ id: productId }, req, res)) 6 | } 7 | -------------------------------------------------------------------------------- /pages/api/p/[productId]/suggestions.js: -------------------------------------------------------------------------------- 1 | import { productSuggestions } from 'react-storefront-connector' 2 | 3 | export default async function(req, res) { 4 | const { productId } = req.query 5 | res.json(await productSuggestions(productId, req, res)) 6 | } 7 | -------------------------------------------------------------------------------- /pages/api/p/media.js: -------------------------------------------------------------------------------- 1 | export { productMedia } from 'react-storefront-connector' 2 | 3 | export default async function(req, res) { 4 | const { productId, color } = req.query 5 | res.json(await productMedia({ id: productId, color }, req, res)) 6 | } 7 | -------------------------------------------------------------------------------- /pages/api/routes.js: -------------------------------------------------------------------------------- 1 | import listRoutes from 'react-storefront/server/listRoutes' 2 | 3 | export default async function routes(req, res) { 4 | res.json(listRoutes()) 5 | } 6 | -------------------------------------------------------------------------------- /pages/api/s/[...categorySlug].js: -------------------------------------------------------------------------------- 1 | import { subcategory } from 'react-storefront-connector' 2 | 3 | export default async function plp(req, res) { 4 | // Note: the structure of the query string is controlled by the queryForState prop passed 5 | // to SearchResultsProvider in pages/s/[...categorySlug].js. 6 | const { q, categorySlug: slug, page, sort, _includeAppData, ...others } = req.query 7 | const filters = [] 8 | 9 | for (let [key, values] of Object.entries(others)) { 10 | for (let value of values.split(',')) { 11 | filters.push(`${key}:${value}`) 12 | } 13 | } 14 | 15 | res.json( 16 | await subcategory( 17 | { 18 | q, 19 | slug, 20 | page, 21 | filters: JSON.stringify(filters), 22 | sort, 23 | }, 24 | req, 25 | res 26 | ) 27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /pages/api/search.js: -------------------------------------------------------------------------------- 1 | export { search as default } from 'react-storefront-connector' 2 | -------------------------------------------------------------------------------- /pages/api/session.js: -------------------------------------------------------------------------------- 1 | import { session } from 'react-storefront-connector' 2 | 3 | export default async function(req, res) { 4 | res.json(await session(req, res)) 5 | } 6 | -------------------------------------------------------------------------------- /pages/api/suggestions.js: -------------------------------------------------------------------------------- 1 | import { searchSuggestions } from 'react-storefront-connector' 2 | 3 | export default async function searchSuggestionsPage(req, res) { 4 | const { q } = req.query 5 | res.json(await searchSuggestions(q, req, res)) 6 | } 7 | -------------------------------------------------------------------------------- /pages/appShell.js: -------------------------------------------------------------------------------- 1 | export default function AppShell() { 2 | return null 3 | } 4 | -------------------------------------------------------------------------------- /pages/cart.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Typography from '@material-ui/core/Typography' 3 | import Row from 'react-storefront/Row' 4 | import clsx from 'clsx' 5 | import CartItem from '../components/cart/CartItem' 6 | import { createLazyProps, fetchFromAPI } from 'react-storefront/props' 7 | import { makeStyles } from '@material-ui/core/styles' 8 | import { Grid, Hidden, Divider, Container, Button } from '@material-ui/core' 9 | import { price } from 'react-storefront/utils/format' 10 | import Spacer from 'react-storefront/Spacer' 11 | import Link from 'react-storefront/link/Link' 12 | import { Hbox } from 'react-storefront/Box' 13 | import SessionContext from 'react-storefront/session/SessionContext' 14 | import get from 'lodash/get' 15 | 16 | const styles = theme => ({ 17 | root: { 18 | paddingBottom: '64px', 19 | }, 20 | checkoutPanel: { 21 | backgroundColor: theme.palette.grey['200'], 22 | borderRadius: theme.shape.borderRadius, 23 | padding: `${theme.spacing(2)}px`, 24 | }, 25 | total: { 26 | fontWeight: 'bold', 27 | }, 28 | checkoutButton: { 29 | width: '100%', 30 | }, 31 | docked: { 32 | [theme.breakpoints.down('xs')]: { 33 | fontSize: theme.typography.subtitle1.fontSize, 34 | padding: `${theme.spacing(2)}px`, 35 | position: 'fixed', 36 | left: 0, 37 | bottom: 0, 38 | width: '100%', 39 | zIndex: 10, 40 | borderRadius: '0', 41 | boxShadow: 'none', 42 | }, 43 | }, 44 | }) 45 | 46 | const useStyles = makeStyles(styles) 47 | 48 | export default function Cart(props) { 49 | const classes = useStyles() 50 | const { session, actions } = useContext(SessionContext) 51 | const items = get(session, 'cart.items') 52 | 53 | const handleUpdateQuantity = (product, quantity) => { 54 | actions.updateCart({ 55 | item: product, 56 | quantity, 57 | }) 58 | } 59 | 60 | const handleRemove = product => { 61 | actions.removeCartItem({ 62 | item: product, 63 | }) 64 | } 65 | 66 | return ( 67 | 68 | 69 | 70 | My Cart ({items.length} {items.length === 1 ? 'item' : 'items'}) 71 | 72 | 73 | 74 | 75 | 76 | {items.length ? ( 77 | items.map((product, i) => ( 78 | 84 | )) 85 | ) : ( 86 | There are no items in your cart. 87 | )} 88 | 89 | {items.length === 0 ? null : ( 90 | 91 |
92 | 93 |
94 | 95 | Estimated Total 96 | 97 | Tax calculated in checkout 98 |
99 | 100 | 101 | {price( 102 | items.reduce((a, b) => a + b.quantity * parseFloat(b.price), 0), 103 | { currency: get(session, 'currency') } 104 | )} 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | {items.length === 0 ? null : ( 113 | 114 | 121 | 122 | )} 123 |
124 | 125 | )} 126 | 127 | 128 | 129 | ) 130 | } 131 | 132 | Cart.getInitialProps = createLazyProps(fetchFromAPI) 133 | -------------------------------------------------------------------------------- /pages/checkout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, Typography } from '@material-ui/core' 3 | import { makeStyles } from '@material-ui/core/styles' 4 | 5 | const useStyles = makeStyles(theme => ({ 6 | main: { 7 | display: 'flex', 8 | alignItems: 'center', 9 | flexDirection: 'column', 10 | textAlign: 'center', 11 | margin: theme.spacing(10, 0, 0, 0), 12 | }, 13 | })) 14 | 15 | export default function Checkout() { 16 | const classes = useStyles() 17 | 18 | return ( 19 | 20 |
21 | 22 | Coming soon! 23 | 24 |
25 | 26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, Typography } from '@material-ui/core' 3 | import { makeStyles } from '@material-ui/core/styles' 4 | import useLazyState from 'react-storefront/hooks/useLazyState' 5 | import CmsSlot from 'react-storefront/CmsSlot' 6 | import LoadMask from 'react-storefront/LoadMask' 7 | import Head from 'next/head' 8 | import createLazyProps from 'react-storefront/props/createLazyProps' 9 | import fetchFromAPI from 'react-storefront/props/fetchFromAPI' 10 | 11 | const useStyles = makeStyles(theme => ({ 12 | main: { 13 | display: 'flex', 14 | alignItems: 'center', 15 | flexDirection: 'column', 16 | textAlign: 'center', 17 | margin: theme.spacing(10, 0, 0, 0), 18 | }, 19 | })) 20 | 21 | export default function Index(lazyProps) { 22 | const classes = useStyles() 23 | const [state] = useLazyState(lazyProps) 24 | 25 | return ( 26 | <> 27 | {state.loading ? null : ( 28 | 29 | {state.pageData.title} 30 | 31 | )} 32 | 33 | {state.loading ? ( 34 | 35 | ) : ( 36 |
37 | 38 | {state.pageData.slots.heading} 39 | 40 | {state.pageData.slots.description} 41 |
42 | )} 43 | 44 | 45 | ) 46 | } 47 | 48 | Index.getInitialProps = createLazyProps(options => { 49 | const { res } = options 50 | if (res) res.setHeader('Cache-Control', 'max-age=99999') 51 | return fetchFromAPI(options) 52 | }) 53 | -------------------------------------------------------------------------------- /pages/p/[productId].js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState, useEffect, useRef } from 'react' 2 | import clsx from 'clsx' 3 | import qs from 'qs' 4 | import useLazyState from 'react-storefront/hooks/useLazyState' 5 | import Breadcrumbs from 'react-storefront/Breadcrumbs' 6 | import CmsSlot from 'react-storefront/CmsSlot' 7 | import MediaCarousel from 'react-storefront/carousel/MediaCarousel' 8 | import PWAContext from 'react-storefront/PWAContext' 9 | import { Container, Grid, Typography, Hidden, Button } from '@material-ui/core' 10 | import { Skeleton } from '@material-ui/lab' 11 | import { makeStyles, useTheme } from '@material-ui/core/styles' 12 | import Row from 'react-storefront/Row' 13 | import { Hbox } from 'react-storefront/Box' 14 | import Label from 'react-storefront/Label' 15 | import Rating from 'react-storefront/Rating' 16 | import get from 'lodash/get' 17 | import fetch from 'react-storefront/fetch' 18 | import { fetchLatest, StaleResponseError } from 'react-storefront/utils/fetchLatest' 19 | import SessionContext from 'react-storefront/session/SessionContext' 20 | import AddToCartConfirmation from '../../components/product/AddToCartConfirmation' 21 | import SuggestedProducts from '../../components/product/SuggestedProducts' 22 | import Lazy from 'react-storefront/Lazy' 23 | import TabPanel from 'react-storefront/TabPanel' 24 | import QuantitySelector from 'react-storefront/QuantitySelector' 25 | import ProductOptionSelector from 'react-storefront/option/ProductOptionSelector' 26 | import fetchFromAPI from 'react-storefront/props/fetchFromAPI' 27 | import createLazyProps from 'react-storefront/props/createLazyProps' 28 | 29 | const fetchVariant = fetchLatest(fetch) 30 | 31 | const useDidMountEffect = (func, deps) => { 32 | const didMount = useRef(false) 33 | useEffect(() => { 34 | if (didMount.current) { 35 | func() 36 | } else { 37 | didMount.current = true 38 | } 39 | }, deps) 40 | } 41 | 42 | const styles = theme => ({ 43 | carousel: { 44 | [theme.breakpoints.down('xs')]: { 45 | margin: theme.spacing(0, -2), 46 | width: '100vw', 47 | }, 48 | }, 49 | lightboxCarousel: { 50 | [theme.breakpoints.down('xs')]: { 51 | margin: 0, 52 | width: '100%', 53 | }, 54 | }, 55 | confirmation: { 56 | padding: '2px 0', 57 | }, 58 | dockedSnack: { 59 | [theme.breakpoints.down('xs')]: { 60 | left: '0', 61 | bottom: '0', 62 | right: '0', 63 | }, 64 | }, 65 | docked: { 66 | [theme.breakpoints.down('xs')]: { 67 | fontSize: theme.typography.subtitle1.fontSize, 68 | padding: `${theme.spacing(2)}px`, 69 | position: 'fixed', 70 | left: 0, 71 | bottom: 0, 72 | width: '100%', 73 | zIndex: 10, 74 | borderRadius: '0', 75 | }, 76 | }, 77 | noShadow: { 78 | [theme.breakpoints.down('xs')]: { 79 | boxShadow: 'none', 80 | }, 81 | }, 82 | }) 83 | 84 | const useStyles = makeStyles(styles) 85 | 86 | const Product = React.memo(lazyProps => { 87 | const theme = useTheme() 88 | const [confirmationOpen, setConfirmationOpen] = useState(false) 89 | const [addToCartInProgress, setAddToCartInProgress] = useState(false) 90 | const [state, updateState] = useLazyState(lazyProps, { 91 | pageData: { quantity: 1, carousel: { index: 0 } }, 92 | }) 93 | const classes = useStyles() 94 | const product = get(state, 'pageData.product') || {} 95 | const color = get(state, 'pageData.color') || {} 96 | const size = get(state, 'pageData.size') || {} 97 | const quantity = get(state, 'pageData.quantity') 98 | const { actions } = useContext(SessionContext) 99 | const { loading } = state 100 | 101 | // This is provided when is wrapped around product links 102 | const { thumbnail } = useContext(PWAContext) 103 | 104 | // Adds an item to the cart 105 | const handleSubmit = async event => { 106 | event.preventDefault() // prevent the page location from changing 107 | setAddToCartInProgress(true) // disable the add to cart button until the request is finished 108 | 109 | try { 110 | // send the data to the server 111 | await actions.addToCart({ 112 | product, 113 | quantity, 114 | color: color.id, 115 | size: size.id, 116 | }) 117 | 118 | // open the confirmation dialog 119 | setConfirmationOpen(true) 120 | } finally { 121 | // re-enable the add to cart button 122 | setAddToCartInProgress(false) 123 | } 124 | } 125 | 126 | const header = ( 127 | 128 | 129 | {product ? product.name : } 130 | 131 | 132 | {product.priceText} 133 | 134 | 135 | 136 | ) 137 | 138 | // Fetch variant data upon changing color or size options 139 | useDidMountEffect(() => { 140 | const query = qs.stringify({ color: color.id, size: size.id }, { addQueryPrefix: true }) 141 | fetchVariant(`/api/p/${product.id}${query}`) 142 | .then(res => res.json()) 143 | .then(data => { 144 | return updateState({ ...state, pageData: { ...state.pageData, ...data.pageData } }) 145 | }) 146 | .catch(e => { 147 | if (!StaleResponseError.is(e)) { 148 | throw e 149 | } 150 | }) 151 | }, [color.id, size.id]) 152 | 153 | return ( 154 | <> 155 | 156 | 157 |
158 | 159 | 160 | 161 | {header} 162 | 163 | 170 | 171 | 172 | 173 | 174 | 175 |
{header}
176 | 177 | {product ? ( 178 | <> 179 | 180 | 181 | {color.text} 182 | 183 | 187 | updateState({ ...state, pageData: { ...state.pageData, color: value } }) 188 | } 189 | strikeThroughDisabled 190 | optionProps={{ 191 | showLabel: false, 192 | }} 193 | /> 194 | 195 | ) : ( 196 |
197 | 198 | 199 | 200 | 201 | 202 | 203 |
204 | )} 205 | 206 | 207 | {product ? ( 208 | <> 209 | 210 | 211 | {size.text} 212 | 213 | 218 | updateState({ ...state, pageData: { ...state.pageData, size: value } }) 219 | } 220 | /> 221 | 222 | ) : ( 223 |
224 | 225 | 226 | 227 | 228 | 229 | 230 |
231 | )} 232 | 233 | 234 | 235 | 236 | 239 | updateState({ ...state, pageData: { ...state.pageData, quantity: value } }) 240 | } 241 | /> 242 | 243 | 244 | 245 | 257 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | {product.description} 273 | {product.specs} 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 |
282 | 283 | 284 | ) 285 | }) 286 | 287 | Product.getInitialProps = createLazyProps(fetchFromAPI) 288 | 289 | export default Product 290 | -------------------------------------------------------------------------------- /pages/s/[...categorySlug].js: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import { Typography, Grid, Container, Hidden } from '@material-ui/core' 3 | import { makeStyles, useTheme } from '@material-ui/core/styles' 4 | import ResponsiveTiles from 'react-storefront/ResponsiveTiles' 5 | import ProductItem from '../../components/product/ProductItem' 6 | import ShowMore from 'react-storefront/plp/ShowMore' 7 | import Head from 'next/head' 8 | import BackToTop from 'react-storefront/BackToTop' 9 | import { Skeleton } from '@material-ui/lab' 10 | import { Hbox } from 'react-storefront/Box' 11 | import Breadcrumbs from 'react-storefront/Breadcrumbs' 12 | import LoadMask from 'react-storefront/LoadMask' 13 | import useSearchResultsStore from 'react-storefront/plp/useSearchResultsStore' 14 | import Filter from 'react-storefront/plp/Filter' 15 | import SearchResultsProvider from 'react-storefront/plp/SearchResultsProvider' 16 | import ProductOptionSelector from 'react-storefront/option/ProductOptionSelector' 17 | import FilterButton from 'react-storefront/plp/FilterButton' 18 | import SortButton from 'react-storefront/plp/SortButton' 19 | import Fill from 'react-storefront/Fill' 20 | import fetchFromAPI from 'react-storefront/props/fetchFromAPI' 21 | import createLazyProps from 'react-storefront/props/createLazyProps' 22 | 23 | const useStyles = makeStyles(theme => ({ 24 | sideBar: { 25 | margin: theme.spacing(0, 4, 0, 0), 26 | width: 275, 27 | }, 28 | sortButton: { 29 | [theme.breakpoints.down('xs')]: { 30 | flex: 1, 31 | }, 32 | }, 33 | total: { 34 | marginTop: theme.spacing(1), 35 | }, 36 | })) 37 | 38 | const Subcategory = lazyProps => { 39 | const [store, updateStore] = useSearchResultsStore(lazyProps) 40 | const classes = useStyles() 41 | const theme = useTheme() 42 | let { pageData, loading } = store 43 | 44 | if (pageData.isLanding) { 45 | return ( 46 | <> 47 | 48 | 49 | {!loading ? ( 50 | 57 | {pageData.name} 58 | 59 | ) : ( 60 | 61 | )} 62 | 63 | {!loading && } 64 | 65 | ) 66 | } 67 | 68 | // Here is an example of how you can customize the URL scheme for filtering and sorting - /s/1?color=red,blue=sort=pop 69 | // Note that if you change this, you also need to change pages/api/[...categorySlug].js to correctly handle the query parameters 70 | // you send it. 71 | const queryForState = useCallback(state => { 72 | const { filters, page, sort } = state 73 | const query = {} 74 | 75 | for (let filter of filters) { 76 | const [name, value] = filter.split(':') 77 | 78 | console.log(name, value) 79 | 80 | if (query[name]) { 81 | query[name] = `${query[name]},${value}` 82 | } else { 83 | query[name] = value 84 | } 85 | } 86 | 87 | if (query.more) { 88 | delete query.more 89 | } 90 | 91 | if (page > 0) { 92 | query.page = page 93 | } else { 94 | delete query.page 95 | } 96 | 97 | if (sort) { 98 | query.sort = sort 99 | } else { 100 | delete query.sort 101 | } 102 | 103 | console.log('query', query) 104 | 105 | return query 106 | }, []) 107 | 108 | return ( 109 | <> 110 | 111 | 112 | 113 | {loading ? null : {pageData.title}} 114 | 115 | 116 | 117 |
118 | 119 | {/* Display the filters for desktop screen sizes */} 120 | 121 | 122 |
123 | 124 | 125 | 126 | 127 | {!loading ? ( 128 | 129 | {pageData.name} 130 | 131 | ) : ( 132 | 133 | )} 134 | 135 | 136 | 137 | {/* Display a button that opens the filter drawer on mobile screen sizes */} 138 | 139 | 140 | 141 | 142 | {/* The sort button is automatically responsive. It will show as a dropdown on desktop, and open a drawer on mobile */} 143 | 144 | 145 | 146 | 147 | {loading ? ( 148 | 154 | ) : ( 155 | 156 | 157 | {pageData.total} total {pageData.total === 1 ? 'item' : 'items'} 158 | 159 | 160 | )} 161 | 162 | 163 | {!loading ? ( 164 | 165 | {pageData.products.map((product, i) => ( 166 | 167 | ))} 168 | 169 | ) : ( 170 | 171 | {(() => { 172 | const tiles = [] 173 | for (let i = 0; i < 10; i++) { 174 | tiles.push( 175 |
179 | 180 | 181 | 182 | 183 | 192 | 193 | 194 |
195 | ) 196 | } 197 | return tiles 198 | })()} 199 | 200 | )} 201 | 202 | 203 | {!loading && } 204 | 205 | 206 | 207 | 208 | 209 | 210 | ) 211 | } 212 | 213 | Subcategory.getInitialProps = createLazyProps(opts => { 214 | const { res } = opts 215 | if (res) res.setHeader('Cache-Control', 'max-age=99999') 216 | return fetchFromAPI(opts) 217 | }) 218 | 219 | export default Subcategory 220 | -------------------------------------------------------------------------------- /pages/search.js: -------------------------------------------------------------------------------- 1 | import Subcategory from './s/[...categorySlug]' 2 | import fetchFromAPI from 'react-storefront/props/fetchFromAPI' 3 | import createLazyProps from 'react-storefront/props/createLazyProps' 4 | 5 | Subcategory.getInitialProps = createLazyProps(opts => { 6 | opts.asPath = `/search?${opts.asPath.split('?')[1]}` 7 | return fetchFromAPI(opts) 8 | }) 9 | 10 | export default Subcategory 11 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storefront-foundation/react-storefront-starter-app/8e70b3b132865e3489cfa71cf0e954dd7dc475f1/public/favicon.ico -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | if (process.env.preact === 'true') { 2 | const moduleAlias = require('module-alias') 3 | moduleAlias.addAlias('react', 'preact/compat') 4 | moduleAlias.addAlias('react-dom', 'preact/compat') 5 | moduleAlias.addAlias('react-ssr-prepass', 'preact-ssr-prepass') 6 | } 7 | 8 | const express = require('express') 9 | const port = parseInt(process.env.port, 10) || 3000 10 | const dev = process.env.NODE_ENV !== 'production' 11 | const path = require('path') 12 | const { parse } = require('url') 13 | const next = require('next') 14 | const app = next({ dev }) 15 | const handle = app.getRequestHandler() 16 | 17 | app.prepare().then(() => { 18 | const server = express() 19 | 20 | server.get('/service-worker.js', (req, res) => { 21 | app.serveStatic(req, res, path.join(__dirname, '.next', 'static', 'service-worker.js')) 22 | }) 23 | 24 | server.get('/pages-manifest.json', (req, res) => { 25 | app.serveStatic(req, res, path.join(__dirname, '.next', 'server', 'pages-manifest.json')) 26 | }) 27 | 28 | server.all('*', (req, res) => { 29 | const parsedUrl = parse(req.url, true) 30 | handle(req, res, parsedUrl) 31 | }) 32 | 33 | server.listen(port, err => { 34 | if (err) throw err 35 | console.log(`> Ready on http://localhost:${port}`) 36 | }) 37 | }) 38 | -------------------------------------------------------------------------------- /sw/service-worker.js: -------------------------------------------------------------------------------- 1 | import { configureServiceWorker } from 'react-storefront/sw' 2 | 3 | const maxAgeSeconds = 60 * 60 // 1 hour 4 | 5 | configureServiceWorker({ 6 | api: [ 7 | { path: '/api/p/[productId]', maxAgeSeconds }, 8 | { path: '/api/s/[...categorySlug]', maxAgeSeconds }, 9 | { path: '/api', maxAgeSeconds }, 10 | ], 11 | }) 12 | --------------------------------------------------------------------------------