Front-end universal selectors that work with any app

Retired Boards Appdev Partners Discussion
1

Hello guys,

I developed an app that interacts with the front-end part a lot as it needs to check if certain elements exist (eg. form.product-form, add to cart button, buy it now button, etc.). The problem is that not all Shopify themes have the “product-form” class for the add to cart form from the product page.

Are there any “rules” to select DOM elements properly, avoiding issues for my app on various themes?

For example, I noticed that the product form has action=“/cart/add” on most of the themes and I can get the form using this way (form[action=/cart/add]). I just want to avoid compatibility issues between themes and make my app run on all of them if possible.

2

@Klopp Did you find any solution.? I am also working on an app which would add functionality on specific DOM elements.

3

Not exactly.

The best solution was to use specific attributes for each DOM element involved in this. You can’t rely on specific classes because each Shopify theme is different. For example, the Debut theme can have a specific class for a specific DOM element, but other theme like Brooklyn may not have that.

1 Like