Adobe Commerce (previously Magento)

1Install via Composer

If you have Composer installed, simply navigate to the root of your Magneto installation and run these commands in Magento CLI:

composer require webrotate360/module-product-viewer-standard
php bin/magento module:enable WebRotate360_ProductViewerStandard --clear-static-content 
php bin/magento setup:upgrade
php bin/magento cache:flush

2Install manually from zip

Navigate to the Download tab at the top of the page to download the M2 package (Standard zip) for your Magento version then follow these steps:

• Extract the WebRotate 360 folder from the archive.
• Upload the folder via FTP or copy locally under /app/code/ of your Magento installation.
• Run these commands via Magento CLI to install and enable the module:

php bin/magento module:enable WebRotate360_ProductViewerStandard --clear-static-content  
php bin/magento setup:upgrade
php bin/magento cache:flush

3Install from GitHub

Navigate to extension's page on GitHub and download it as a zip archive by clicking Clone or Download and selecting Download ZIP. Then follow these steps:

• Create an /app/code/WebRotate360/ProductViewerStandard directory in your Magento installation.
• Extract the contents of magento2-standard-master from the zip and copy or upload everything to /app/code/WebRotate360/ProductViewerStandard
• Run these commands via Magento CLI to install and enable the module:

php bin/magento module:enable WebRotate360_ProductViewerStandard --clear-static-content  
php bin/magento setup:upgrade
php bin/magento cache:flush

4Create an attribute

Create a new product attribute and set the attribute code to webrotate_path and the catalog input type to Text Field. Assign the new attribute to any existing attribute set where you are planing to use 3D or 360 product views. If using Master Config (available in PRO and Enterprise) as per the following notes, create an additional attribute with the attribute code set to webrotate_root.

5Configure and test

Once everything is installed as per the previous steps, navigate to Stores->Configuration in admin and expand WebRotate 360 Product Viewer->Standard to set desired viewer skin and gallery slide position.

Select a test product in the Catalog and enter the following demo viewer config URL (hosted via PixRiot) in the webrotate_path attribute field created earlier. Alternatively, copy "sampleshoe" folder that is installed with the plugin under WebRotate360/ProductViewerStandard/view/frontend/web/360assets to a folder of your choice in your Magento installation and update the attribute field accordingly. 

https://s1.pixriot.com/433181dfa6/CMS/Magento/Example/Example.xml

6Publish and upload your own product views

Download our desktop software and publish a 360 product view using your own product images or use our sample images that are linked under additional resources. FTP upload is available in the software or you may upload the published assets to your server manually (via FileZilla, etc). Consider using our optimized PixRiot service to host and manage your spins online for unmatched convenience. You only need to upload a single folder located under published/360_assets of your published SpotEditor project for each product view. You may also publish multiple 360 product views into a single 'published' location and upload all product views at once.

Once uploaded, note the URL of the configuration file (.xml) in the uploaded folder and then enter a relative URL of the configuration file on your server in the attribute field (webrotate_path) for selected products in the Catalog accordingly.

7Load images from CDN or use master config (PRO)

You can create an extra product attribute with the attribute code webrotate_root to allow specifying an alternative location of the 360 or 3D product images for each product. The root value is a URL (e.g http://mycdn.com/360_assets/product1/) that can point to a folder with images on an external server. When it's configured, the module will prepend the webrotate_root URL to the relative image path stored in the viewer configuration xml for each image. This is valuable when you need to host the assets on a dedicated file server or CDN.

This feature can be also used to load multiple product views via a single (master) config xml that you can set under the plugin settings via Master Config URL, assuming the number of images and their file names are the same across selected product views. If Master Config URL is configured in the module settings, you don’t need to specify the webrotate_path attribute in the Catalog for those products that share the same config , i.e you would only use the webrotate_root parameter, pointing to the image assets.

1Install via Composer

If you have Composer installed, simply navigate to the root of your Magneto installation and run these commands in Magento CLI:

composer require webrotate360/module-product-viewer-adhoc
php bin/magento module:enable WebRotate360_ProductViewerAdHoc --clear-static-content 
php bin/magento setup:upgrade
php bin/magento cache:flush

2Install manually from zip

Navigate to the Download tab at the top of the page to download the M2 package (AdHoc zip) for your Magento version then follow these steps:

• Extract the WebRotate 360 folder from the archive.
• Upload the folder via FTP or copy locally under /app/code/ of your Magento installation.
• Run these commands via Magento CLI to install and enable the module:

php bin/magento module:enable WebRotate360_ProductViewerAdHoc --clear-static-content  
php bin/magento setup:upgrade
php bin/magento cache:flush

3Install from GitHub

Navigate extension's page on GitHub and download it as a zip archive by clicking Clone or Download and selecting Download ZIP. Then follow these steps:

• Create an /app/code/WebRotate360/ProductViewerAdHoc directory in your Magento installation.
• Extract the contents of magento2-adhoc-master from the zip and copy or upload everything to /app/code/WebRotate360/ProductViewerAdHoc
• Run these commands via Magento CLI to install and enable the module:

php bin/magento module:enable WebRotate360_ProductViewerAdHoc --clear-static-content  
php bin/magento setup:upgrade
php bin/magento cache:flush

4Create an attribute

Create a new product attribute and set the attribute code to webrotate_path and the catalog input type to Text Field. Assign the new attribute to any existing attribute set where you are planing to use 3D or 360 product views. If using Master Config (available in PRO and Enterprise) as per the following notes, create an additional attribute with the attribute code set to webrotate_root.

5Configure and test

Once everything is installed as per the previous steps, navigate to Stores->Configuration in admin and expand WebRotate 360 Product Viewer->Ad-hoc.

Follow these steps to configure the extension:

• Enter a CSS class or id of an html element that you would like to use as a placeholder for a 360 or 3D product view (or a popup activation button) on your product pages under Page Placeholder.
• Configure the rest of the settings by following field descriptions on the module page (e.g., embed in place, viewer width & height, skin, etc).
• Select a test product in the Catalog and enter the following demo viewer config URL in the attribute field created earlier (webrotate_path) and save and refresh Magento caches (replace your-root-theme-folder-path as per your folder structure).

/pub/static/frontend/Magento/your-root-theme-folder-path/WebRotate360_ProductViewerAdHoc/360assets/sampleshoe/config.xml

6Publish and upload your own product views

Download our desktop software and publish a 360 product view using your own product images or use our sample images that are linked under additional resources. FTP upload is available in the software or you may upload the published assets to your server manually (via FileZilla, etc). Consider using our optimized PixRiot service to host and manage your spins online for unmatched convenience. You only need to upload a single folder located under published/360_assets of your published SpotEditor project for each product view. You may also publish multiple 360 product views into a single 'published' location and upload all product views at once.

Once uploaded, note the URL of the configuration file (.xml) in the uploaded folder and then enter a relative URL of the configuration file on your server in the attribute field (webrotate_path) for selected products in the Catalog accordingly.

7Load images from CDN or use master config (PRO)

You can create an extra product attribute with the attribute code webrotate_root to allow specifying an alternative location of the 360 or 3D product images for each product. The root value is a URL (e.g http://mycdn.com/360_assets/product1/) that can point to a folder with images on an external server. When it's configured, the module will prepend the webrotate_root URL to the relative image path stored in the viewer configuration xml for each image. This is valuable when you need to host the assets on a dedicated file server or CDN.

This feature can be also used to load multiple product views via a single (master) config xml that you can set under the plugin settings via Master Config URL, assuming the number of images and their file names are the same across selected product views. If Master Config URL is configured in the module settings, you don’t need to specify the webrotate_path attribute in the Catalog for those products that share the same config , i.e you would only use the webrotate_root parameter, pointing to the image assets.

1Apply to your theme

If your Magento theme doesn't use either the default or rwd design package, copy this layout file and the webrotate360 template folder to your current design accordingly:

app/design/frontend/default/default/layout/webrotate360.xml
app/design/frontend/default/default/template/webrotate360

2Create an attribute

Create a new product attribute and set the attribute code to webrotate_path and the catalog input type to Text Field. Assign the new attribute to any existing attribute set where you are planing to use 3D or 360 product views. If using Master Config (available in PRO and Enterprise) as per the following notes, create an additional attribute with the attribute code set to webrotate_root.

3Choose integration mode

There are two integration modes that you can choose from under extension settings in admin: Standard and Ad-hoc.

Standard integration will override the default implementation of the product media block (the one that is usually presented on the left side of a product page with a thumbnail gallery). The Standard integration can be configured to either embed 360 or 3D product views in place of the main product image or render as an extra gallery thumbnail that activates a lightbox popup with a product viewer loaded inside the popup.

Note that when the Standard integration mode is enabled, the default product image zooming is implemented via the lightbox popup as well.

It's possible that your Magento theme or another extension already overrides the product media block. This may prevent this extension from running in the Standard mode as described earlier or may result in disabling any previous customizations in the media block that you would like to keep.

Ad-hoc integration mode can help with this as it doesn't override existing customizations. Instead, it dynamically embeds itself in place of an html placeholder that you can specify in the module settings in admin. This allows picking any location on a product page to embed a product view (inside a selected placeholder) or show a thumbnail graphic that will activate the popup on click or tap. This ad-hoc behavior is only active when a product view is configured under the Catalog for a given product, making it possible to use this extension in conjunction with other customizations such as Cloud Zoom or similar.

4Try our sample 360 product view

There's a sample 360 product view included with this module that you can use to test the integration. The sample is located under the base skin folder under webrotate360. To use this sample, enter the following URL into the new attribute field you created (webrotate_path) under a test product in the Catalog:

skin/frontend/base/default/webrotate360/360assets/sampleshoe/config.xml

5Publish and upload your own product views

Download our desktop software and publish a 360 product view using your own product images or use our sample images that are linked under additional resources. FTP upload is available in the software or you may upload the published assets to your server manually (via FileZilla, etc). Consider using our optimized PixRiot service to host and manage your spins online for unmatched convenience. You only need to upload a single folder located under published/360_assets of your published SpotEditor project for each product view. You may also publish multiple 360 product views into a single 'published' location and upload all product views at once.

Once uploaded, note the URL of the configuration file (.xml) in the uploaded folder and then enter a relative URL of the configuration file on your server in the attribute field (webrotate_path) for selected products in the Catalog accordingly.

Please remove the forward slash at the beginning of the relative URL when entering in the attribute field, e.g (assuming my-360-assets is a folder located in the root of your Magento installation):

my-360-assets/product1/product1.xml

6Load images from CDN or use master config (PRO)

You can create an extra product attribute with the attribute code webrotate_root to allow specifying an alternative location of the 360 or 3D product images for each product. The root value is a URL (e.g http://mycdn.com/360_assets/product1/) that can point to a folder with images on an external server. When it's configured, the module will prepend the webrotate_root URL to the relative image path stored in the viewer configuration xml for each image. This is valuable when you need to host the assets on a dedicated file server or CDN.

This feature can be also used to load multiple product views via a single (master) config xml that you can set under the plugin settings via Master Config URL, assuming the number of images and their file names are the same across selected product views. If Master Config URL is configured in the module settings, you don’t need to specify the webrotate_path attribute in the Catalog for those products that share the same config , i.e you would only use the webrotate_root parameter, pointing to the image assets: