Front-end universal selectors that work with any app

Highlighted
Tourist
9 1 0

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.

0 Likes