Making ajax call to proxy app within theme extension

Retired Boards Appdev Extensions
1

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

2

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!

3

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 = $('');

      $('### ').text(store.storeName).appendTo(storeDiv);
      $('

').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?

4

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