Wheel-Size Services

The working example below shows a widget integrated with Amazon Product Advertising API.
It is a good example that shows how you can use widget and its API with your website.

Widget Code (please note that uuid parameter should be different for your own widget ):

    <div id="ws-widget" style="text-align:center;"></div>

    <br />
    <p class="role" id="hint" style="text-align:center;"></p>
    <h2 id="actionHeader" class="title-divider"></h2>
    <div class="" id="loaded-info">
        <div class="block-content team team-list margin-top-large">

        </div>
    </div>

<script src="//services.wheel-size.com/code/ws-widget.js"></script>
<script>
    var widget = WheelSizeWidgets.create('#ws-widget', {
        uuid: 'dd4115769da4460cbb2f44316a4d251e',
        width: '600'
    });

    widget.registerUserLinks({
        beforeTire: {
            href: '#',
            icon: 'search',
            title: 'Find tires on Amazon.com',
            clickPreventDefault: true  /*let`s prevent click  action*/

        },
        beforeRim: {
            href: '#',
            icon: 'search',
            title: 'Find Rims on Amazon.com',
            clickPreventDefault: true   /*let`s prevent click  action*/

        },
    });
    widget.on('click:tire', function(e) {
        $('#loaded-info').addClass('highlighted');  /*add highlisht effect, just visitor could see that somrhtin is in the process */
        $("#loaded-info  .block-content").html(""); /* make element #loaded-info empty */
        var strSearch = e.data.context.tire_width + "/" + e.data.context.tire_aspect_ratio + " R" + e.data.context.rim_diameter + " tires";
        $("#actionHeader").html("<span>Search for: <span class='de-em'>" + strSearch + "</span>at Amazon.com</span>");
        jsonQueries.getItems(strSearch);  /* do json query. Use  Amazon Product Adverstising Library based on PHP REST and SOAP using the Product Advertising API. (https://github.com/Exeu/apai-io) */
    });

    widget.on('click:rim', function(e) {
        $('#loaded-info').addClass('highlighted');  /* add highlisht effect, just visitor could see that somrhtin is in the process */
        $("#loaded-info  .block-content").html(""); /* make element #loaded-info empty */
        var strSearch = e.data.context.rim_diameter + "x" + e.data.context.rim_width + " rims";
        $("#actionHeader").html("<span>Search for: <span class='de-em'>" + strSearch + "</span>at Amazon.com</span>");
        jsonQueries.getItems(strSearch); /* do json query. Use  Amazon Product Adverstising Library based on PHP REST and SOAP using the Product Advertising API. (https://github.com/Exeu/apai-io) */
    });


    widget.on('change:model', function(e) {
        $("#loaded-info  .block-content").html("");
        $("#actionHeader").html("");
        $("#hint").html("Please click <b>loupe-search <span  class='glyphicon glyphicon-search' style='color:#e47911;'></span> </b>  icon to see tires / rims  from Amazon.com"); 
    });
    widget.on('change:make', function(e) {
        $("#loaded-info  .block-content").html("");
        $("#actionHeader").html("");
    });
    widget.on('change:year', function(e) {
        $("#loaded-info  .block-content").html("");
        $("#actionHeader").html("");
    });
    var strJsonPath = '//whispering-spire-2552.herokuapp.com/samples/Search/SimpleSearch.php';

    var jsonQueries = new function() {
        this.getItems = function(strSearch) {
            $.getJSON(strJsonPath, {
                    requestSearch: strSearch
                })
                .done(function(json) {
                    $('#loaded-info').removeClass('highlighted');
                    amazonItemsConfigure.fillAreaWithItems(json);
                })
                .fail(function(jqxhr, textStatus, error) {
                    var err = textStatus + ", " + error;
                    console.log("Request Failed: " + err);
                    $('#loaded-info').removeClass('highlighted');
                });
        }
    };
    var amazonItemsConfigure = new function() {
        this.fillAreaWithItems = function(data) {
            var obItems = data.Items.Item;
            var itemsListHTML = '';
            var i, price, imageURL, comments;
            for (i = 0; i < obItems.length; i++) {
                price = "";
                if (typeof obItems[i].OfferSummary.LowestNewPrice !== 'undefined') {
                    price = obItems[i].OfferSummary.LowestNewPrice.FormattedPrice;
                }

                imageURL = "";
                if (typeof obItems[i].MediumImage !== 'undefined') {
                    imageURL = obItems[i].MediumImage.URL;
                }
                comments = "";
                if (typeof obItems[i].EditorialReviews !== 'undefined') {
                    comments = obItems[i].EditorialReviews.EditorialReview.Content;
                }

                itemsListHTML = itemsListHTML +
                    '<div class="team-member">\
                  <div class="row">\
                  <div class="col-sm-2">\
                  <a href="' + obItems[i].DetailPageURL + '" title="' + obItems[i].ItemAttributes.Title + '">\
                  <img src="' + imageURL + '" class="img-thumbnail" alt="' + obItems[i].ItemAttributes.Title + '">\
                  </a>\
              </div>\
              <div class="col-sm-10">\
                  <h4 class="name">\
                  <a href="' + obItems[i].DetailPageURL + '" title="">' + obItems[i].ItemAttributes.Title + '</a>\
              </h4>\
              <p class="role">' + obItems[i].ItemAttributes.Brand + '</p>\
                  <p>' + obItems[i].ItemAttributes.Feature + '</p>\
                  <p>' + comments + '</p>\
                  <a class="btn btn-primary" href="' + obItems[i].DetailPageURL + '">Buy for ' + price + ' <i class="fa fa-arrow-right"></i></a>\
              </div>\
              </div>\
              </div>';
            }
            $("#loaded-info .block-content").html(itemsListHTML);
        }
    };
</script>