Search code examples
ruby-on-railsrubyspree

Spree active menu


What do i want to achieve?

I'm trying to add an active-menu (highlight current page in the menu) to my spree/ruby on rails application.

What have I tried?

After doing some research I've found this question posted very helpful, but as you might have guessed the implementation of the solution I found didn't get me the result I wanted.

The solution I found was adding the following code to the:

The Code

application_helper.rb

module ApplicationHelper

 def active_class(link_path)
  current_page?(link_path) ? "active" : ""
 end

end

routes.rb

   root 'spree/home#home'

   get '/specs', to: 'spree/home#specs'
   get '/about', to: 'spree/home#about'
   get '/purchase', to: 'spree/home#purchase'
   get '/support', to: 'spree/home#support'

nav.html.erb

<li class="<%= active_class(root_path) %>">
<%= link_to "Home", root_path %>
</li>

<li class="<%= active_class(purchase_path) %>">
<%= link_to "Purchase", purchase_path %>
</li>

<li>
<%= link_to "About", purchase_path %>
</li>

<li class="<%= active_class(specs_path) %>">
<%= link_to "Technical Details", specs_path %>
</li>

<li class="<%= active_class(support_path) %>">
<%= link_to 

The Error

But now, no matter what page I go to I get the following error:

NameError in Spree::Home#purchase
Showing /home/ubuntu/workspace/mystore/app/views/spree/shared/_nav_bar.html.erb where line #9 raised:

undefined local variable or method `purchase_path' for #<#<Class:0x007f35a30c6b80>:0x007f35a3642a00>
Extracted source (around line #9):


</li>

<li class="<%= active_class(purchase_path) %>">
<%= link_to "Purchase", purchase_path %>
</li>

I've tried changing several variables, but to no avail

My question is:

How do i create an active menu in Spree (since it's the root of the problem)


Solution

  • See the reference below. I have used activated instead of active. you can style the activated class thereafter

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right" id="link-section">
                <li class="<%= 'activated' if current_page?(root_path) %>">
                    <a href="/">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="<%= 'activated' if current_page?(new_user_registration_path) %>">
                    <%= link_to("Register", new_user_registration_path) unless user_signed_in? %>
                </li>
                <li class="<%= 'activated' if current_page?(pricing_path) %>">
                    <%= link_to("Pricing", pricing_path) %>
                </li>
                <li class="">
                    <% if current_user %>
                        <%= link_to("Store", shop_path(current_user.shop)) if current_user.shop.present? %>
                    <% end %>
                </li>
                <li class="<%= 'activated' if current_page?(new_user_session_path) %>">
                    <%= link_to("Login", new_user_session_path) unless user_signed_in? %>
                </li>
                <li class="<%= 'activated' if current_page?(dashboard_path) %>">
                    <%= link_to("Dashboard", dashboard_path) if user_signed_in? %>
                </li>
                <li>
    
                </li>
            </ul>
        </div>