How to override/change lay-out of Ruby on Rails spree app after installing Bootstrap gem?

Question

I have a Spree Commerce application with the spree_bootstrap gem installed by adding

gem 'spree_bootstrap', github: 'jdutil/spree_bootstrap'

to the Gemfile.

Now on the main page I have all the familiar bootstrap divs as <div class="container row"> and <ul id="main-nav-bar" class="inline">.

I am new to Rails and I want to change the lay-out masterpage by adding my own custom navbar and other tweaks. Unfortunately application.html.rb is a virtually empty page and I don't think that is the one to make changes.

My question is: how do I override or change the standard div values? I do not have the files locally. I've heard about using Deface as a tool, but I don't know how to use it.

I hope someone here can provide some more insight on changing the standard bootstrap Spree application.

Answer 1

Create the file app/views/spree/layouts/spree_application.html.erb. Copy and paste this content then edit as you wish :)

Repeat for any other Spree views and partials that you might want to restyle. If you'd like to know the paths you need to create & the content for a certain view or partial, check out the app/views/spree folder of their GitHub repo.

You might need to restart your server before seeing any changes.

Answer 2

First off, I think this question is duplicated in several other SO questions. I did deal with this yesterday though, so I figured I would give an answer.

You should look at the deface gem (what Spree uses to allow you to override views). Here's an example on how to replace the content of <ul id="main-nav-bar" class="inline">, assuming the file is app/views/spree/shared/_nav_bar.html.erb. Note that you have to find the file where the selector you're going to use actually is:

# app/overrides/my_override.rb
Deface::Override.new(virtual_path: "spree/shared/nav_bar",
                     name: "my_navbar",
                     replace: "ul#main-nav-bar") do
  <<-HTML
  <nav class='navbar navbar-default navbar-fixed-top'>
    <div class='container'>
      ...
    </div>
  </nav>
  HTML
end

If you need more help you might want to take a look at their docs. What is definitely not a good idea is to copy and paste the content of a gem to override.