|
5 | 5 | [](https://app.netlify.com/sites/epcc-ref-store/deploys) |
6 | 6 | [](https://github.com/elasticpath/epcc-react-pwa-reference-storefront) |
7 | 7 | [](https://www.gnu.org/licenses/gpl-3.0) |
| 8 | +[](https://shields.io/) |
8 | 9 | [](https://github.com/elasticpath/epcc-react-pwa-reference-storefront/issues) |
9 | 10 | [](#contributors-) |
10 | 11 | [](https://twitter.com/intent/follow?screen_name=elasticpath) |
|
13 | 14 |
|
14 | 15 | The Elastic Path Commerce Cloud REACT PWA Reference Storefront is a flexible e-commerce website built on Elastic Path’s RESTful e-commerce API. The storefront uses the e-commerce capabilities provided by Elastic Path Commerce Cloud and gets data in a RESTful manner. |
15 | 16 |
|
16 | | -The storefront uses the [Elastic Path Commerce Cloud JavaScript SDK](https://github.com/moltin/js-sdk) for all Elastic Path Commerce Cloud API requests, and [Elastic Path Commerce Cloud Embeddable Cart + Checkout](https://github.com/moltin/shopkit) for the Cart and Checkout experiences. |
| 17 | +The storefront uses the [Elastic Path Commerce Cloud JavaScript SDK](https://github.com/moltin/js-sdk) for all Elastic Path Commerce Cloud API requests. For the cart and checkout experiences, the storefront uses [Elastic Path Commerce Cloud Embeddable Cart + Checkout](https://github.com/moltin/shopkit). |
17 | 18 |
|
18 | | -> 💳 Use the test card 4242 4242 4242 4242, any future expiry date, and any CVC below to checkout. |
| 19 | +You can try out a [live instance of the Reference Storefront](https://epcc-reference.elasticpath.com/). |
19 | 20 |
|
20 | | -[Demo](https://epcc-reference.elasticpath.com/) |
| 21 | +> 💳 To check out, use the test card number `4242 4242 4242 4242`, any future expiry date, and any three-digit Card Verification Code (CVC). |
21 | 22 |
|
22 | 23 | ## Documentation 📖 |
23 | 24 |
|
24 | | -### Prerequisites |
25 | | - |
26 | | -Before you begin, ensure that you have the following accounts set up: |
27 | | - |
28 | | -- [Elastic Path Commerce Cloud account](https://dashboard.elasticpath.com/login) |
29 | | -- [Stripe account](https://dashboard.stripe.com/) - Stripe is used as the payment gateway. From your [Dashboard](https://dashboard.elasticpath.com), configure Stripe as the payment gateway. |
30 | | -- [Algolia account](https://www.algolia.com/) - Algolia is used for search functionality to display search results, facets, and filtering. |
31 | | - |
32 | | -### Development tools |
33 | | - |
34 | | -An Elastic Path Commerce Cloud REACT PWA Reference Storefront development environment requires the following software: |
35 | | - |
36 | | -- [Git](https://git-scm.com/downloads) |
37 | | -- [Node.js](https://nodejs.org/en/download/) |
38 | | -- [Yarn](https://yarnpkg.com/en/) |
39 | | -- [Visual Studio Code](https://code.visualstudio.com/) with the following extensions: |
40 | | - - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) |
41 | | - - [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |
42 | | -- **Windows Only:** [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/about) |
43 | | - |
44 | | -### Knowledge Requirements |
45 | | - |
46 | | -To customize and extend the storefront, you need knowledge in the following technologies: |
47 | | - |
48 | | -- [React](https://reactjs.org/) |
49 | | -- [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) |
50 | | -- [sass](https://sass-lang.com/) |
51 | | - |
52 | | -### Start Building the Storefront |
53 | | - |
54 | | -**Note**: If you are running a Windows environment, launch the Windows Subsystem for Linux application and perform the following steps from the console window. |
55 | | - |
56 | | -```bash |
57 | | -# Clone the Git repository |
58 | | -git clone https://github.com/elasticpath/epcc-react-pwa-reference-storefront.git |
59 | | - |
60 | | -# Go into the cloned directory |
61 | | -cd epcc-react-pwa-reference-storefront |
62 | | - |
63 | | -# Install all the dependencies for all sub-project and create necessary symlinks in-between them |
64 | | -yarn |
65 | | - |
66 | | -# Configure the ./src/config.ts file. |
67 | | -# For more information, see Configuration Parameter Descriptions. |
68 | | - |
69 | | -# Start the app in development mode |
70 | | - |
71 | | -# Run the main application: |
72 | | -yarn start |
73 | | - |
74 | | -# Builds the app for production to the build folder: |
75 | | -yarn build |
76 | | -``` |
77 | | - |
78 | | -## Configuration Parameter Descriptions ⚙️ |
79 | | - |
80 | | -Parameters that require configuration are in the `./src/config.ts` file: |
81 | | - |
82 | | -| Parameter| Importance|Type|Description| |
83 | | -|--|--|--|--| |
84 | | -|`clientId`| Required| String| The Client ID of your store.| |
85 | | -|`stripeKey`| Required| String| Stripe publishable API key.| |
86 | | -|`categoryPageSize`| Required| String| Maximum number of products to display on a category page.| |
87 | | -|`maxCompareProducts`| Required| String| Maximum number of products to display in compare view.| |
88 | | -|`compareKeys`| Required| Array| An array of all product attributes to display in compare view.| |
89 | | -|`algoliaAppId`| Required| String| Algolia application identifier.| |
90 | | -|`algoliaApiKey`| Required| String| Algolia API key used to read records.| |
91 | | -|`algoliaIndexName`| Required| String| Name of Algolia index used for search functions.| |
| 25 | +- [REACT PWA Reference Storefront Documentation](https://documentation.elasticpath.com/commerce-cloud/docs/developer/get-started/reference-storefront.html) |
92 | 26 |
|
93 | 27 | ## Contributors ✨ |
94 | 28 |
|
|
0 commit comments