How to Build a nice looking Product Box for Amazon Affiliate Sites

11.06.2016 by Jens in tools | python

Lately, I've been venturing into building niche sites. Besides the business, I am also always curious what technic other use to create their sites.

I noticed a lot of them use Wordpress, and when they invest money, people even buy expensive Wordpress Themes and Plugins. There are some good out there, for sure, but when you don't use Wordpress you are pretty stuck with doing it yourself.

But one can learn a lot from these plugins, i.e. Thrive or Amazon Simple Affiliate.

One of those things is, how to display Products nicely. Inspired by that and a side note on HarryVSInternet about Embed.ly, and the fact i use Amazon, I started to build a small little helper: The Amazon Product Box Builder.

amzn_product_box.jpg

It is free to use and does not even require a backlink for the generated box. But I'd appreciate any feedback and of course, don't forget to share it. You need a side using Bootstrap 3 or style it yourself.

You can just use the tool and leave the article or if you like to know about the technical side, continue to read.

The Technical Part

The little helper consists of a server side doing the Amazon query and box builder and a client side for the input form and display of the result.

You need an Amazon Associate Account aka Affiliate Account and must also be signed up with the Amazon Advertising API (Part of AWS). Sadly you have to use your root AWS for the Advertising API; IAM Account didn't work for me.

Server Side

The server side is written in Python, Flask, Jinja and Amazon Simple Product API. It has just one single Route. It parses the input value from our form, translates everything to a query for Amazon and then joins the product we got with the template.

@app.route('/', methods=['POST'])
def buildbox():
    try:
        asin =  request.form['asin']
        associatetag = request.form['associatetag']
        if not associatetag:
            associatetag = ASSOCIATE_TAG
        marketplace = request.form['marketplace']

        amazon = AmazonAPI(AMAZON_ACCESS_KEY, AMAZON_SECRET_KEY, associatetag, region = marketplace.upper())
        product = amazon.lookup(ItemId=asin, )
        x = product.get_attribute('ProductGroup')

        link_name = 'Buy on Amazon'
        if marketplace == 'de':
            link_name = 'Bei Amazon kaufen'
        ret_value = render_template('std_box.html', product=product, buy_link_title= link_name)
        status = 200

    except urllib.error.HTTPError as e:

        if e.code == 400:
            status = 401
            ret_value = 'Amazon return a 400. Is your associate tag valid for the selected market?'
        else:
            status = 500
            ret_value  = 'Sorry, an error happend. Please try later again.'
    except AsinNotFound:
        status = 404
        ret_value = 'ASIN not found'

    resp = Response(ret_value, status=status)
    # set add header for testing
    return resp

I reduced the code to the essentials and think it explains itself.

Client Side

The Client is a single HTML page with some Javascript handling the form input, making an AJAX call to the backend and displaying its result. I used Bootstrap 3 for making the Box and site looking beautiful.

It is using Jquery, Bootstrap 3 and clipboard.js for the copy to clipboard functionality. I used the bootstrap starter example.

$(function(){

  new Clipboard('#copy2clip');

  $("#apbbform").submit(function(e){
    $('#errorBox').hide();
    $('#errorMsg').empty();

    $.ajax({
      url: '/amzn_box/',
      data: $('form').serialize(),
      type: 'POST',
      success: function(data,textStatus,jqXHR ){
        console.log(data);
        $('#result_code').text(data);
        $('#result_display').html(data);
      },
      error: function(jqXHR, textStatus, error){
        $('#errorMsg').text(jqXHR.responseText);
        $('#errorBox').show();
        console.log(jqXHR.responseText);
      }
    });
    e.preventDefault();
  });
});

Conclusion

It is not that time consuming to create small tools. I build the tool in a few hours, and the only hurdle was installing it on my webfaction account last night. lxml didn't want to get installed, and I to find the cause. The fix was to install an older version which was compatible with the server I am still on.


comments powered by Disqus