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

An Engine is a pre-defined set of fields that can be easily added to a Box. Engines are defined for specific use cases. BentoBox comes with the following Engines:

  • Location
  • Menu
  • Team
  • Blog
  • Press
  • Venue
  • FAQ
  • Gallery

While Engines impact the Box experience through CMS, they are otherwise invisible to CMS Admins and Users.

You may only use an engine once per theme

And no more than one engine may be used by a box. BentoBox requires a one-to-one relationship to ensure there is a canonical source of data for each of these concepts for external integrations and non-CMS features.

Engine Variables

The following is a list of the variables that will be exposed to a box if it is using an engine. Note that none of the fields are required, so the values may be blank.

Append ?help to any url on your site to see all of the accessible variables

Location

To use the Location engine, add {engine: "location"} to a box's configuration file.
Fields:

  • description (string) - The location's description.
  • address (string) - An appropriately formatted concatenation of the location's street, city, state, and postal code.
  • street (string) - The location's street address.
  • city (string) - The location's city.
  • state (string) - The location's state.
  • postal_code (string) - The location's postal (ZIP) code.
  • phone_number (string) - The location's phone number.
  • hours (string) - The location's hours.
  • images (array) - An array of URLs to images of the location.
  • image (string) - An alias for the first item in the images array.

Menu

To use the Menu engine, add {engine: "menu"} to a box's configuration file.
Fields:

  • description (string) - The menu's description.
  • file (string) - A URL to a file, typically a PDF, of the menu's content.
  • images (array) - An array of URLs to images relevant to the menu.
  • image (string) - An alias for the first item in the images array.
  • sections (array) - Array of sections of the menu. Each section consists of:
    • is_itemized (boolean) - true if this section is an itemized section, otherwise false.
    • menu_items (array) - Array of menu items in this section. (Only accessible if is_itemized: true) Each item consists of:
      • name (string) - The section's name.
      • description (string) - The section's description.
      • name (string) - The item's name.
      • description (string) - The item's description.
      • image (string) - A URL to an image of the item.
      • dietary_types (array) - An array of the dietary types pertinent to this item. Possible values include: vegetarian, vegan, kosher, halal, organic.
      • spicy_rating (string) - A string signifying this item's spicy rating.
      • allergens (array) - An array of the allergens pertinent to this item. Possible values include: dairy, peanut, tree nut, dairy free, peanut free, tree nut free, egg, shellfish, wheat, egg free, shellfish free, gluten free, fish, soy, fish free, soy free.
      • prices (array) - Array of prices for this item. Each add-on consists of:
        • label (string) - Label associated with this price (often used for price differentiation among sizes).
        • price (number) - The price's amount.
        • price_max (number) - The price's maximum amount.
        • calories (number) - The price's calories.
        • calories_max (number) - The price's maximum calories.
        • unit (string) - The unit this price corresponds to.
      • addons (array) - Array of add-ons for this item. Each add-on consists of:
        • name (string) - The price's label.
        • price (number) - The add-on's price.
        • price_max (number) - The add-on's maximum price.
    • content (string) - The menu section's content. (Only accessible if is_itemized: false)
  • layout (json) (Only accessible if the menu engine is configured to have layouts. See below for more information.)
    • slug (string)
    • name (string) not yet implemented
    • blocks (json)
      • each section slug with: (json)
        • name (string)
        • sections (array)

Menu Layouts

Menus can be configured offer the user the option to choose from layouts. Layouts group sections into blocks. E.g.

{
  "engine": {
  	"type": "menu",
  	"config": {
  		"layouts": { /* always a json object */
        "three_columns": ["column_one","column_two","column_three"], /* arrays assumed to be a value for 'blocks'. */
  			"vertical_split": {
          "name":"Vertical Split",
          "has_file": false, // defaults to true
          "blocks": [
            "top",
            {"bottom":"Bottom Area"}
          ]
        },
  		]
  	}
  }
}

Team

To use the Team engine, add {engine: "team"} to a box's configuration file.
Fields:

  • bio (string) - A biography of the team member.
  • title (string) - The team member's title.
  • image (string) - A URL to an image of the team member.
  • social (json) - URLs to the team member's social media profiles. Possible data includes:
    • facebook (string) - A URL to the team member's Facebook profile.
    • twitter (string) - A URL to the team member's Twitter profile.
    • instagram (string) - A URL to the team member's Instagram profile.
    • linked_in (string) - A URL to the team member's LinkedIn profile.
    • google_plus (string) - A URL to the team member's Google Plus profile.
    • pinterest (string) - A URL to the team member's Pinterest profile.
    • vine (string) - A URL to the team member's Vine profile.

Event

To use the Event engine, add {engine: "event"} to a box's configuration file.
Fields:

  • description (string) - The event' description.
  • external_url (string) - A URL to an external site with information relevant to the event.
  • starts (string) - The date and time this event starts, in the ISO 8601 format. Use the date() filter to format this value for display.
  • ends (string) - The date and time this event ends, in the ISO 8601 format. Use the date() filter to format this value for display.
  • images (array) - An array of URLs to images relevant to the event.
  • image (string) - An alias for the first item in the images array.

Press

To use the Press engine, add {engine: "press"} to a box's configuration file.
Fields:

  • title (string) - An alias for name.
  • image (string) - An image from this press clipping.
  • file (string) - A URL to a file, typically a PDF, of this press clipping.
  • external_url (string) - A URL to the original article.
  • source (string) - The publication/source of the press clipping.
  • date (string) - The date and time this press clipping was originally published, in the ISO 8601 format. Use the date() filter to format this value for display.

Blog

To use the Blog engine, add {engine: "blog"} to a box's configuration file.
Fields:

  • title (string) - An alias for name.
  • image (string) - An image corresponding to this blog post.
  • content (string) - The blog post's content.
  • date (string) - An alias for created

Gallery

To use the Gallery engine, add {engine: "gallery"} to a box's configuration file.
Fields:

  • images (array) - An array of URLs corresponding to this gallery's images.

Venue

To use the Venue engine, add {engine: "venue"} to a box's configuration file.
Fields:

  • description (string) - A description of the venue.
  • capacity (string) - The venue's capacity
  • images (array) - An array of URLs to images of this venue.
  • image (string) - An alias for the first item in the images array.

FAQ

To use the FAQ engine, add {engine: "faq"} to a box's configuration file.
Fields:

  • question (string) - An alias for name.
  • answer (string) - This question's answer.

Engines