Are all public apps embedded in Shopify Console?

Tourist
5 0 0

I want to build a shopify public app. The app is a sales channel, which imports products from shopify stores to my e-commerce website. The stores which install the app will have their products listed on my e-commerce website.


When user installs the app, I do the handshake, get a new access token for the store from shopify, save the access token in my DB and finally redirect the user to the following page:

https://my-commerce.com/products?storeurl=perisn-handcrafts.myshopify.com

Since user has just installed the app, they don't have any products imported yet, so the above url would display an empty product table... but this page is NOT embedded within shopify console.

Then I import user products into my e-commerce website. and close the page.

Now user goes back to their shopify store, click on my app icon (the app is already installed) and I would redirect the user to the same page to display the products:

https://my-commerce.com/products?storeurl=perisn-handcrafts.myshopify.com

If my app return the following code (list of user products in a table) I see the following result (note that this time the result is embedded within the shopify console):

<table data-toggle="table">
    <thead>
        <tr>
            <th>UniqueThirdPartyProductCode</th>
            <th>Title</th>
            <th>Price</th>
            <th>ImageUrl</th>
            <th>CombinedCategoryViewModel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>39-4477334519894</td>
            <td>Blue</td>
            <td>550.00</td>
            <td></td>
            <td>"todo"</td>
        </tr>

        /* more data... */

    </tbody>
</table>

enter image description here

But if I put the table inside a page layout, which adds <html>, <head> and <body> tag to the result, then the result is not displayed... for example if my app return the following HTML:

<html>
<head></head>
<body>
    <table data-toggle="table">
    /* 
     * content of the table 
     */
    </table>
</body>

I would get this result:

enter image description here

What is the correct process? Should I always exclude the page layout from the result?


Are shopify public apps meant to be always embedded within the Shopify Admin cosole?

Would I be able to have a public app as above which is not embedded in shopify console?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
459 59 71

Hey @hoomanbahreini,

 

Would I be able to have a public app as above which is not embedded in shopify console?

Yes, embedding is optional.

 

What is the correct process? Should I always exclude the page layout from the result?

The app is just an iframe, so you should include html, head and body tags. The error from the screenshot indicates an issue connecting to your server. Are you sure the app is still running, the tunnel is active and the ngrok URL hasn't changed?

 

1 Like
Highlighted
Tourist
5 0 0

@scottydont Thanks for your reply. It was my mistake, I had configured the app to be embedded and was trying to use it as a stand alone app.

 

I explained the issue in more details on stackoverflow, in case it would help any future readers:

 

https://stackoverflow.com/questions/59872735/error-building-a-public-shopify-app-ngrok-io-refused-to...

0 Likes
Highlighted
Shopify Staff
Shopify Staff
459 59 71

Good to know, thanks for the link!

0 Likes