execute code after Amazon widgets are loaded

Question

I'd like to load a couple of Amazon widgets with different search terms and highlight some results.

The problem is, how can I know when both widgets are loaded? I've tried many different snippets (with load, ready, etc...) I've found here and there, but without success.

Basically, when loaded, each widget's content is within an "ad unit" DIV (..._adunit_0 and ..._adunit_1), which contains another DIV, and inside that one there's an IFRAME. Both DIVs have IDs, but no the IFRAMEs, in case that matters.

<div id="amzn_assoc_ad_div_adunit_0">
  <div id="__mobileAssociatesSearchWidget_adunit_0" class="__mobile-associates-search-widget">
    <iframe>search results</iframe>
  </div>
</div>

Here's the code that loads the 2 widgets: https://jsfiddle.net/rz8ytfxd/

<html>
  <body>

    <script type='text/javascript'>
      amzn_assoc_ad_type = 'responsive_search_widget';
      amzn_assoc_tracking_id = '';
      amzn_assoc_marketplace = 'amazon';
      amzn_assoc_region = 'DE';
      amzn_assoc_placement = '';
      amzn_assoc_search_type = 'search_widget';
      amzn_assoc_width = 'auto';
      amzn_assoc_height = 'auto';
      amzn_assoc_default_search_category = '';
      amzn_assoc_default_search_key = 'lonely planet ukraine'
      amzn_assoc_theme = 'light';
      amzn_assoc_bg_color = 'FFFFFF';

    </script>
    <script src='//z-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=DE'></script>

    <script type='text/javascript'>
      amzn_assoc_ad_type = 'responsive_search_widget';
      amzn_assoc_tracking_id = '';
      amzn_assoc_marketplace = 'amazon';
      amzn_assoc_region = 'DE';
      amzn_assoc_placement = '';
      amzn_assoc_search_type = 'search_widget';
      amzn_assoc_width = 'auto';
      amzn_assoc_height = 'auto';
      amzn_assoc_default_search_category = '';
      amzn_assoc_default_search_key = 'lonely planet poland'
      amzn_assoc_theme = 'light';
      amzn_assoc_bg_color = 'FFFFFF';

    </script>
    <script src='//z-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=DE'></script>
    </body>
</html>

Any help would be greatly appreciated. I don't mind if a solution requires jQuery or any other library.

Michael

[I'll probably post another question just for that, but just in case... Do you have any idea why the spaces in the search term are replaced with %20 (thus giving bad results) despite it being the code exactly as copied from Amazon? Can something be done about that?]

score 0 · Answer 1 · answered Mar 24 '21 at 09:55

The simplest solution is to regularly check the number of loaded items. If you expect n iframes to be loaded, then you can do this:

function waitForNIFrames(callback, n) {
    let myInterval = setInterval(function() {
        if (document.querySelectorAll("iframe") >= n) {
            clearInterval(myInterval);
            callback(); //This is the function you want to execute when it's done.
        }
    }, 100);
}

Maybe Amazon has some nice features for having a callback. I recommend reading the documentation for this possibility.

You can also track DOM changes, but that's a more complex approach.

Detect changes in the DOM

As about the %20: let's look at the src attribute of your URL:

https://ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=DE&Operation=GetWidgetFrame&OneJS=1&ad_type=responsive_search_widget&region=DE&marketplace=amazon&tracking_id=&auto_complete=true&org_reco_count=0&axf_treatment=&search_type=search_widget&linkid=&width=693&height=252&default_search_category=&default_search_key=**lonely%2520planet%2520ukraine**&widgetId=__mobileAssociatesSearchWidget_adunit_0&default_category_html=&default_category_value=&default_category_search=&isresponsive=true&theme=light&bg_color=FFFFFF&slotNum=0&debug=&viewerCountry=RO

you will see that the stuff you do not really need is already in the iframe, and replacing the src to

https://ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=DE&Operation=GetWidgetFrame&OneJS=1&ad_type=responsive_search_widget&region=DE&marketplace=amazon&tracking_id=&auto_complete=true&org_reco_count=0&axf_treatment=&search_type=search_widget&linkid=&width=685&height=252&default_search_category=&default_search_key=lonely planet ukraine&widgetId=__mobileAssociatesSearchWidget_adunit_0&default_category_html=&default_category_value=&default_category_search=&isresponsive=true&theme=light&bg_color=FFFFFF&slotNum=0&debug=&viewerCountry=RO

in the Dev tools would fix the problem for that specific page load. I do not know what is causing that though, however, you are not the only one having that problem: Amazon Search Widget fails for spaces in search term

execute code after Amazon widgets are loaded

1 Answers1