New Shopify Certification now available: Liquid Storefronts for Theme Developers

Making ajax call to proxy app within theme extension

Solved
aidendev
Shopify Partner
8 0 0

I've been attempting to make an ajax post request to one of my storefront's proxy apps. The goal is to have my ajax call pass along certain parameters including the product's barcode to my proxy app. My app would then make a request to my external api to receive content, of which i want to be displayed within the theme extension. 

There is hardly any documentation on how to do this, let alone using a proxyapp as middleware since I'm unable to directly communicate to my external api from my app theme extension. If anyone has had experience in this issue it would be greatly appreciated

Accepted Solution (1)
Liam
Shopify Staff
Shopify Staff
1898 203 577

This is an accepted solution.

Hi Aidendev,

 

The general process for this would be, from your storefront or theme extension, make an AJAX request to the proxy URL you set up:

$.ajax({
    type: 'POST',
    url: '/apps/your-proxy-endpoint',
    data: {
        barcode: 'YOUR_PRODUCT_BARCODE'
    },
    success: function(response) {
        // Handle the response from your server
        console.log(response);
    },
    error: function(error) {
        // Handle any errors
        console.error(error);
    }
});


When the App Proxy endpoint is hit, Shopify will forward that request to your app's server. You'll need to:

  1. Authenticate the request. Shopify will add some headers to the request to allow you to verify its authenticity.
  2. Extract the barcode or other data from the request.
  3. Make a request to your external API using the barcode.
  4. Return the external API's response to the storefront.

Then once you receive the content from your external API (via the App Proxy), you can display it within your theme extension using JavaScript.

 

Hope this helps!

 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 3 (3)
Liam
Shopify Staff
Shopify Staff
1898 203 577

This is an accepted solution.

Hi Aidendev,

 

The general process for this would be, from your storefront or theme extension, make an AJAX request to the proxy URL you set up:

$.ajax({
    type: 'POST',
    url: '/apps/your-proxy-endpoint',
    data: {
        barcode: 'YOUR_PRODUCT_BARCODE'
    },
    success: function(response) {
        // Handle the response from your server
        console.log(response);
    },
    error: function(error) {
        // Handle any errors
        console.error(error);
    }
});


When the App Proxy endpoint is hit, Shopify will forward that request to your app's server. You'll need to:

  1. Authenticate the request. Shopify will add some headers to the request to allow you to verify its authenticity.
  2. Extract the barcode or other data from the request.
  3. Make a request to your external API using the barcode.
  4. Return the external API's response to the storefront.

Then once you receive the content from your external API (via the App Proxy), you can display it within your theme extension using JavaScript.

 

Hope this helps!

 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

aidendev
Shopify Partner
8 0 0

This definitely helps, but I have been having issues regarding getting my ajax call to hit my proxy application. 

I'm specifically trying to hit a handler method in my proxy app:

$.ajax({
    type: 'POST',
    url: '/tools/getStores?handler=GetStores',
    data: {
        barcode: tagnumber,
        latitude: lat,
        longitude: long
    },
    success: function(response) {
    console.log(response);
    var stores = response.data;
    var storeList = $('#storeListContainer'); 

    for (var i = 0; i < stores.length; i++) {
      var store = stores[i];
      var storeDiv = $('<div>');

      $('<h3>').text(store.storeName).appendTo(storeDiv);
      $('<p>').text(store.address1 + ', ' + store.city + ', ' + store.stateProvince + ' ' + store.postalCode).appendTo(storeDiv);
    

      storeDiv.appendTo(storeList);

   
    }
    },
    error: function (xhr, status, error) {
              console.log(error);
              console.log(status);
              console.log(xhr);
                console.error('Error calling server method:', error);
            }

    })

 

I also attempted just putting the proxy url without the handler and still received the same 400 error. Are there particular headers needed to resolve this?

aidendev
Shopify Partner
8 0 0

I realize that its probably necessary to add a token for the proxy app I'm trying to reach?