Load Amazon MP3 widget on the fly

I’m having a terribly frustrating time getting this to work. I want to dynamically load/update an amazon mp3 widget.

Amazon provides two scripts to include in the intended target location of the widget (https://widgets.amazon.com/Widget-Source/). I want to replace the widget with a new widget on a click event.

  • Alexa (Amazon Echo) conversation skill - Using Session Attributes (JavaScript - AWS Lambda)
  • Alexa Skills Kit: How to add an image to a standard card using JS
  • Amazon API call to get number of listed products on page
  • Amazon S3 CORS Configuration XMLHttpRequest GET
  • Amazon S3 when creating an object it throws a cURL error
  • Amazon S3 direct file upload from client browser - private key disclosure
  • I have tried inserting the scripts as strings into a DOM element using jQuery’s html() and appendTo(). I know that the injection works to some degree because I get the test alert that I added to the end of it.

    I have tried using createElement() which is recommended here: Can't append <script> element. Again, the alert() fires but no widget appears.

    I found someone dealing with the same issue here: Is it possible to programmatically add Amazon MP3 widgets. I’m hopeful since it has an accepted answer but I still don’t understand how it helps to introduce the new widget into the DOM.

    <script type='text/javascript'>
    var amzn_wdgt={widget:'MP3Clips'};
    amzn_wdgt.tag='widgetsamazon-20';
    amzn_wdgt.widgetType='ASINList';
    amzn_wdgt.ASIN='B0011Z0YR2,B00137W4P8,B0013G0PG4,B001AU8ZLK,B001AUCJZ8,B001AUEMDK,B001AU8YB6,B001AU8YBQ,B001AU8YCK,B001AUCK2U,B001AUEMFS,B001AUCK52,B001AU6XE6,B001AUEMH6';
    amzn_wdgt.title='What I\'ve been listening to lately...';
    amzn_wdgt.width='250';
    amzn_wdgt.height='250';
    amzn_wdgt.shuffleTracks='True';
    amzn_wdgt.marketPlace='US';
    </script>
    <script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'>
    

    Thanks.

  • upload canvas image to S3 server
  • Get Amazon item images and description from ASIN
  • Allow OPTIONS HTTP method with Amazon S3
  • Alexa (Amazon Echo) conversation skill - Using Session Attributes (JavaScript - AWS Lambda)
  • Alexa Skills Kit: How to add an image to a standard card using JS
  • Wordpress throws an error when loading http_headers_1.js
  • One Solution collect form web for “Load Amazon MP3 widget on the fly”

    You can try this. You will set the properties of the amzn_wdgt and then when someone clicks on your element it will load the script and do whatever it needs to do with the object that has been set.

    <script>
    var amzn_wdgt={widget:'MP3Clips'};
    amzn_wdgt.tag='widgetsamazon-20';
    amzn_wdgt.widgetType='ASINList';
    amzn_wdgt.ASIN='B0011Z0YR2,B00137W4P8,B0013G0PG4,B001AU8ZLK,B001AUCJZ8,B001AUEMDK,B001AU8YB6,B001AU8YBQ,B001AU8YCK,B001AUCK2U,B001AUEMFS,B001AUCK52,B001AU6XE6,B001AUEMH6';
    amzn_wdgt.title='What I\'ve been listening to lately...';
    amzn_wdgt.width='250';
    amzn_wdgt.height='250';
    amzn_wdgt.shuffleTracks='True';
    amzn_wdgt.marketPlace='US';
    
    $('.clickMe').click(function(e){
        e.preventDefault();
        if(typeof amzn_wdgt != 'undefined'){
            $.getScript('http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js');
        }
    });
    </script>