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

This post picks up at the end of Making API Calls from your Shopify Embedded App.

Creating an array of image data

At this point we should have some product information displayed on the page and have already made a call to retrieve our images and metafields. It's now time to retrieve just the data we want and display it on the page.

We are going to be displaying the images in the show view for the home controller. In app > controllers > home_controller.rb let's start by adding an empty array to store our images with their alt text in the show method.

#home_controller.rb
def show
  @image_array = []
  ...
end

Isolate the data we want to use

Now let's look at what data we want to include in our array. We will start with the image source and the alt text. Let's make some variables to store these two pieces of data.

#home_controller.rb
def show
  @product = ShopifyAPI::Product.find(params[:id])
  headers = {"X-Shopify-Access-Token" => @shop_session.token}
  @image_array = []
  if product.images.present?
    @product.images.each do |image|
      src = image.src
      id = image.id.to_s
      metafields = HTTParty.get('https://my-store.myshopify.com/admin/metafields.json?metafield[owner_id]='+ id +'&metafield[owner_resource]=product_image', :headers => headers).values.first

      #if there is a metafield value for the image use it for the alt tag else use the product title	
      metafields.first.present? ? alt = metafields.first['value'] : alt = @product.title
    end
  end
end

Note: we use a conditional statement to check if there are metafield values and then assign the value to the alt variable otherwise we assign the alt variable to equal the product title.

Storing the Image Values in our array

We want to be able to push both the source and the alt text for each image into our array. To do this we will create a new struct class. The code will look like this:

#home_cotroller.rb
def show
  Struct.new("Image", :src, :alt) #we will use this to store each Image instance
  headers = {"X-Shopify-Access-Token" => @shop_session.token}
  if @product.images.present?
    @product.images.each do |image|
      src = image.src
      id = image.id.to_s
      metafields = HTTParty.get('https://my-store.myshopify.com/admin/metafields.json?metafield[owner_id]='+ id +'&metafield[owner_resource]=product_image', :headers => headers).values.first

      metafields.first.present? ? alt = metafields.first['value'] : alt = @product.title

      image = Struct::Image.new(src, alt) 
      @image_array.push(image) #push the image into the images array
	
    end 
  end 
end

Displaying images with alt text in our app

Now that we have an array with all of our image data let's use it to display the images in the show view. In your app > views > home > show.html.erb add the following:

<%  @image_array.each do |m| %>
	
<% end %>

Now you should have images with alt text displayed on your page!