Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

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 Setting Up a Shopify Theme in a Development Store.

Determining the desired endpoint

If set up your app using the shopify_app gem you probably noticed that you can make use of the ShopifyApp active record resource and retrieve data using ShopifyAPI::#Class#Method. There is, however some data that is not accessible this way, but can be retrieved through a http request. One such data source is the product_image resource metafields

The alt text for product images are stored in the metafield on the resource and accessible at:
https://your-store.myshopify.com/admin/metafields.json?metafield[owner_id]=your_product_image_id&metafield[owner_resource]=product_image
where 'your_product_image_id' is the actual id of the image, when your app is authenticated.

If you are running your app open a new browser tab and enter the url for the product_image metafields above (replacing your_product_image_id with the image id). The result should look something like this

{
"metafields": [
	{
		"id": [id],
		"namespace": "tags",
		"key": "alt",
		"value": "blue sneakers with white laces",
		"value_type": "string",
		"description": null,
		"owner_id": [id],
		"created_at": "2016-04-28T21:10:02-04:00",
		"updated_at": "2016-04-28T21:10:02-04:00",
		"owner_resource": "product_image"
	}
]
}

Getting ready to call to the API

Now that you know what data you are after it's time to make a call to the API from within your app. To facilitate this process we'll use the HTTParty gem.

In your Gemfile add the following:

#Gemfile
#for more fun HTTP requests
gem 'httparty'

Then in your terminal make sure you are cd'ed into the root directory of your app and run:

$bundle install

Now that we have included the gem head over to your controller where you want to make the HTTP request. We are going to use the Home Controller. Require the HTTParty like this:

#home_controller.rb
Class HomeController < AuthenticatedController

  #for more fun http requests
  require 'HTTParty'
  ...
 end

Making your API Call

We are going to make the API call in the show action method so that we can display the data on the page for each individual product.

To start let's define some values in the show method that we will need to use to make the call. Since we are looking for the alt tags on product images let's start by defining our product and images. We will also define an empty array to hold the data that comes back from our api call. The code will look something like this:

#home_controller.rb
  def show
    #array to hold the image metafields
    @image_metafields = []

    #get the product by id
    @product = ShopifyAPI::Product.find(params[:id])
      
    #loop through each image on the product
    @product.images.each do |image|
      
    end
 end

We are going to make the call inside of the image loop so that we get data for each image. Think back to the endpoint we will be making the call to (https://your-store.myshopify.com/admin/metafields.json?metafield[owner_id]=your_product_image_id&metafield[owner_resource]=product_image). In order to make the call for each image we need to sub in the actual image id. Let's save this in a variable like this:

#loop through each image on the product
      @product.images.each do |image|
        id = image.id.to_s
      end

Note that we convert the image id to a string (from a number) so that we can use it in the url of our API call. Finally we need to include the access token in the header of the request. This was returned when we did the initial app authentication and is stored in the @shop_session. We'll create a variable to hold the headers for our request like this:

headers = {"X-Shopify-Access-Token" => @shop_session.token}

Now it's time to make the actual call to the API. For this we will use the get method provided by HTTParty. Once we make the request we'll push the response into the @image_metafields The code looks like this:

def show
      @image_metafields = []

      #get the product by id
      @product = ShopifyAPI::Product.find(params[:id])

      #store the headers for our request
      headers = {"X-Shopify-Access-Token" => @shop_session.token}

      #loop through each image on the product
      @product.images.each do |image|
        id = image.id.to_s

        #make the request and store it in a variable
        metafields = HTTParty.get('https://your-store.myshopify.com/admin/metafields.json?metafield[owner_id]='+ id +'&metafield[owner_resource]=product_image', :headers => headers).values

        #add the returned data to the @image_metafiels array
        @image_metafields.push(metafields)
      end
    end

Now that we have made the call to the api let's display the resulting data in our show view. In app > views > home > show.html.erb add the following:

  <% @image_metafields.each do |m|%>
    
<%= m %>
  <% end %>

For now we will iterate through and display the response for each call to the image metafields end point. In a later post we will go over how to use this data to display the images with alt text.