How to access product options/variants from js?

Hello everybody!
I have two questions about ecommerce product variants and js.

I have a default selector of product options (“Add to cart” element) placed on the page.

Question 1
I need to get in my code the default selected product option on page load. To determine the selected option, I am looking for the aria-checked=“true” attribute which is present on the selected option. However, at the time the page loads, no option is selected. I have tried executing my code based on:

  • DOMContentLoaded (pure js);
  • $(document).ready (jQuery);
  • Webflow.push
    Nothing worked, the default is not defined. I had to put my function on a timer and it triggers a second after $(document).ready - then the default variant already has the required attribute and I can get it. But this is a bad solution. Please advise how to run my code after the default ecommerce scripts have finished their work.

Question 2
I need to show pictures of all product options on the page. The “Add to cart” element shows only the picture of the active variant, and it is loaded into one common html element. Is it possible to get paths to pictures of all variants at js level?

If Webflow.push isn’t working than the code itself is asynchronous, and there’s no obvious direct way to know when it’s done.

The indirect way to determine this is to write a mutationobserver that watches those elements for the specific attribute change.

I use this a lot when working with e.g. the User Account page, Sliders, and other delayed-loading content / elements.

I don’t use Webflow’s ecom, so I can’t answer #2 off the top of my head.

Thank you @memetican ! A mutation observer is a much more correct solution than a timer…