Links

Rails Links

Since each product has a URL associated with it, it can be linked to. You could manually create an HTML link to a specific product. For example, to link to a product with an ID of 3, you could enter:

 <a href="/products/3">Product #3</a>

The above is too specific to be used in a general template. To link to any given @product, one could use the following messy Ruby code:

<a href="/products/<%[email protected]%>"><%[email protected]%></a>

This code is really unclear, so you should never use it. Instead you should use the link_to helper, which is a method Rails provides for creating clean links. link_to lets you create links in your templates and outputs HTML links when the page is rendered.

General Format
Here's the general format for a simple link:

link_to "Text To Display", "URLofLink"

You can use this to create external links:

link_to "Google", "https://www.google.com"

This will create the following HTML link:

<a href="https://www.google.com">Google</a>

Which looks like this: Google

Internal Links

The Rails helper is useful for linking to pages within your application. For example, here's a link to the about page:

link_to "About", "/about"

Which will turn into the following HTML, a link to your about page:

<a href="/about">About</a> 

Instead of specifying an actual address to link to, you can just specify the helper path:

    link_to "About", about_path

This will create the same link as before, but is more adaptable to future changes in your routes. Open up /rails/info/routes and look at the first column to see all the helper paths in your app:

Each of those paths can be used in your Rails links.

Linking to Products

The link helper paths are especially useful for dynamic links, such as linking to specific products:

<%= link_to @product.name, product_path(@product.id) %>

As is common, Rails provides a shortcut for links to the show page of a resource:

     <%= link_to @product.name, @product %>

This is much better than the HTML/Ruby mess at the top of the page! If given a @product with a name "Cow" and an id of 3, these links will generate the following HTML:

<a href="/products/3">Cow</a>

Filling in the Pages

It's time to start using your product links in your actual site:

1. On your home page, add a link to your newest product to replace the text already there.

<em>New: </em>
<b><%= link_to @product.name, @product %></b>
<p><%= @product.description %></p>

Open up your home page and click on your new link. It should take you to that product's page.

2. Do the same thing to the products index page and change all the names of products to actual links.

<h1><%=@title%></h1>

<ul>
    <% @products.each do |product| %>
        <li><%= link_to product.name, product %></b></li>
    <% end %>
</ul>

Open up /products, which should now contain working links to all available products.

3. Since your products index page looks so nice, add a link to it from your home page. Use the correct helper path for the URL and have the link say "Browse All Products".

<%= link_to "Browse All Products", products_path %>

Challenges

• Change the text in the bar on top of the page so it links to the home page. For the URL, use the named helper path instead of using the hard-coded "/".

• On the top of the product show page, add a link to the parent category of the product. However, if the product does not have a category, do not try to display the link.

 <% if @product.category %>
   <%= putLinkHere %>
 <% end %>     

Bonus Challenge

Skeleton CSS provides a couple of standard classes for styling elements such as buttons. Can you add a "button" class to your "Browse All Products" link on your home page?

Guideline: Look up the Rails documentation for the link_to method to see how to add a CSS class to a link. Often, the fastest way to figure out how to do something is to look at the examples. Can you find an example where a CSS class is used and do the same for your product link?