Table of Contents
Liquid Templates
Built on the Liquid markup language, Liquid templates are what tell SandwichBoard how to render restaurants' web sites. What follows is a detailed description of each template found in a SandwichBoard theme.
layout.liquid
This is the outermost template for a site. This is where the restaurant name, logo, site navigation, and copyright information would typically go. All other templates and pages are rendered inside it and are called by {{content_for_layout}}.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Andreas Viklund - http://andreasviklund.com/ and SandwichBoard - http://sandwichboard.com/" />
<title>{{ title }} - {{ restaurant.name }}</title>
{{ 'site' | stylesheet }}
{{ 'page' | stylesheet }}
{{ 'print' | stylesheet: 'print' }}
</head>
<body>
<div id="restaurant-name"><a href="/"><h1>{{ restaurant.name | upcase }}</h1></a></div>
<div id="wrapper">
<div id="left">
<ul class="navigation">
<li><a href="/">Home</a></li>
{% if restaurant.has_a_single_menu %}
<li><a href="{{ restaurant.menu.url }}">Menu</a></li>
{% endif %}
{% if restaurant.has_a_single_location %}
<li><a href="{{ restaurant.location.url }}">Location</a></li>
{% endif %}
{% if restaurant.has_multiple_locations %}
<li><a href="/locations">Locations</a></li>
{% endif %}
{% for page in pages %}
{% if page.url != '/' %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% if restaurant.has_multiple_menus %}
<div id="menu-navigation">
<h2>Menus</h2>
<ul class="navigation">
{% for menu in restaurant.menus %}
<li><a href="{{ menu.url }}">{{ menu.name }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div id="right">
{% if restaurant.has_a_single_location %}
<div id="restaurant-address">{{ restaurant.location.address }} {% if restaurant.location.phone %}• {{ restaurant.location.phone }}{% endif %}</div>
{% endif %}
<h1>{{ title }}</h1>
<div id="content">
{{ content_for_layout }}
</div>
<div id="copyright-credits">Copyright © {{ restaurant.name }}. All Rights Reserved.<br />
Original Design by <a href="http://andreasviklund.com/">Andreas Viklund</a>. Powered by <a href="http://sandwichboard.com/">SandwichBoard</a>.
</div>
</div>
</div>
{{ restaurant.stats_tracker }}
</body>
</html>
menu.liquid
Every menu's web page is generated by this template. You use the menu Liquid drop and its attributes to build the resulting page detailing the menu.
Example:
<div class="menu">
{% if menu.description %}<div class="menu-description">{{ menu.description | simple_format }}</div>{% endif %}
{% for section in menu.sections %}
<div class="menu-section">
<h2 class="menu-section-name">{{ section.name }}</h2>
{% if section.description %}<div class="menu-section-description">{{ section.description | simple_format }}</div>{% endif %}
{% for item in section.items %}
<div class="menu-item">
<h3 class="menu-item-name">{{ item.name }}</h3>
{% if item.description %}<div class="menu-item-description">{{ item.description | simple_format }}</div>{% endif %}{% if item.price %} <span class="menu-item-price">{{ item.price | number_to_currency_with_cents }}</span>{% endif %}
<ul class="menu-item-variations">
{% for variation in item.variations %}
<li class="menu-item-variation"><span class="menu-item-variation-name">{{ variation.name }}</span>{% if variation.price %} <span class="menu-item-variation-price">{{ variation.price | number_to_currency_with_cents }}</span>{% endif %}</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
error.liquid
If a Liquid template generates an error or if a user navigates to a page that doesn't exist, this template is used to tell the user that something has gone awry. You can access the Liquid error message from this template.
Example:
<h1>An error has occurred</h1>
<p>{{ message }}</p>
locations.liquid
This template is used to build the web page that displays a concise list of all a restaurant's locations. You use the locations Liquid collection, its location Liquid drops, and their attributes to build the resulting page.
Example:
<table class="locations">
{% for location in locations %}
<tr class="locations-location"><td>
{% comment uncomment if images have been uploaded for each location %}
<div class="locations-image">
<img src="/assets/{{ location.name | handleize }}_thumb.png" />
</div>
</td><td>
{% endcomment %}
<div class="locations-location-information">
<a href="{{ location.url }}" class="location-name">{{ location.name }}</a><br />
<div class="locations-location-address">
<div class="adr">
<span class="street-address">{{ location.street_address }}</span>,
<span class="locality">{{ location.city }}</span>,
<span class="region">{{ location.state }}</span>
<span class="postal-code">{{ location.zip }}</span>
</div>
</div>
<div class="locations-location-telephone-fax">
{% if location.phone %}
<div class="tel">
<span class="type">Phone</span>:
<span class="value">{{ location.phone }}</span>
</div>
{% endif %}
</div>
</div>
</td></tr>
{% endfor %}
</table>
location.liquid
Every restaurant location's web page is generated by this template. You use the location Liquid drop and its attributes to build the resulting page detailing the location and its hours of operation.
Example:
<div class="location">
{% if location.gmap_url %}
<div class="location-map">
<iframe src="{{ location.gmap_url }}" frameborder="0" scrolling="no"></iframe><br />
<small><a href="http://maps.google.com/maps?hl=en&q={{ restaurant.name }} {{ location.address }}">View Larger Map</a></small>
</div>
{% endif %}
{% comment uncomment if images have been uploaded for each location %}
<div class="location-image">
<img src="/assets/{{ location.name | handleize }}_thumb.png" />
</div>
{% endcomment %}
<div class="location-information">
<div class="location-address">
<h2>Address</h2>
<div class="adr">
<div class="street-address">{{ location.street_address }}</div>
<span class="locality">{{ location.city }}</span>,
<span class="region">{{ location.state }}</span>
<span class="postal-code">{{ location.zip }}</span>
</div>
</div>
<div class="location-email-telephone-fax">
{% if location.email %}
<div class="email">
<span class="type">Email</span>:
<span class="value"><a href="mailto:{{ location.email }}">{{ location.email }}</a></span>
</div>
{% endif %}
{% if location.phone %}
<div class="tel">
<span class="type">Phone</span>:
<span class="value">{{ location.phone }}</span>
</div>
{% endif %}
{% if location.fax %}
<div class="tel">
<span class="type">Fax</span>:
<span class="value">{{ location.fax }}</span>
</div>
{% endif %}
</div>
{% for schedule in location.schedules %}
<div class="location-schedule">
<h2 class="location-schedule-name">{{ schedule.name }}</h2>
<table>
{% for entry in schedule.entries %}
<tr class="location-schedule-entry">
<td class="location-schedule-entry-days">{{ entry.days }}</td><td class="location-schedule-entry-hours">{{ entry.hours }}</td>
</tr>
{% endfor %}
</table>
</div>
{% endfor %}
{% if location.notes %}
<div class="location-notes">
<h2>Additional Information</h2>
{{ location.notes | simple_format }}
</div>
{% endif %}
</div>
</div>
