Multiple rotators on a single page

[carpe]

I have successfully installed the free JS rotator on a BigCommerce product page:
[link removed]

However, I need to build a page which contains rotators for multiple products, and have been unable to get any after the first to run successfully.

I do not need multiple rotators to display simultaneously. Instead, when a product is chosen, a new rotator is initialised using WR360.ImageRotator.Create() and the images are loaded in a hidden <div> which is displayed when the user clicks on the "360 VIEW" icon. When the used selects a new product, the rotator is destroyed and a new one is initialised and activated with a new config.xml path.

After each page refresh, the first rotator always works, subsequent ones do not. Any of the products work the first time. When another product is loaded, there is no pre-load image and the loading progress animation (the three grey rectangles in the upper left corner) run continuously without displaying a percentage. This includes cases in which the user attempts to view the first product again after clicking away to another product and back again. To be clear, only the first instance of the class is functioning properly, and all of the image/config file paths work correctly the first time.

I notice when I inspect the rotator objects in the browser console that the properties bB and bU are populated with data (including, in bU.aw, all of the image file paths) for the first instance, then null for each subsequent instance. In other words, the constructor seems to execute correctly only once for each page load.

I checked the <div> dimensions as per this answer:
https://www.360-product-views.com/forum/viewtopic.php?f=3&t=732&p=2299#p2299
but without success.

I also tried generating unique HTML id's for each rotator's containing element, again without affecting the results.

Any further troubleshooting ideas would be welcome. Thanks.

 

[WebSupport]

Hi and thanks for the detailed explanation!

1) Can you please share a link to the page with the reproducible issue?
I.e where we can select products on the same page and see what's going on.

2) Is there particular reason (e.g compatibility, etc) the website is using a very old version of WebRotate scripts (v3.5 from 2014-2015)?

 

[carpe]

First off, thanks for your response, I really appreciate the support.

1) Reached out to client to get a time window to apply the code to their site; expect late today or early tomorrow, will post here.

2) This is the version that has worked in the past, didn't see the need to update. Incidentally, one of the troubleshoots I tried was pasting a newer version of imagerotator.js (here: https://cdn.webrotate360.com/lib/imagerotator/latest/js/imagerotator.js), which seemed to make the problem worse (or at least not better). The first rotator still loads correctly, but subsequent attempts simply load an empty <img> tag with no src attribute; the progress animation and branding tag don't appear at all, and the CSS adds extraneous margins that throw the spacing off.

 

[WebSupport]

Yes, please send us the link

Please try including the latest CSS for the newer imagerotator to work correctly. v3.6.x has too many fixes and improvements which will affect the deployment one way or another and a few that relate to what you are doing. This would be the first thing we would recommend after analyzing the link if it uses the old script.

 

[WebSupport]

PS: api object that we return upon initialization has api.reload method that can be used to reload the same instance of the viewer with a different .xml which may help right away.

 

[carpe]

You can view the page in question here:
[link removed]
Use the preview code berlin

From the Select Capacity menu, select 32 oz. This will cause details for all sub-products to load. Both of the available colours have image rotators installed. After you choose one, click the 360 VIEW thumbnail to display the rotator. When you select the other colour, the still image will appear; the 360 VIEW thumbnail will now display a malfunctioning rotator.

Also, just saw your most recent post and will try api.reload right now.

 

[WebSupport]

Thanks for the link.

The error we see right now now is in removeRotator at WR360.ImageRotator.prototype.reload() which you probably just added. The idea of reload api is a bit different (please see below).

Instead of creating multiple instances which likely didn't work very well in v3.5, you can use reload via the API object on a single instance you would create. API object is received via the callback you can pass as a setting:

this.newRotator.settings.apiReadyCallback = function(api) {
// myAPI = api;	
}

myAPI.reload("newXMLpath");

PS: in any case, we really suggest to upgrade to v3.6.x as all of the functionality we discussed here was reworked since v3.5.

 

[carpe]

Thanks again for all your help.

I've updated the code to 3.6 and stored the api instance, then ran reload() on the same instance. The <div> which holds the rotator after the first call now just comes up empty, rather than in a perpetual "loading" state.

 

[carpe]

I figured it out. The api.reload() function empties out the previous rotator, but leaves the empty HTML element. Since I was using an id attribute to reference it, this left multiple instances if a single id in the DOM, and jQuery was only grabbing the first one.

Thank you so much for helping me out with this.

 

[WebSupport]

Any time.. thanks for the update!