How can I modify a theme to standardize the DOM for app compatibility?

[ahzam]

Hello there, I'm looking to modify my theme in such a way that the underlying theme's layout template doesn't change( the look and feel, the entire css stays same) but the underlying DOM gets changed. I'm doing this for an app that would run on every type of theme for that I need a single type of DOM.
Any expert opinion how can I update so that the app becomes universal to all themes??

Thanks in Advance.

[Verdant-Spark]

This is a bad idea for a million reasons. Having an app which changes the underlying DOM for any theme is basically a virus... By changing the DOM, everything else on that theme, and any other apps which the merchant has installed, will stop working.

Your app, instead, will need to be built in such a way that it can be installed into any theme and run in an isolated fashion without affecting anything. This is not only best practice, but the only practice which you should follow when developing an app.

[ahzam]

I understand the approach you have asked me to take. But how that will be done according to every theme is my question of concern. How can I make a standalone DOM if my app is heavily dependent on the DOM of the theme? Wouldn't that vary theme to theme??

Thanks. 

[Verdant-Spark]

Indeed. You'll find that most apps target a specific dom element which is added to a location on a page, since every theme is different and there's no guarantee that any other dom element is consistent everywhere. You'll also need to be self contained so that  your app doesn't conflict with the theme and/or other apps.

Read up on all the app tutorials and fundamentals first, otherwise you're probably going to waste a lot of time developing something which will never see the light of day.

[ahzam]

Can you point me to a specific direction? I seem to have lost. I can't find anything how to make my theme standalone which can be used within any theme possible.
Thanks.

[Verdant-Spark]

https://developers.shopify.com/app-development?term=shopify%20app%20development&Network=Search&SiteT...

[ahzam]

Yeah, well that's the link for the developer's platform. I already have an app, so why have you pointed me to this URL?

There's nothing new in that link for me.
Thanks.

[ahzam]

@Verdant-Spark Buddy, can you tell me a solution where I can dynamically catch the element which holds the products. Like if the parent element has different class names for different themes. I want to catch it with parentNode or children properties or something like that.

Thanks.

[Verdant-Spark]

There is no universal element in the dom for holding a product: the theme designer can name that whatever they want. There is, quite literally, nothing universal about themes - when a theme gets a product it's just an object.

[ahzam]

There must be a pattern for the hierarchy, some sort of standard for the theme to have classNames or IDs for specific elements.
If there isn't then how do apps modify such elements. How are apps compatible for multiple themes? Any Hint would be useful.
I'm stuck with this issue really bad.
Thanks

[ahzam]

@Verdant-Spark . I can build a parser of some sort with which I can do this. 
I can parse the 'section/collection.template' file and look for the {% for product in collection.products %}.
All the product divs are included within{% for product in collection.products %}. That is where the loop happens which gets all products of a collection. The element which holds a product is found within this loop and it's parent element must be the one which holds all the product elements together.

If I can get to the parent element by getting to the {% for product in collection.products %} then I can do whatever my requirement is.
Getting to the parent element which holds all products is my main concern.

So, what do you think??

[Jason]

---

@ahzam wrote:

@Verdant-Spark . I can build a parser of some sort with which I can do this. 
I can parse the 'section/collection.template' file and look for the {% for product in collection.products %}.
All the product divs are included within{% for product in collection.products %}. That is where the loop happens which gets all products of a collection. The element which holds a product is found within this loop and it's parent element must be the one which holds all the product elements together.

If I can get to the parent element by getting to the {% for product in collection.products %} then I can do whatever my requirement is.
Getting to the parent element which holds all products is my main concern.

So, what do you think??

---

All this assumes that there's only one of those loops in the code, or that the code is even in that file. What if it's in a section, or a snippet, or the theme layout? The code may also be found within a comment, though ideally your parser can see that. This is making too many assumptions that things are in what you might consider a normal place. Being able to customise the code means those things could be anywhere, or even not exist (for JS built views).

I would caution you against this method.

What does your app do that would see you need to force a Liquid change on such a drastic level?

[ahzam]

@Jason 
Most probably the code for products displayed in a collection are found in 'section/collection-template.liquid' file. It can't be found in the 'theme.liquid' as it would be seen everywhere, which is not the case nor it would be inside any snippet. 

As for the loop I think there is only one. Because only that loop is responsible for displaying the products in the collection div.

Again all of this is based on my observation, on how many themes I have seen. 

[Verdant-Spark]

I think, in that case, you may need to look at many more themes! @Jason is absolutely correct - you can't make any assumptions here at all. Also, just to throw a further spanned in your works, each theme developer is not only open to creating the dom structure that they want, and the naming of the classes (whether following BEM methodology or their own style), but also the casing convention.

Rte != rte

The only reliable way you're going to have of integrating with themes is to provide the merchant with really clear instructions on where to put your snippet, or offer an installation service. As an aside, asking a non-developer to identify the class or id of the parent element to a collection could be a fool's errand.

[Jason]

---

@ahzam wrote:

There must be a pattern for the hierarchy, some sort of standard for the theme to have classNames or IDs for specific elements.
If there isn't then how do apps modify such elements. How are apps compatible for multiple themes? Any Hint would be useful.
I'm stuck with this issue really bad.
Thanks

---

There is some common traits, but the previous points made by @Verdant-Spark are correct (thankyou for contributing!). Review the existing themes on the theme store and you'll see those common traits. Expect to have to have a few different ways of targeting elements as one single method won't cut it.

If developing an app and trying to target things with JS you should still assume that some themes can be vastly different to what you expect. I created mostly custom themes so the schema/structure was vastly different and in some case built dynamically so your app wouldn't even have a chance to see the content as I would load my own (likely) after your code ran. I've also seen off the shelf themes changed so drastically that your wouldn't recognise them.

Another method some use is to have the merchant add/adjust some code to add a special identifier around the thing you're trying to target. May be useful for you but also get if that's not.