For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
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
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:
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
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?
I realize that its probably necessary to add a token for the proxy app I'm trying to reach?