Documentation

Useful tricks

Change the name of my site in the editor

You can re-run the Boxcab installation at any point in the development of your site. The installation process will ask for your site name. Enter the new name and you're good.

$ heroku local:run rails g boxcab:install

If you go back to the Boxcab editor, you should see the new name of your site in the left sidebar.

Integrate High Voltage

Just follow our installation guide but skip the part about inserting the boxcab_pages_here statement in your controllers. You won't need it since Boxcab loads it for you.

Build an editable carousel

For the purpose of this guide, we'll use Owl carousel as the Carousel Javascript library.

1/ Load jQuery and include Owl Carousel plugin files. See here for more information.

2/ In the view you want to display the carousel, copy/paste the following code:

<div id="owl-example" class="owl-carousel">
  <%= boxcab_content :carousel, type: 'list', default: 8 do |iterator| %>
    <div class="item">
      <img src="<%= boxcab_content 'background', type: 'image', default: 'http://placehold.it/120x120' %>" alt="Touch">
      <h3>
        <%= boxcab_content :title, type: :string, default: "Title here" %>
      </h3>
      <h4>
        <%= boxcab_content :sub_title, type: :string, default: "SubTitle here" %>
      </h4>
    </div>
  <% end %>
</div>

3/ In your application.js file, insert the following statement:

var setupOwlCarousel = function() { $("#owl-example").owlCarousel(); }

$(document).ready(function() {
  setupOwlCarousel();
});

document.addEventListener('boxcab:refresh', function(e) {
  setupOwlCarousel();
});