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!
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 :)