Opencart extension documentation

Features

Opencart specific options:

  • Easy to install.
  • vQmod used. No files overwrite.
  • Four integration options:
    • Main image replacement with View360 - example
    • Thumbnail icon - open View360 in lightbox - example
    • Description button - open View360 in lightbox - example
    • Description inline - show View360 in after description text - example
General features:
  • 3D and 360 degree rotation
  • Retina ready
  • Simple navigation for best user experience
  • Native HTML5 & JavaScript
  • Work on Desktop, Tablet and Phone
  • Chrome, Firefox, Safari, IE8+, Opera
  • Many configuration options:
    • Set initial position
    • Auto rotation and manual rotation
    • Zoom and Pan
    • Fullscreen mode
    • Show/hide particular button
    • Auto rotation speed
    • Inertia configuration
    • Buttons show/hide
    • Mouse/touch sensitivity

Requirements

  1. Opencart extension requires Opencart 1.5.5.x or 1.5.6.x and vQmod 2.3.0 or above.
Note: Default theme is used as reference for vQmod search/replace operations in the Opencart frontend. For themes with different structure you will need to edit/change awssoft_view360_frontend.xml file.

Installation

  1. Upload the 'opencart-extension-vX.Y.Z/upload' folder content to the opencart root folder.
  2. To check installation, open product edit form and locate new tab "View360".

Configuration

View360 configuration page.

  • Images directory - directory with images for View360
  • Large images directory - directory with large images. These images will be loaded on zoom or fullscreen.
  • Each one of next four option turn on/off View360 inside concrete product page. For each one option we can apply custom or default config. Particular configuration is described below.
    • Main image place - View360 will be shown inside main image area
    • Show thumbnail image - Add a View360 icon in the additional images thumbnail list
    • Inside description - Show View360 above description text
    • Button inside description - Add a View360 button above description text

Main config

{
  "mode": "fit",
  "width": 800,
  "height": 500,
  "rows": 1,
  "columns": 36,
  "imagesPattern": "image_%COL_%ROW.jpg",
  "autoRotate": false,
  "autoRotateDirection": 1,
  "autoRotateSpeed": 50,
  "autoRotateStopOnMove": true,
  "zoomMultipliers": [
    1,
    1.2,
    1.5,
    2,
    3
  ],
  "loadFullSizeImagesOnZoom": true,
  "loadFullSizeImagesOnFullscreen": true,
  "xAxisSensitivity": 10,
  "yAxisSensitivity": 40,
  "inertiaConstant": 10
}
  • mode (string) Set visual appearance.
    • fixed - Use it with: Description inline.
    • fit - Use it with: Main image replacement.
    • lightbox - Use it with: Thumbnail icon and Description button.
  • width (int) - Width of View360.
  • height (int) - Height of View360.
  • rows (int) - Number of rows. Mouse drag up/down changing row.
  • columns (int) - Number of columns. Mouse drag left/right changing column.
  • imagesPattern (string) - Images pattern.
  • autoRotate ( bool ) - auto rotate on init.
  • autoRotateDirection ( 1 | -1 ) - auto rotate direction.
  • autoRotateSpeed ( int ) - auto rotate speed.
  • autoRotateStopOnMove ( bool ) - stop auto rotation on user interaction.
  • zoomMultipliers ( array ) - array of zoom multipliers.
  • loadFullSizeImagesOnZoom ( bool or number ) - If set to true, full size images will be loaded on first zoom. Also this property can set to one of the vaues from zoomMultipliers array. Full size images will be loaded on certan zoom multiplier.
  • loadFullSizeImagesOnFullscreen ( bool ) - If set to true, fullscreen button starts full size images loading.
  • width (int) - View width.
  • height (int) - View height.
  • xAxisSensitivity (int) - Column change sensitivity in pixels.
  • yAxisSensitivity (int) - Row change sensitivity in pixels.
  • inertiaConstant (int) - Inertia rotation constant. Set 0 to disable.

Navigation config

{
  "btnWidth": 25,
  "btnHeight": 25,
  "btnMargin": 2,
  "turnSpeed": 40,
  "showButtons": true,
  "showTool": true,
  "showPlay": false,
  "showPause": false,
  "showZoom": true,
  "showTurn": true,
  "showFullscreen": true
}
  • btnWidth ( int ) - button width
  • btnHeight ( int ) - button height
  • btnMargin ( int ) - distance between buttons
  • turnSpeed ( int ) - rotation speed for turnLeft and turnRight buttons
  • showButtons ( bool ) - show navigation buttons
  • showTool, showPlay, showPause, showZoom, showTurn, showFullscreen ( bool ) - show the corresponding button

Loader config

{
  "display": true,
  "holderClassName": null,
  "loadingTitle": null,
  "loadingSubtitle": null,
  "loadingMessage": null,
  "modalBackground": "#FFFFFF",
  "modalOpacity": 0.5,
  "circleWidth": 70,
  "circleLineWidth": 10,
  "circleLineColor": "#555",
  "circleBackgroundColor": "#FFFFFF"
}
  • display ( bool ) - display loader info
  • holderClassName ( string ) - classname for css override
  • loadingTitle, loadingSubtitle, loadingMessage ( string ) - Three rows of text. each one can be used for product name of any info during loading.
  • modalBackground ( int ) - Color of loader background
  • modaOpacity ( number ) - Opacity of loader background (range between 0-1)
  • circleWidth ( number ) - Loader circle width
  • circleLineWidth ( number ) - Loader circle line width
  • circleLineColor ( string ) - Loader circle line color
  • circleBackgroundColor ( string ) - Loader circle background color