The widget consists of two HTML tags - one
div and one
script. It calls the Open Meal API to get the menu from a distributor and displays it in a table. It can be configured in several ways (se Configuration below) and it is possible to include several widgets showing the menu for different distributors on one page.
<div id="openMealWidget" class="openMealWidget" data-openmealurl="https://skolmaten.se/api/openmeal/v2/meals.json?distributorID=5323089923538944"></div> <script src="https://orebrokommun.github.io/Open-Meal-Information/js/widget.js" id="openMealWidgetScript" data-widgets="openMealWidget"></script>
The code above results in this table:
With the following wizard you can get the HTML tags needed to be included on your site to show the menu for a specific distributor.
Include this in your HTML where you want to show the menu:
This is what the widget will look like:
This wizard is built on the Open Meal API, just as the wiget itself is. Unfourtunatly we are having some problems with Mashies implementation of the Open Meal API at the moment, which we are working on.
The wizard above produces the bare minimum code needed to display the menu widget. It is possible to add several different attributes to the
- data-ical - true/false (defaults to false if not included), if the widget should include a button with a link to the menus iCalendar feed
- data-language - en/sv (defaults to en), the language to be used in the table headers
- data-days - integer (defaults to 5), the number of days to show the menu for. Note that the maximum is the number of days returned for that distributors menu.
- data-openmealurl - the URL to the Open Meal API for the distributor in question. The easiest way to find this is using the wizard above.
script tag also have some attributes...
- data-widgets - a comma separated list of the id's of the widget divs on the page
Example: Two widgets on the same page
<div id="openMealWidget1" class="openMealWidget" data-language="en" data-openmealurl="http://meny.dinskolmat.se/api/openmeal/v2/meals.json?distributorID=5419206728220672"></div> <div id="openMealWidget2" class="openMealWidget" data-ical="true" data-days="3" data-language="sv" data-openmealurl="http://meny.dinskolmat.se/api/openmeal/v2/meals.json?distributorID=5323089923538944"></div> <script src="https://orebrokommun.github.io/Open-Meal-Information/js/widget.js" id="openMealWidgetScript" data-widgets="openMealWidget1, openMealWidget2"></script>
The styling of the widget is based on Bootstrap classes, but it is easy to style even if you are not using Bootstrap. The widget is just a table within a div with the class openMealWidget and can be styled in any way needed using CSS.
License and customization
This widget and it's code is available under Creative Commons Zero license and has no guarantees. Use it, copy it and customize it as needed.