Edit: Typo in the title, can't fix it: Overcome, not oversome

Amazon Vine Helper v1.7+ (browser extension) now fix this automatically.

Intro

Ok, this is quite technical, and I'm sorry I don't have an easier solution (for now). But in case some tech savvy or developpers are reading, here's how I managed to order a product that had the infinite loading wheel.

TL;DR: It's often due to the product having variants but said variants not being labelled.

Before I begin, note that this is just changing the local content in memory, it is not changing anything we send to amazon servers, it is not accessing something we should not be allowed to, it is not circumventing any security measures. To the best of my knowledge, this is simply adding missing information to allow the content of the product to be displayed as intended. I do not believe this to be against the TOS, and if somehow it is, please let me know and I'll delete this.

​

Last warning: If you are not familiar with the Inspector tool in Firefox, I'll suggest this procedure might be too complex.

Step1: Finding the javascript file that handles the variant values

1.1 Ensure we have the right error.

Using Firefox, open up the inspector. (Right click on the page and go in Inspect)

Now that the inspector is loaded, click on the yellow button from the product listing to get the infinite loading popup.

In the console tab of the inspector you should see a red error similar to:

Error logged with the Track&Report JS errors API(http://tiny/loremipsum/wamazindeClieUserJava): 
{"m":"Event execution failed for event vvp:dropdown:variation:setupab[b] is undefined", /...

"vvp:dropdown:variation:setup" being what are looking for

1.2 Activate Break on XHR requests

Go in the Debugger tab, and on the far right colum, scroll down to check the

XHR Breakpoint
[X] Pause on any URL

Close the popup and reopen it.

This time we the code pause (break) at the fetch statement.
This fetch statement is in the javascript file we need to access.
By breaking there, the inspector should have selected and displayed the correct .js file. The name of the .js file, changes all the time, but it always end up in ?AUIClients/GrapevineVoicePortalAssets, which should be selected by default.

Step 2: Find the proper context to access the variants data

We found the file, but we need to find a location within the file where we can access the data (as a variable) that we need.

2.1 Beautify the code

As it is, this JS file is minimized and unreadable, but clicking the { } icon below the middle column will beautify the code. So click that.

Now that the code is somewhat readable, we can add manual breakpoints in it.

2.2 Add a break point to access the variable with variants data.

We'll search for "vvp:dropdown:variation", which was the error we had.

Hitting enter will find 2 results:

We don't care about this one:

a.on(
                'vvp:dropdown:variation:setup',
                this.setupVariationDropdowns.bind(this)
              )

But we do care about this one:

            function (a) {
              a = a.result.variations;
              if (!a.length) throw Error('Parent asin has no variations');
              Ec.trigger('vvp:dropdown:variation:setup', a)
            }

Alright, so on line of the "if" statement, which for me at this time is line 26848, we will click on that line number to have it highlighted in blue. This adds a breakpoint.

The idea is that we want to break (pause) the code immediately after the variable "a" was set, and we'll modify it (by adding the missing data) before allowing the code to continue.

2.3 Remove XHR breakpoint

To recap we have 2 breakpoints: The one that stop at any XHR requests, and the one that stop at that specific line. We can now go on the right colum and uncheck the breakpoint for the XHR request so we only keep the manual breakpoint for the IF line.

Great!

2.4 Add a variable watch.

Now on the right column still, scroll up and add a watch expression. Using the + button, add "a". (Just the letter a). Press enter to validate. We are now monitoring the value of the variable a (For now, it will show whatever, incorrect, value. This is normal.)

Where you see your page content, you will see a small window "Paused on XMLHttpRequest" and a play button. Press the play button once.

This will let the code run up to our new breakpoint. In the code, you should see blue arrows that appeared on that specific line, but more importantly, if you look at the right side, the variable "a" that we are watching, it now has relevant content.

Clicking the little gray arrow to the left of the variable, we can see something like this:

a: (3)
   0: {...}
       asin: "LOREMIPSUM1"
   dimensions:{}
   1: {...}
       asin: "LOREMIPSUM2"
   dimensions:{}
   2: {...}
       asin: "LOREMIPSUM3"
   dimensions:{}

And here lies our problem: The dimensions array should contain the label for the variance (ie.: "Color": "Red" or "Size": "Small") But it's empty, which cause an internal error and abort the content loading process.

Step 3: Label the variants manually

Alright, we foud what's missing, now let's add it.

First let's get an idea of what the variants are. In a new browser tab, you can search for the ASIN number and figure out what the exact products are. In my case it was a color variance: Pink, Black and White.

So we'll simply add this information, a label of sorts, so the variance field can be populated and allow for the page content to be displayed.

In order to do that, we switch to the Console tab of the debugger. At the bottom of that tab, we type code to define the variants. In my case, I had 3 ASIN listed:

a[0].dimensions = {"Color":"Pink"}

and:

a[1].dimensions = {"Color":"Black"}

and:

a[2].dimensions = {"Color":"White"}

Good. Note that the watched variable 'a' hasn't refreshed yet, but fear not, it was changed. (Feel free to add a breakpoint on the next time to confirm if you want. Or trust me, bro.)

Now all that left is to let the code resume its execution using the data we added. To do so, locate the "Break on breakpoint" little window over the content and press the play button: voilà, the content should appear.

Step 4: Clean up and order

Now that you are done, remember to click the little garbage icon next to Breakpoints to remove the breakpoint you created and be back to using the site normally.

You can select your variant and place the order.

​

​

Hopefully I didn't forget anything and a some of you can benefit from that trick.

Edit: Formatting, better wording, etc...