如何在Shopify主题中自动安装App的代码？

Question

After a Shopify Store Owner installs any app, several apps offer one-click installation of app's code into the active theme files. According to my guess, this involves two steps.

1. Adding new Snippets, Assets to the theme files.
2. Editing the templates or existing snippets to include references to Snippets added by App in #1.

While #1 is fairly straightforward and can be done automatically, #2 requires logic with a great degree of precision, lest apps break the storefront.

I am looking for any ideas, algorithm or logic to perform Step #2 automatically. I have thought of following approach, but it is not foolproof.

Suppose an app wants to include a code near Add to Cart button, it can parse product.liquid file and search for the keyword '/cart' and append the code near it. Alternatively, it can look for </form> and append the code next to it.

However, both the above approach fail, when the Add to Cart button is not present in product.liquid and has been subordinated to something like product-block.liquid.

This logic can become even more complex and vulnerable if some app tries to add code to Collection.liquid. This complicates when we consider that there are 350+ themes in Shopify theme store and it is not possible to test the app for integration to all of them.

My question is, what would be the best strategy to install the app's code in Shopify theme?

For our app Smart Wishlist , we perform manual installation of app's code, but this is not considered Merchant friendly and it takes too much of Support time. We are trying to develop some foolproof automated approach to install the code in the theme files.

Any suggestions, ideas, alternatives are wholeheartedly welcome.

Answer 1

This is not a detailed answer on the matter but as you said your thought of using assets and then modifying the liquid file with {% include 'my_asset' %} is good enough. For the part that you want to add your button, my suggestion would be to use some of the 'standard' elements of the add to cart form like it's action which is 'cart/add'. Meaning that by using jQuery, if this form exists(finding it by its "action" field) append your button in there. I hope that gave you some ideas.

Update: For #2 I would use the Shopify API to: 1) Find the 'main' theme. 2) Take it's value. 3) Find a standard tag like </body> or </head> , whatever suits you. 4) Adding my include in it's value with just string manipulation and then posting it again back on the client. This needs careful action cause you might break things but if you know what you are doing i think it is safe enough.

Answer 2

Maybe targeting the form closing tag? Or better the submit field in form I'd say.

EDIT: sorry I answered too fast. I just read the line about snippet include.