Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chec/example-store-boilerplate
Quick start boilerplate using the Commerce.js SDK to render product data into pages. This eCommerce template includes pages for storefront, cart, and checkout. Basic styling with Bootstrap.
https://github.com/chec/example-store-boilerplate
boilerplate-template bootstrap checkout commercejs ecommerce javascript starter-template
Last synced: 1 day ago
JSON representation
Quick start boilerplate using the Commerce.js SDK to render product data into pages. This eCommerce template includes pages for storefront, cart, and checkout. Basic styling with Bootstrap.
- Host: GitHub
- URL: https://github.com/chec/example-store-boilerplate
- Owner: chec
- License: bsd-3-clause
- Created: 2019-11-28T00:08:33.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T05:18:02.000Z (over 1 year ago)
- Last Synced: 2024-04-24T12:02:51.115Z (7 months ago)
- Topics: boilerplate-template, bootstrap, checkout, commercejs, ecommerce, javascript, starter-template
- Language: Handlebars
- Homepage:
- Size: 3.61 MB
- Stars: 6
- Watchers: 4
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Commerce.js boilerplate
Use this boilerplate to generate a bare-bones example storefront + cart + checkout using Commerce.js.
Use the test data provided, or add your Chec account's public API key to pull product data.
## Requirements
You will need the following to run this store:
* NodeJS, v8/10 or newer
* Yarn, or npm
## Getting started
To run the store (from your command line):
* Clone this project, e.g. `git clone https://github.com/chec/example-store-boilerplate.git`
* Navigate into the folder, e.g. `cd example-store-boilerplate`
* Install the dependencies, e.g. `yarn` or `npm install`
* Create a `.env` file (you can use `.env.example` as a template) and insert your Chec public key as `MIX_CHEC_API_KEY`
* Start the dev server, e.g. `yarn hot` or `npm run hot`
This will start a local server running on http://localhost:8080, which you can use to test it out.
## How it works
This store has a couple of basic HTML pages (see `public/index.html` for example) which load up some JavaScript and
CSS. From here we use a series of JavaScript functions (see `src/js/store.js`) to communicate with the
[Commerce.js SDK](https://github.com/chec/commerce.js) and render products and cart information on the page.
These calls are often wrapped in jQuery AJAX requests, and the results are passed through
[Handlebars](https://handlebarsjs.com/) templates in order to keep the dynamic requests templated for the examples.
Here are the libraries and tools we use in this example:
* CSS: Bootstrap, with some custom SCSS
* JavaScript: a mix of vanilla/ES6 and jQuery, compiled with Laravel Mix
* Markup: Standard HTML, with dynamic templates using Handlebars
* Build: Node.js with Yarn (or NPM)
Everything you see in this repository is an example of how you could use Commerce.js in your own project. You are
of course free to modify the code in this repository as you please. Commerce.js can be implemented into any frontend
framework. For more information, see [the Commerce.js documentation](https://commercejs.com/docs).
## Issues
If you find any problems with this example store, please feel free to raise an issue on
[our GitHub repository](https://github.com/chec/example-store-boilerplate/issues). Pull requests are also welcomed!
## License
BSD-3-Clause - see [LICENSE.md](LICENSE.md).
## ⚠️ Note
### This repository is no longer maintained
However, we will accept issue reports and contributions for this repository. See the [contribute to the commerce community](https://commercejs.com/docs/community/contribute) page for more information on how to contribute to our open source projects. For update-to-date APIs, please check the latest version of the [API documentation](https://commercejs.com/docs/api/).