apiReadyCallback working only once

A

akhileshk

New member
I am trying to integrate Webrotate 360 into my Magento 2 website. I have created it as a module and it is working. Now, I want to prepend the site URL before the hotspot's relative URL. I have prepended it using the API but it only works once. When I click on any of the hotspots, the new image is loaded, but the API for appending the URL is not working in the new image.


JavaScript: 
require(['jquery', 'webrotate'], function($) {
    jQuery(document).ready(function() {
      jQuery('#wr360PlayerId').rotator({
        licenseFileURL: '<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360/license.lic'); ?>',
        configFileURL: '<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360/360_assets/Demo Room/Demo Room.xml'); ?>',
        graphicsPath: '<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360/imagerotator/html/img/basic'); ?>',
        responsiveBaseWidth: 1000,
        responsiveMinHeight: 0,
        googleEventTracking: false,
        apiReadyCallback: (api, isFullScreen) => {
          api.hotspots.onAction(hotspotConfig => {
            console.log(JSON.stringify(hotspotConfig, null, 4));
            if (hotspotConfig.id == "productpage") {
              hotspotConfig.hotspotInfo.url = "<?php echo $block->getUrl(''); ?>/" + hotspotConfig.hotspotInfo.url
            } else {console.log(hotspotConfig.hotspotInfo.url)
              hotspotConfig.hotspotInfo.url = "<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360'); ?>/" + hotspotConfig.hotspotInfo.url
            }
            return hotspotConfig; // Returning false indicates that you don't want to override a default hotspot action.
          });
        }
      });
    });

  });
 
F

ForumAdmin

Administrator
Staff member
Hi, yes, it works as designed in that the callback is called once when viewer is loaded and the second time when full-screen view is loaded if you have it configured, i.e the high-res images and user triggered it.

There's another callback for when it's "reloaded" using reload function which looks like you are using via hotspot Hyperlink action. Here's its signature:

Code: 
reloadCallback({
    configFileURL: xml url that was used to reload the viewer
    rootPath: rootPath or null
}, isFullScreen)

But I don't think it will help in your case. The best is probably to have a PHP route for loading xml files, i.e instead of loading XML file directly, use some PHP get request to pull the XML and update your hotspot URLs in PHP upon request as needed.
 
Last edited:
F

ForumAdmin

Administrator
Staff member
PS: we do have an undocumented callback that we use internally and it may do what you need but it's not very straightforward as you will need to modify XML content directly. For example:

Code: 
configReadyCallback: function(xml, isFullscreen) {
   var $ui = $($(xml).find('userInterface')[0]);
   $ui.attr('showFullScreenButton', false);
}

...use it at your own risk as it's undocumented and we will not be able to help much if something doesn't work with it.
 
Last edited:
A

akhileshk

New member
ForumAdmin said:
Hi, yes, it works as designed in that the callback is called once when viewer is loaded and the second time when full-screen view is loaded if you have it configured, i.e the high-res images and user triggered it.

There's another callback for when it's "reloaded" using reload function which looks like you are using via hotspot Hyperlink action. Here's its signature:

Code: 
reloadCallback({
    configFileURL: xml url that was used to reload the viewer
    rootPath: rootPath or null
}, isFullScreen)

But I don't think it will help in your case. The best is probably to have a PHP route for loading xml files, i.e instead of loading XML file directly, use some PHP get request to pull the XML and update your hotspot URLs in PHP upon request as needed.
Click to expand...
Did you mean to generate the XML file dynamically?
 
A

akhileshk

New member
ForumAdmin said:
PS: we do have an undocumented callback that we use internally and it may do what you need but it's not very straightforward as you will need to modify XML content directly. For example:

Code: 
configReadyCallback: function(xml, isFullscreen) {
   var $ui = $($(xml).find('userInterface')[0]);
   $ui.attr('showFullScreenButton', false);
}

...use it at your own risk as it's undocumented and we will not be able to help much if something doesn't work with it.
Click to expand...
This function doesn't seem to work. On which event this function is triggered?
 
A

akhileshk

New member
That is a call-back function, right? Or do we need to call it? Below is my code.

Code: 
require(['jquery', 'webrotate'], function($) {
    jQuery(document).ready(function() {
      jQuery('#wr360PlayerId').rotator({
        licenseFileURL: '<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360/license.lic'); ?>',
        configFileURL: '<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360/360_assets/Demo Room/Demo Room.xml'); ?>',
        graphicsPath: '<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360/imagerotator/html/img/basic'); ?>',
        responsiveBaseWidth: 1000,
        responsiveMinHeight: 0,
        googleEventTracking: false,
        configReadyCallback: function(xml, isFullscreen) {
          console.log(xml)
        },
        apiReadyCallback: (api, isFullScreen) => {
          api.hotspots.onAction(hotspotConfig => {
            console.log(JSON.stringify(hotspotConfig, null, 4));
            if (hotspotConfig.id == "productpage") {
              // hotspotConfig.hotspotInfo.url = "<?php echo $block->getUrl(''); ?>/" + hotspotConfig.hotspotInfo.url
            } else {
              console.log(hotspotConfig.hotspotInfo.url)
              hotspotConfig.hotspotInfo.url = "<?php echo $this->getViewFileUrl('Idm_InteractiveDemoRoom::webrotate360'); ?>/" + hotspotConfig.hotspotInfo.url
            }
            return hotspotConfig; // Returning false indicates that you don't want to override a default hotspot action.
          });
        }
      });
    });

  });
 
You must log in or register to reply here.
Top