BentoBox

The BentoBox2 Developer Hub

Welcome to the BentoBox2 developer hub. You'll find comprehensive guides and documentation to help you start working with BentoBox2 as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Developer Documentation

Code Snippets

These code snippets are designed to serve as starting points to build Templates using either the Bootstrap (most examples) or Foundation front-end frameworks.

Remember to properly set up your .config file so that the appropriate Engine is used to expose the required variables.

Navigation Items

{% for item in navs.main %}
  <li class="{% if current.name == item.name %}active{% endif %}">
  	<a href="{{ item.url }}">{{ item.name }}</a>
  </li>
{% endfor %}
{
    "theme": {
        "name": "Broth (Boilerplate theme)",
        "author": "The BentoBox Team"
    },
    "navs": [
      {
        "name": "Main Navigation",
        "slug": "main"
      }
    ]
}

Blog

<!--
  Blog Snippet Example
  (compatible with Twitter Bootstrap)
-->

<div class="container">
  <div class="row">

    {% for post in boxes.blog.all %}
    <div class="col-sm-12">
      <h5>{{ post.name }}</h5>
      <div class="row">
        <div class="col-sm-4">
          {{ post.date|date("%B %d, %Y") }}
        </div>
        <div class="col-sm-8">
        {{ post.content }}
        </div>
      </div>
    </div>
    {% endfor %}

    {% if boxes.blog.all|length == 0 %}
    <em>Add blog post to see posts here</em>
    {% endif %}

  </div>
</div>
{
  "name": "Blog",
  "wireframe": [
    "boxes-blog"
  ]
}
{
	"engine": "blog"
}

Requires blog Engine

Press

Requires press Engine

<!--
  Press Snippet Example
  (compatible with Twitter Bootstrap)
-->
  <div class="container">
    <div class="row">
      {% for article in boxes.press.all %}
        <div class="col-md-3 col-sm-4 press-box">
          <a href="{{ article.external_url }}" target="_blank">
            {% if article.image %}
              <div class="press-image" style="background-image:url('{{ article.image }}')">
              </div>
            {% endif %}
            <h3>{{ article.name }}</h3>
            <a href="{{ article.external_url }}" class="press-source" target="_blank">{{ article.source }}</a>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
/*
  Press Snippet Example
  (compatible with Twitter Bootstrap)
*/

.press-box {margin-bottom: 25px;}
.press-box .container {position: relative; padding: 0;}
.press-box .container {
  height: 100%;
  @media (min-width: $screen-sm-min) {
    height: 450px;
  }
}
.press-box .press-image {width: 100%; height: 215px; background-size: cover; border: none !important;}
.press-box h3 {font-size: 30px; padding-top:20px; margin-top: 0;}
.press-box .press-source {padding-top: 20px;}
{
  "name": "Press",
  "wireframe": [
    "boxes-press"
  ]
}
{
	"engine": "press"
}

Team

Requires team engine and assigned categories for Team members

<!--
  Team by Category Snippet Example
  (compatible with Twitter Bootstrap)
-->

<div class="container">
  {% with categories = boxes.team.by_category_slug %}
    {% for category in categories %}
      {% if categories[category].all|list|length > 0 %}
        {% if categories[category].slug != 'uncategorized' %}
        <div class="row">
          <h2 class="col-sm-12">{{categories[category].name}}</h2>
        </div>
        {% endif %}

        {% for group in categories[category].all|batch(3) %}
          <div class="row">
            {% for person in group %}
              <article class="col-sm-4">
                <h2>{{ person.name }}</h2>

                {% if person.title %}
                  <h4>{{ person.title }}</h4>
                {% endif %}
                {% if person.bio %}
                  <div class="wysiwyg">{{ person.bio|safe }}</div>
                {% endif %}
              </article>
            {% endfor %}
          </div>
        {% endfor %}

      {% endif %}
    {% endfor %}
  {% endwith %}
</div>
{
  "name": "Team",
  "wireframe": [
    "boxes-team"
  ]
}
{
	"engine": "team",
  has_categories: true
}

Itemized Menus

Requires menus Engine

<!--
  Itemized Menu Snippet Example
  (compatible with Twitter Bootstrap)
-->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>Menus</h2>
    </div>
  </div>
  {% for menu in boxes.menus.all %}
    <div class="row">
      <div class="col-md-12">
        <h3>{{ menu.name }}</h3>
        
        {% if menu.images %}
          <div id="menu-image-carousel-{{ menu.slug }}" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              {% for image in menus.images %}
                <li data-target="#menu-image-carousel-{{ menu.slug }}" data-slide-to="{{ forloop.index0 }}" {% if forloop.first %}class="active"{% endif %}></li>
              {% endfor %}
            </ol>
            <div class="carousel-inner" role="listbox">
              {% for image in menus.images %}
                <div class="item{% if forloop.first %} active{% endif%}">
                  <img src="{{ image }}" alt="{{ menu.name }} {{ forloop.index }}">
                </div>
              {% endfor %}
            </div>
            <a class="left carousel-control" href="#menu-image-carousel-{{ menu.slug }}" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#menu-image-carousel-{{ menu.slug }}" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        {% endif %}

        {{ menu.description }}
        
        {% if menu.file %}
          <a href="{{ menu.file }}" class="btn btn-default" download>Download Menu</a>
        {% endif %}
        
        {% for section in menu.sections %}
          {% if section.is_itemized %}
            {% for item in section.menu_items %}
              <div class="row">
                <div class="col-md-8">
                  {% if item.image %}
                    <span class="thumbnail" style="float:left;max-width:90px;margin-right:10px;">
                      <img src="{{ item.image }}" alt="{{ item.name }}">
                    </span>
                  {% endif %}
                  
                  <h4>{{ item.name }}</h4>
                  {{ item.description }}
                  {% set item_details = [item.spicy_rating] + item.allergens + item.dietary_types %}
                  {% if item_details %}
                    <br>
                    <small>{{ item_details|join(", ") }}</small>
                  {% endif %}
                </div>
                <div class="col-md-4 text-right">
                	{% for price in item.prices %}
                    <h5>
                    	{{ price.label }}
                      ${{ price.price }}{% if price.price_max %} - ${{ price.price_max }}{% endif %}
                    </h5>
                    {% if price.unit %}
                      per {{ price.unit }} 
                    {% endif %}
                    {% if price.calories %}
                      ({{ price.calories }}{% if price.calories_max %} - {{ price.calories_max }}{%   endif %} cal.)
                    {% endif %}
                  {% endfor %}
                </div>
              </div>
              {% if item.addons %}
                <div class="row">
                  <div class="col-md-12">
                    <h5>Item Add-ons</h5>
                  </div>
                </div>
                {% for addon in item.addons %}
                  <div class="row">
                    <div class="col-md-6">
                      {{ addon.name }}
                    </div>
                    <div class="col-md-6 text-right">
                      ${{ addon.price }}{% if addon.price_max %} - ${{ addon.price_max }}{% endif %}
                    </div>
                  </div>
                {% endfor %}
              {% endif %}
            {% endfor %}
          {% else %}
            {{ section.content }}
          {% endif %}
        {% endfor %}
      </div>
    </div>
  {% endfor %}
</div>
<!--
  Itemized Menu Snippet Example
  (compatible with ZURB Foundation)
-->

<div class="container">
  <div class="row">
    <div class="medium-12 columns">
      <h2>Menus</h2>
    </div>
  </div>
  {% for menu in boxes.menus.all %}
    <div class="row">
      <div class="medium-12 columns">
        <h3>{{ menu.name }}</h3>
        
        {% if menu.images %}
          <ul data-orbit>
            {% for image in menu.images %}
              <li>
                <img src="{{ image }}" alt="{{ menu.name }} {{ forloop.index }}" />
              </li>
            {% endfor %}
          </ul>
        {% endif %}
        
        {{ menu.description }}
        
        {% if menu.file %}
          <a href="{{ menu.file }}" class="button" download>Download Menu</a>
        {% endif %}
        
        {% for section in menu.sections %}
          {% if section.is_itemized %}
            {% for item in section.menu_items %}
              <div class="row">
                <div class="medium-8 columns">
                  {% if item.image %}
                    <span class="th" style="float:left;max-width:90px;margin:0 10px 10px 0;">
                      <img src="{{ item.image }}" alt="{{ item.name }}">
                    </span>
                  {% endif %}
                  
                  <h4>{{ item.name }}</h4>
                  {{ item.description }}
                  {% set item_details = [item.spicy_rating] + item.allergens + item.dietary_types %}
                  {% if item_details %}
                    <br>
                    <small>{{ item_details|join(", ") }}</small>
                  {% endif %}
                </div>
                <div class="medium-4 columns medium-text-right">
                	{% for price in item.prices %}
                    <h5>
                    	{{ price.label }}
                      ${{ price.price }}{% if price.price_max %} - ${{ price.price_max }}{% endif %}
                    </h5>
                    {% if price.unit %}
                      per {{ price.unit }} 
                    {% endif %}
                    {% if price.calories %}
                      ({{ price.calories }}{% if price.calories_max %} - {{ price.calories_max }}{%   endif %} cal.)
                    {% endif %}
                  {% endfor %}
                </div>
              </div>
              {% if item.addons %}
                <div class="row">
                  <div class="medium-12 columns">
                    <h5>Item Add-ons</h5>
                  </div>
                </div>
                {% for addon in item.addons %}
                  <div class="row">
                    <div class="medium-6 columns">
                      {{ addon.name }}
                    </div>
                    <div class="medium-6 columns medium-text-right">
                      ${{ addon.price }}{% if addon.price_max %} - ${{ addon.price_max }}{% endif %}
                    </div>
                  </div>
                {% endfor %}
              {% endif %}
            {% endfor %}
          {% else %}
            {{ section.content }}
          {% endif %}
        {% endfor %}
      </div>
    </div>
  {% endfor %}
</div>
{
	"name": "Menus Page",
	"wireframe": [
		"boxes-menus"
	]
}
{
	"engine": "menu"
}

Code Snippets