this post assumes that you have set up an authenticated embedded app and a Shopify store. If not, check out setting up a shopify embedded app with rails and / or Tetchi's post on setting up a shopify theme.

Let's Make some Routes

We will start by creating restful routes for our home views. To do so we will make use of Rails Resource Routing. This allows us to quickly set up all of the restful routes (GET, POST, PATCH, PUT, and DELETE) for a resource controller.

In your app root directory under config > routes.rb add the following

#routes.rb
resources :home

In your terminal cd into the root directory of your app and run

$ rake routes

this will give you a list of all of your routes that looks something like this:

     Prefix Verb   URI Pattern                      Controller#Action
                login GET    /login(.:format)                 sessions#new
         authenticate POST   /login(.:format)                 sessions#create
auth_shopify_callback GET    /auth/shopify/callback(.:format) sessions#callback
               logout GET    /logout(.:format)                sessions#destroy
           home_index GET    /home(.:format)                  home#index
                      POST   /home(.:format)                  home#create
             new_home GET    /home/new(.:format)              home#new
            edit_home GET    /home/:id/edit(.:format)         home#edit
                 home GET    /home/:id(.:format)              home#show
                      PATCH  /home/:id(.:format)              home#update
                      PUT    /home/:id(.:format)              home#update
                      DELETE /home/:id(.:format)              home#destroy
                 root GET    /                                home#index

Notice all of the restful routes for the home resource controller. Now that we have made these routes let's link to them and display different views.

Creating Action Methods In the Home Controller

In order to process our route requests we need corresponding methods set up in the controller. Let's start by making a show and an edit method.

In app > controllers > home_controller.rb add:

#home_controller.rb
  def show

  end

  def edit

  end

here we define two methods for the show and edit actions. By default they will render views with the corresponding names, so let's make those views!

Making Views

In app > views > home we are going to create two new files show.html.erb and edit.html.erb. The name of each file should match the name of the method in the controller.

-- app
--- views
---- home
----- edit.html.erb
----- index.html.erb
----- show.html.erb

Inside those files let's just add some h1 tags with the name of the respective files. Test and see if your changes have taken effect at http://localhost:3000/home/show or http://localhost:3000/home/edit

Linking to Our new Views

Let's link to both the show and edit view for each product from the index page

Under app > views > home > index.html we should already have a list of all of our products that looks something like this:

  <% @products.each do |product| %>
    
      <%= product.id %>
    
  <% end %>

Inside of the product loop we'll add a link to the show and edit page for each product. So it will look a little something like this:

  <% @products.each do |product| %>
    
      <%= product.id %>
    
    <%= link_to 'show', home_path(product)%> ||
    <%= link_to 'edit', edit_home_path(product)%>
  <% end %>

Displaying Product Information in Your New Views

Right now our show and edit views only have a title tag. Let's add some product information to the show view. To start we will define the product in our home_controller. In app > controllers > home_controller.rb edit the show method to look like this:

def show
  @product = ShopifyAPI::Product.find(params[:id])
end

ShopifyAPI is an Active resource object meaning you can make use of all the regularly available methods in this case find

Once you have set up the method you need to write the html to display the product information in the view. Head over to app > views > home > show.html.erb. Add the following to the show file:

Show
<%= @product.title %>
vendor: <%= @product.vendor%>

Now on the show page for each product you will see it's title and vendor :)