How to create multiple 360s swapped via swatches in Magento

[medlington2]

Hi,

I need to have multiple 360s of the same configurable product on my product page in Magento.

I need to be able to swap between the 360s by clicking on swatches and these swatches will be from 2 configurable attributes material and colour

Similar to how you have it setup in this demo:

http://www.360-product-views.com/360-vi ... tions.html

how would I go about implementing this? I cant find any guide to it.

So far I have the 360 working and have set it to 'ad-hock' and placed it just above my media block. My problem is that clicking on the swatches just changes the images in the media block rather than the 360. I have added the 360 viewer path into my configurable product. I have tried removing it from the configurable product and putting it in the simple products instead but this doesnt seem to work.

Can anyone help me or point me to a relevant guide please?

Magento V 1.9.2.2

Thanks

 

[WebSupport]

Thanks for contacting us here!

Product combinations (e.g colors, materials, etc) are pretty much impossible to support out of the box in our plugin as various Magento skins by 3d party developers implement it differently (because it's all done in JavaScript and according to a specific design and requirements).

We can guide you through implementing it though if you have a developer who's assisting with your Magento setup. In short, it requires calling our 360 product viewer API to reload current 360 product view with a different configuration xml file when user hits a swatch thumbnail or similar.

More details about the reload API call are available in our user guide on page 30.

PS: if you could share a link to your product page with us via email or here, we should be able to review and comment. Our email: support at webrotate360 dot com

 

[medlington2]

Hi,

Yes Id be interested in hearing how to implement it please, unfortunatly I dont have a live version of the site as its just on the development server but I am creating the entire theme from scratch so I will be able to make the nescessary adjustments.

please let me know the best way to proceed.

thanks

 

[WebSupport]

Apologies for the late reply here Just saw your email and realized that we missed to follow up...

This would be the simplest I think:

1) In your media.phtml when you build the swatch gallery by retrieving image thumbs for each simple product, also get each product's webrotate_path attribute (360 product viewer xml path) and use it as hyperlink's "href" for each of the image thumbs, e.g:

<ul class="yourGallery">
    <li>
         <a href="xml-path1.xml" class="thumb"><img src="your-thumb1.jpg"/></a>
    </li>
    <li>
         <a href="xml-path2.xml" class="thumb"><img src="your-thumb2.jpg"/></a>
    </li>    
</ul>

2) Then in javascript, which you can add in our plugin's wr360hook.js (located under the base skin) at the end of the WR360AdhocEmbedInitialize method, subscribe to thumb clicks and simply call the following inside the click handler:

jQuery(".thumb").click(function(e){
     e.preventDefault();
    _imageRotator.reload(jQuery(this).attr("href")); 
}

PS: this is assuming you keep using our Ad-hoc integration which is auto-initialized on each product page inside WR360AdhocEmbedInitialize (for embedded views) when a configurable or simple product has webrotate_path attribute filled in in admin.

Does this help?

 

[medlington2]

Hi,

thanks for the response. Im having some issues though, when I add the code to wr360hook.js it make the 360 disappear from my product page and stops the swatches working.

my full method looks like this, is this correct?

function WR360AdhocEmbedInitialize(placeholder, viewerWidth, viewerHeight, baseWidth, graphicsPath, configFileURL, rootPath, licensePath)
{
	var imageBlock = jQuery(placeholder);
	if (imageBlock.length <= 0)
		return;
	
	if (viewerWidth != "")
        imageBlock.css("width", viewerWidth);

	if (viewerHeight != "")
        imageBlock.css("height", viewerHeight)

    imageBlock.css("padding", 0);
	var newHtml = "<div id='wr360PlayerId'> \
                      <script language='javascript' type='text/javascript'> \
                         _imageRotator.settings.graphicsPath   = '" + graphicsPath + "'; \
                         _imageRotator.settings.configFileURL  = '" + configFileURL + "'; \
                         _imageRotator.settings.rootPath  = '" + rootPath + "'; \
                         _imageRotator.settings.responsiveBaseWidth = " + baseWidth + "; \
                         _imageRotator.licenseFileURL = '" + licensePath + "'; \
                      </script> \
                   </div>";

    imageBlock.html(newHtml);
    imageBlock.css("visibility", "visible");
	_imageRotator.runImageRotator("wr360PlayerId");
	
	jQuery(".thumb").click(function(e){
		 e.preventDefault();
		_imageRotator.reload(jQuery(this).attr("href"));
	}

}

 

[WebSupport]

Hi, would you be able to share a link to your test page as it would be pretty much impossible to guess what happened?

PS: do you see any errors in the browser debug console pertaining webrotate's 360 product viewer by any chance ?

 

[medlington2]

Hi,

Sorry for the delay getting back to you, Ive had to setup an online environment so I can show you the examples.

Here is a simple product using your example 360:

http://quality-designer-handbags.com/in ... /shoe.html

and here is a simple product with a different 360
http://quality-designer-handbags.com/in ... eapot.html

heres a config product that switches via swatches:

http://quality-designer-handbags.com/in ... oduct.html

and heres my config product which should be switching between 360s but doesnt:
http://quality-designer-handbags.com/in ... ppear.html

Yes it does throw errors in the console:

SyntaxError: missing ) after argument list


}

wr360hook.js (line 35)
3
TypeError: element.attachEvent is not a function


element.attachEvent("on" + actualEventName, responder);


prototype.js (line 5653, col 9)
TypeError: element.attachEvent is not a function


element.attachEvent("ondataavailable", responder);


prototype.js (line 5644, col 9)
TypeError: elementClassName is undefined


return (elementClassName.length > 0 && (elementClassName == className ||


prototype.js (line 2304, col 5)
3
TypeError: element.attachEvent is not a function


element.attachEvent("on" + actualEventName, responder);


prototype.js (line 5653, col 9)
TypeError: element.dispatchEvent is not a function


element.dispatchEvent(event);


prototype.js (line 5734, col 7)
ReferenceError: WR360AdhocEmbedInitialize is not defined


WR360AdhocEmbedInitialize(

 

[WebSupport]

Hi!

Sorry, I missed the closing bracket in my example above..

Should be like this (in wr360hook.js):

jQuery(".thumb").click(function(e){
     e.preventDefault();
    _imageRotator.reload(jQuery(this).attr("href"));
});

 

[medlington2]

Thanks,

Now the first 360 on the page works but it doesnt swap over when I click on either the thumbnails or the swatches.

I get the error:

TypeError: targetImage[0] is undefined
if (targetImage[0] is complete { //image already loaded -- swap immediatly

Also will this fix mean that the 360 changes on clicking the thumbnails or clicking on the swatches? Ideally Id like it to change via clicking on the swatches but if this isnt possible its not the end of the world as Ill just hard code in m own ones

 

[WebSupport]

The error is coming from some of your skin's code in app.js under var ProductMediaManager swapImages. I think it tries to replace the main image at the top but since there's the embedded 360 product view instead, it fails.

I guess, unless you want to implement swapping 360 product view with the gallery images (which can be somewhat involved), I suggest to use just the swatches you mentioned for reloading 360 views. Other option could be to hookup the gallery such that it opens popups instead of swapping the main one at the top.

 

[blackwat3r]

Any updates on this? I tried this method and not working for me.

This should work standard with the plugin, I assume most people going through the effort of 360 product views are also going to use some sort of custom options like color.

I was going to buy the pro plan, but I need a solution for color swatches.

 

[WebSupport]

The problem is that various Magento themes implement swatches differently and mostly in javascript so it's not possible to provide an override for this out of the box unfortunately ..unless we override the entire (or most of) product page which Magento folks wouldn't like.

If you have a web developer assisting with this, they should be able to hook up the viewer API to reload 360s based on a color selection and we can help with any questions.

 

[petergusta]

Hi,

this helped me a lot to set up the viewer.
I can reload it in "wr360hook.js" with:
_imageRotator.reload('path');

Now I would like to reload the views at the same image position as before.
I read that this is possible with the api object here:
http://www.webrotate360.com/Blog/post/F ... plate.aspx

apiObj.reload('360_assets/yourview/yourview.xml', null, null, apiObj.images.getCurrentImageIndex());
// instead of just apiObj.reload('360_assets/yourview/yourview.xml').

As I understand there is a callback function needed to access the apiObj to get the current image index.
How can I set this up in "wr360hook.js"?

Thank you for your help!

 

[petergusta]

I found a solution for this with the help of the sample.html from this example:
http://www.webrotate360.com/Blog/post/F ... plate.aspx

In magento "wr360hook.js" I changed the code like this:

//	var newHtml = "<div id='wr360PlayerId'> \
//                      <script language='javascript' type='text/javascript'> \
//                         _imageRotator.settings.graphicsPath   = '" + graphicsPath + "'; \
//                         _imageRotator.settings.configFileURL  = '" + configFileURL + "'; \
//                         _imageRotator.settings.rootPath  = '" + rootPath + "'; \
//                         _imageRotator.settings.responsiveBaseWidth = " + baseWidth + "; \
//                         _imageRotator.licenseFileURL = '" + licensePath + "'; \
//                      </script> \
//                   </div>";
	
	var newHtml = "<div id='wr360PlayerId'></div>";

    imageBlock.html(newHtml);
    imageBlock.css("visibility", "visible");
//	_imageRotator.runImageRotator("wr360PlayerId");
	
	var apiObj = null;

    // Initialize viewer
    jQuery('#wr360PlayerId').rotator({
    	licenseFileURL: licensePath,
    	configFileURL: configFileURL,
    	rootPath: rootPath,
    	graphicsPath: graphicsPath,
    	 responsiveBaseWidth: baseWidth,
    	 apiReadyCallback: function(api){apiObj = api;}
    });

For the reload at the same position as the current view, I call the api object like that:

currentIndex = apiObj.images.getCurrentImageIndex();
apiObj.reload('path', null, null, currentIndex);