Xoogu Big River Shopping Site HTML5 Carousel is an HTML and javascript based version of Amazon’s Flash based carousel widget. It allows you to display a carousel of products from Amazon that users can rotate through using arrow buttons below the carousel. It supports use of Amazon Associate tags to allow you to earn a commission each time someone buys something after clicking through to Amazon from the carousel. It is responsive, so will fit to the available screen space.
At the moment the carousel only works as a replacement for the SearchAndAdd and ASINList versions of Amazon’s flash based widget. The following features are currently missing:
- Shuffle Products
- Vertical
- Change amount of items for SearchAndAdd
- Other types of carousel e.g. Best sellers
- With odd numbers of items they look to be arranged strangely
- Touch support for rotating carousel
- Support for IE10 and below
- No reflections displayed below the items in browsers not based on Webkit
- China, India, Spain, and Italy marketplaces are not supported
Please also note that clicking an arrow button rotates the carousel by one item. This is different from Amazon’s flash based carousel, where clicking and holding on the arrow button gradually rotates the carousel.
If any of those features are particularly important to you, or there are any other features you’d like to see, please let me know. Likewise if you find anything isn’t working properly. You can leave a comment below, send me a message via the contact form or email me on info at.
The script can attempt to detect what country a user is from based on the user’s language settings, then get the items to show from the relevant Amazon site (with the relevant associate tag).
If you’re wondering about the naming of this script, it is nothing to do with the Canadian town of Big River. Rather it is that Amazon does not allow use of its name as part of the name of anything produced by a third party. So hopefully from the name it’s reasonably clear that the script is for displaying products from Amazon, without actually including the word ‘Amazon’ within the name.
The script can be used on any website, but I’ve also developed a WordPress plugin. The script is bundled with the plugin, which you can download here: Xoogu WPAA Carousel 2015-08-11. If you just want the javascript and CSS files, you can easily extract them from the zip.
The WordPress plugin info can be found further on, below is the info on using the standard javascript script.
Using the amazon carousel javascript
To use the script, upload the amazon-carousel.js and amazon-carousel.css files to your web server (or concatenate them onto the end of your existing js & css files). Include them from the page, the js file is quite happy being included at the bottom of the page.
To create a carousel, you need to create a <div> with a class of amazon-carousel, and various data properties that the script uses to fetch the items from Amazon. For example, for a SearchAndAdd widget:
<div class="amazon-carousel" data-widgetType="SearchAndAdd" data-title="Title of the widget" data-marketPlace="DE" data-tag="my-affiliate-tag-for-amazon-de" data-keywords="Egg" data-searchIndex="Electronics" ></div>
Or for an ASINList widget:
<div class="amazon-carousel" data-widgetType="ASINList" data-title="4K TVs" data-ASIN="B00LHR3JAI,B00MH4X072,B00KFAMQPM,B00LHTET9Q,B00IVXCE8O,B00M8UMEKY,B00QSL4NL2,B00GE4EXAY,B00NV0UP56,B00IWZHMMO" >
The html above produces the following carousels when processed by the script:
The data attributes available are:
- widgetType
- The type of widget, currently only SearchAndAdd and ASINList are supported
- title
- The heading displayed at the top of the widget
- marketPlace
- The Amazon site to fetch results from. Supported marketplaces are CA, DE, FR, GB, JP, US. Leave blank (or omit this attribute) to use geo lookup based on the user’s language settings.
- tag
- Your affiliate tag (if any) for the Amazon marketplace chosen. Leave blank (or omit this attribute) when using geo lookup.
- keywords
- Only for SearchAndAdd type widgets. The keywords you want to use to search for items to be displayed.
- searchIndex
- Only for SearchAndAdd type widgets. The category to search within.
- ASIN
- Only for ASINList type widgets. Comma separated list of ASINs of items to display.
Using Geo Lookup
Each Amazon site has a separate affiliate program, so if you are using geo lookup, you need to provide the script with each of your affiliate tags for each site.
To do this, edit the amazon-carousel.js file and find the line
document.addEventListener('DOMContentLoaded', function(){addCarousels();});
at the bottom of the script. Change this to add an object that maps the marketplaces to your affiliate tag for each marketplace, e.g.
document.addEventListener('DOMContentLoaded', function(){addCarousels({"CA" : "my-aff-tag-for-canada", DE : "my-aff-tag-for-germany", FR : "my-aff-tag-for-france", GB : "my-aff-tag-for-britain", JP : "my-aff-tag-for-japan", US : "my-aff-tag-for-USA"});});
Note that you don’t have to provide affiliate tags for every single marketplace. If you just provide the US and CA affiliate tags, then it just means that you won’t earn any commission from users based in Britain, Japan, etc.
When using Geo Lookup there needs to be a default marketplace set, so that users from countries not supported will still see results from an Amazon site. The simplest way to change the default marketplace is to find the line
var sDefaultMarketPlace = 'US';
and change the value from US to whatever marketplace you want the default to be.
WordPress plugin for use with WPAA
WordPress Advertising Associate (WPAA) is a great plugin that allows you to easily add Amazon affiliate links and widgets to your WordPress website using shortcodes. The Xoogu WPAA Carousel replaces the carousel shortcode used by WPAA, so that the shortcode outputs an HTML5 based mobile friendly carousel widget, rather than the standard Amazon fixed size flash based widget.
To use the plugin, simply install and activate it. It automatically takes over the processing of amazon_carousel shortcodes of the SearchAndAdd or ASINList type. WPAA continues to handle the other types of amazon_carousel shortcodes.
The plugin adds a single setting option to the WPAA settings – whether or not to use js-based geo lookup. At the default setting, whatever you have set in WPAA will be used. E.g. if you have WPAA set to use Geo Localization with ip2nation, then that will be used. Alternatively, with ‘Use js lookup of browser language‘ selected, then it will try to detect the user’s country based on the language settings of their browser. Using js lookup is recommended if you are using static page caching (such as provided by WP Super Cache or W3 Total Cache).
If you manually set the marketplace in the shortcode to one that is not supported, and are not using js based geo lookup, then the user will see results from amazon.com, no matter what marketplace you have set as being the Primary in the WPAA settings. When js based geo lookup is selected though, then it will use the Primary marketplace you have set if the user is not located within a supported marketplace area.
Changelog
2015-08-11
- No updates to the js, only the WordPress functionality
- Changed so that the CSS won’t be included on admin pages, and the js will only be included on pages containing the shortcode
- Fixed a problem where the non-minified version of the js was being included instead of the minified version
2015-07-11
- Initial version