mc-menu-widget
How to install:
Using npm
This is the recommended way. To install, just do this:
npm i --save @menucloud/mc-menu-widget
Out of the box, what can I do?
Just add the dependency here and usage here:
<script src="node_modules/@menucloud/mc-menu-widget/dist/mc-menu-widget.js"></script>
<mc-menu-widget
secret="secret-key"
key="api-key"></mc-menu-widget>
The parameters:
- secret: secret key
- key: api key
Todo: Because this is a test, It needs to define more parameters (like booking-type or menu-id).
How to build (for developing)
Out of the box, what do I see
- demo - for manual testing and demo purposes
- index.html - a demo on how to use the file
- published.json - created using the command `npm run create-simulation`. This simulates the JSON response of the menucloud API
- dist - distribution purposes when installed on npm
- vendor - this is for demo purposes only, polyfills folder to make it work on IE11, Safari 9, and 10, Edge and Firefox
- mc-menu-widget.html - when you want to use `<link rel="import">`
- mc-menu-widget.js - the bundled version
- simulation - folder that houses the necessary templates and styles to be transformed into the published.json.
- components - houses all component templates that can be modified
- data - houses the data component of the simulated json
- menu.json - mimics a collection of menus to be loaded to the menu widget
- style - houses all styles in (currently) scss format
- components - all component styles that can be modifed
- menu.scss - example definition the global default style of all menus
- child-theme.scss - example definition of a child theme
- theme.json - links menu.scss and child-theme.scss to the global theme and a specifc menu theme respectively.
- index.js - simulation compiler. Run when `npm run create-simulation` is called
- src - contains all code for the widget to work
- components - all component logic
- mixins - contains reusable methods as extensions for the components
- mc-menu - contains the methods for getting and updating the mc-menu-widget state
- styles - contains the default style of the mc-menu-widget
- utils - extra libraries the needed by the widget
- mc-menu-widget.js - main source file
- webpack.config.js - bundler
Install dependencies...
npm i
Once the dependencies have be installed, You need to run 3 terminals (for now) to bundle/watch, serve it on localhost, and update the published.json.
1st terminal would bundle/watch the project
npm run watch
2nd terminal would run the http-server
on root project
http-server .
And then you can go to localhost:8080/demo
to see a working widget
If you made changes inside the simulation folder, you need to run
npm run create-simulation
Menu widget Attributes
- no-fixed-price - Boolean, if set to true, the fixed price won't show up
- key - String, is the key assigned to the client
- secret - String, the secret string to access the server
- business-id - String, client business id
- published-id - String, the id of the published menus
- menus - Array, an array of menus ids that will show up inside the widget
- dev - Boolean, if true the widget will fetch data from the dev server
- local - Boolean, if true, the widget will fetch data from the local server
- test - Boolean, if true the widget will use the simulation files
- menuid - String, the id of the menu that needs to be printed
- print - Boolean, if true, it will fetch the menu specified in the menuid attribute in order to print it
- print-local - Boolean, if true will fetch the menu specified in the menuid attribute in order to print it from the local server
Todo
- Use some form of watching mechanism to change published.json when there are changes in simulation folder
- can use gulp but don't use flatten the node_modules.
- If it is possible, transform this to using rollup instead of webpack