Wheel-Size Services

The working example below shows a widget with Amazon integration.

Let`s open Amazon.com`s section where we can find and buy rims and tires. We will try to add Amazon links to our widget.

Open link

http://www.amazon.com/s/ref=sr_ex_p_n_feature_five_bro_0?rh=n%..181%2..6571%2Cn%...3567

We see that "Rims size" links are following:

10 inches: http://www.amazon.com/..._feature_five_browse-bin%3A6131674011&bbn....
11 inches: http://www.amazon.com/..._feature_five_browse-bin%3A6131675011&bbn....
12 inches: http://www.amazon.com/..._feature_five_browse-bin%3A6131676011&bbn....
13 inches: http://www.amazon.com/..._feature_five_browse-bin%3A6131677011&bbn....
...
20 inches: http://www.amazon.com/..._feature_five_browse-bin%3A6131686011&bbn....
...
28 inches: http://www.amazon.com/..._feature_five_browse-bin%3A6131694011&bbn....

According documentation we can use templates in links, like {{ rim_diameter }}. It is an angular template, so we can use different constructions like

{{ rim_diameter == 17 ? 7 : 6 }}
// or 
{{ (rim_diameter + "")[1] }}

In our case rim_diameter template should look like {{ (rim_diameter + 64) }} in URL:

http://www.amazon.com/..._feature_five_browse-bin%3A61316{{ (rim_diameter + 64) }}011&bbn....

If we choose Tire Aspect Ratio = 60 and Section Width = 205 on Amazon.com website, we will get the following URL in address bar of your browser:

http://www.amazon.com/s/ref...1681011%2Cp_section_width_bin%3A205%2Cp_tire_aspect_ratio-bin%3A50&bbn=353610011&ie=UTF8&qid=1432662754&rnid=491285011

So the final URL template will look like:

http://www.amazon.com/s/ref=sr_nr_p_tire_aspect_ratio-_2?fst=as%3Aoff&rh=n%3A15684181%2Cn%3A!15690151%2Cn%3A15706571%2Cn%3A353609011%2Cn%3A353610011%2Cp_n_feature_five_browse-bin%3A61316{{ (rim_diameter + 64) }}011%2Cp_section_width_bin%3A{{ tire_width }}%2Cp_tire_aspect_ratio-bin%3A{{  tire_aspect_ratio }}&bbn=353610011&ie=UTF8&qid=1432662754&rnid=491285011

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

<div>
    <h3 class="title-divider">
            <span>Find Rims and Tires<span class="de-em"> on Amazon.com</span></span>
    </h3>
    <div id="ws-widget"></div>
</div>
<script src="//services.wheel-size.com/code/ws-widget.js"></script>
        <script>
            var widget = WheelSizeWidgets.create('#ws-widget', {
                uuid: '58d5fc75790440cf9c015bd7b257013d',
                width: '600'
            });
            widget.registerUserLinks({
                beforeTire: {
                    href: 'http://www.amazon.com/s/ref=sr_nr_p_tire_aspect_ratio-_2?fst=as%3Aoff&rh=n%3A15684181%2Cn%3A!15690151%2Cn%3A15706571%2Cn%3A353609011%2Cn%3A353610011%2Cp_n_feature_five_browse-bin%3A61316{{ (rim_diameter + 64) }}011%2Cp_section_width_bin%3A{{ tire_width }}%2Cp_tire_aspect_ratio-bin%3A{{  tire_aspect_ratio }}&bbn=353610011&ie=UTF8&qid=1432662754&rnid=491285011&tag=wheelsize-20', 
                    icon: 'new-window',
                    title: 'Find tires on Amazon.com with'
                },
                afterRim: {
                    href: 'http://www.amazon.com/s/ref=nb_sb_noss?url=node%3D2201756011&field-keywords={{ rim_diameter }}x{{ rim_width }}+Wheels%2FRims+{{ bolt_pattern }}&tag=wheelsize-20',  // do not forget to add our referal GET param to the URL ;-)
                    icon: 'hand-right',
                    title: 'Find Rims for {{ make.title}} {{ model.title }} {{ trim}} on Amazon.com'
                }
            });
        </script>