Here's a great e-commerce template we would like to share with our followers. We prepared it for one of our clients recently but you may find it useful as well.
It was made super responsive (try resizing your browser once it's loaded) to look nice on desktops, tablets and phones, and includes our in-place reloading feature that loads 360 or 3D product views without page refresh. We don't have anything similar in SpotEditor yet, so you may grab the template below and convert it for your needs. Upcoming v3.6 release will have it integrated as an extra publishing template inside SpotEditor.
Click this image to see it in action and download below:
To use this template for your own projects, please follow these steps:
- Publish your SpotEditor project as usual.
- Copy a single folder that you will find under published/360_assets in your SpotEditor project directory to 360_assets next to view1, etc in the root of the template.
- Open template's sample.html for edit and scroll down to the JavaScript section around line 163.
- You will see that the initial 360 product view is currently pointing to the following viewer config file: 360_assets/view3/view3.xml. You can replace this path with yours accordingly.
- The same view3.xml is then loaded again if user clicks on the third thumbnail, so you can again replace the second reference to "360_assets/view3/view3.xml" with your own xml path for your initial 3D view.
- Then replace the other two xml references inside apiObj.reload(...) with your own xml path for the first an second thumbnails.
- Replace thumb PNG files in the root of the template folder (we provided a Photoshop PSD file to help with the preferred image dimensions if needed).
If any questions, just let us know!
PS: the template uses one of our recent stable v3.6 beta builds so you may notice a couple of new things with this template:
1. New responsiveMinHeight setting that you can see in sample.html. This setting was just introduced in v3.6 to make mobile views look better. It allows to configure a minimum viewer pixel height, making sure there's enough padding space for 360 product images when the viewer resizes itself to fill your scaled web pages on small mobile screens.
2. New bounceRows flag under rotation element in view1.xml designed for 3D product views that controls whether to loop through the vertical rows when you drag images vertically or bounce at the first or last row if your 3D CAD renderings or 360 product photography doesn't have a full set of rows to cover all angles in a vertical spin. We were bouncing rows by default in the previous v3.6 beta releases and there was no way to change the behavior.. So now if you manage to export enough 3D rows to cover a full vertical spin, it will work (full 3D at last, yay!)
3. New flipHorizontalInput flag under rotation element in view2.xml which makes images spin in an opposite direction to mouse & touch drag. Note that we already had the rotateDirection flag that would make this possible, but it would also affect the playback direction and the arrow buttons accordingly. This was not good enough for one of our clients who is involved in 360 bullet time-lapses in that they needed the playback direction to work separately from the drag so that they could preserve the original order in which the images were shot. It's mind boggling, but we had to do it :)
So when the new v3.6 build is released, hopefully in the next few weeks, these settings will be available inside SpotEditor user interface (among a few more new features!).
PS: if you decide to integrate this template into some ecommerce site or your ecommerce demo, it may be more useful to reload the views at the same image position to make color changes and similar look nicer. Here's how you could change a single line in sample.html to reload a view at the same image index as currently shown:
apiObj.reload('360_assets/yourview/yourview.xml', null, null,
apiObj.images.getCurrentImageIndex());