passing data from theme app extension to backend, and update section based on data received

[satyajit1]

Hi,

I am trying to pass a data from live website to my application, data will be entered by live user on theme app extension and this data need to be collected on my application backend, Once data is received, application will do processing in the bacend and will send some response back, based on the response received, the live website will have some modification (bassicaly adding one or two lines of html code, which can be done using javascript). Is there a way to achieve this?

I cannot post data directly to another domain, and as I understand app proxy is also not suitable for this, as app proxy works for admin, not for live website. Any help will be appreciated.

Thanks in advance.

[Liam]

Hi Satyajit1,

Instead of using an app proxy, you could explore using the Ajax API to potentially pass data to the live theme. Have a look at our documentation here to see if it would work for your usecase. 

[satyajit1]

thanks @Liam for your response. I can use ajax to process the data received, but how do i send data to a remote server? or application in this case?

[aidendev]

hi im looking for the same usecase @satyajit1 . have you figured out how to post data from shopify frontend to external backend?

[satyajit1]

yes, you send it like normal POST request. Let me know if you still face issue

[aidendev]

which headers are required? i keep getting bad request:

$.ajax({
    type: 'POST',
    url: '/apps/member?handler=MethodName',
    contentType: 'application/json',
    data: JSON.stringify(formData),
    headers: {
   
        'RequestVerificationToken': antiForgeryToken,
        'Content-Type': 'application/json'
        
    },
    dataType: 'json',
    beforeSend: function (jqXHR, settings) {
        console.log('Request URL:', settings.url);
        console.log('Request Type:', settings.type);
 
    },
    xhrFields: {
        withCredentials: true
    },
    success: function (response) {
        if (response.success) {
            $('#UserFeedbackMessage').text(response.message).css('color', 'green').show();
        } else {
            $('#UserFeedbackMessage').text(response.message).css('color', 'red').show();
        }
    },
    error: function (xhr, status, error) {
        console.error("Error updating collector info:", error);
        console.log("XHR:", xhr);
        console.log("Status:", status);
        console.log("Response Text:", xhr.responseText);
        $('#UserFeedbackMessage').text("An error occurred while updating your profile.").css('color', 'red').show();
    },
    complete: function (jqXHR, status) {
        console.log('Complete Response Headers:', jqXHR.getAllResponseHeaders());
    }
});

Also, are you making this with a Remix app? I originally was using ASP.NET 

[den232]

Hi Liam,

I am confused!  I am trying to generate and use access/session tokens for authorization of communications between my theme extension and backend, but coming up short in a few ways.  Pls ... what am I doing wrong or ??

Problem #1.

Running on my development server, I installed via npm the @Shopify/admin-ui-extensions.   But when I attempt to import it into my extension js code, I keep getting failed references to the shopify CDN at https://cdn.shopify.com/extensions/node_modules/@shopify/admin-ui-extensions ...

I have tried all sorts of locations in the install line, none seem to work

 import ... from '@shopify/admin-ui-extensions'  =>  Relative references must start with either "/", "./", or "../".

import {extend, TextField, Button} from '../../../@shopify/admin-ui-extensions'; 

import {extend, TextField, Button} from '../../../node_modules/@shopify/admin-ui-extensions';

import {extend, TextField, Button} from '/@shopify/admin-ui-extensions' 

import { extend, TextField, Button } from '/node_modules/@shopify/admin-ui-extensions';

----------------------

Problem 2.

The documentation seems to be telling me that I cannot use this in production anyway.  What should I use instead to get/use tokens?

(from https://shopify.dev/docs/api/admin-extensions#custom-protocols-extension-protocol😞

Admin UI block extensions are currently in developer preview. You can only render them while developing locally on a development store.

Thanks and best regards, jb