Posting an update because I’ve found a solution that works for us:
As I said in my initial post, we use Xibo for our menu signage, so I can’t speak to other digital signs, but Xibo allows for embedding of web pages and I’m sure most others do, too.
What I did was create a web page for each menu category, ie breakfast.html, sandwiches.html, etc.
Then it was just a matter of pulling the info from our menu that I wanted to appear on our menu sign. For now, I just wanted Item Name, Item Price, and Item Description. Formatting is a matter of personal preference, so I won’t post my full page code, but I’ll post the relevant bits:
<div id = "breakfast-item"></div>
<script>
$.get('<WEBSITE>/breakfast_slug', function(data){
var $data= $(data);
var $cur = $data.find(".menu-item");
$cur.each(function(){
var $item = $(this).find('.menu-name');
var $desc = $(this).find('.menu-desc');
var $price = $(this).find('.menu-price');
.
. Skipping HTML formatting of the $item, $desc, and $price variables
.
$( "#breakfast-item" )
.append($item.text())
.append($price.text())
.append($desc.text());
});
});
</script>
If you wanted to include other things, such as pictures or allergen info, you can do this by using the relevant class call (ie, ‘.allergens’ or ‘.menu-item-image’ if you have item pictures and want to include them). I stripped my data down to raw text then formatted it myself but you can call the preformatted data if you want by leaving off the “.text” on the append statements. Once I formatted the page the way I wanted it, including formatting to fit the webpage embed widget in Xibo, I simply set up a widget for each menu category in Xibo and pointed them to the appropriate category pages.
