如何开发在产品页面中进行更改的shopify应用程序？

Question

I'm trying to develop a Shopify recommendation app that will embed recommended bundle products to the shop's product page as similar as Shopify official product review app that embeds a review section (Customer Review) to the product page by adding the following section to the template:

<div id="shopify-product-reviews" data-id="{{product.id}}">
    {{ product.metafields.spr.reviews }}
</div>

:

My question is about the way of implementing a Shopify application that works as a widget in the product page. As far as I understand Shopify App Proxy is doing a similar thing but it renders the template on a new page, I can't find any approach to embed my liquid template to the existing theme.

Answer 1

You are missing a beautiful and most useful aspect of App Proxy. With it you can do the following pattern, answering your needs perfectly.

• send the App Proxy the product being viewed using a Javascript GET
• The App Proxy will securely get any information you deem important for you based on the incoming product information
• You can return pure JSON data as the answer from the Proxy, back to the request
• Using any old template pattern you want, you can take the JSON returned from the Proxy and render useful HTML for the customer

While it is true the App Proxy can be used to return Liquid, this will indeed mean a re-rendering of the screen chrome and layout, so you might prefer the JS and template method. However, I have used both, and both are super for their own purposes. Returning Liquid is cool as it lets you write Liquid in the Shopify Theme that you can populate in your App, and Shopify will then populate the Product info allowing for you to have Theme Designers and the merchant change the HTML the customer sees, without the HTML template limits the JSON approach has.

Answer 2

I am also developing a custom product page. I guess the process should be like this:

1. When a merchant installs your app, use ScriptTag API to add your js to the product page
2. When a product page is loaded, use js to send GET request to App proxy
3. App proxy redirects to your app. Your app will return the JSON response
4. your js get and parse the response, dynamically add the widget on the product page