@motork/product-viewer-360

Product Viewer 360

A simple interactive resource used to show a virtual tour of the product.

This project uses Vue CLI 3 for serving and building files. In order to be able to work and release a new distribution folder, make sure to install globally the following dependencies in your machine:

• @vue/cli@3.4.1
• node@8.10.0
• npm@5.8.0

How to use

Include ProductViewer360 component and styles.

import ProductViewer360 from '@motork/product-viewer-360';
import '~@motork/product-viewer-360/dist/product-viewer-360.min.css';

export default {
  name: 'Component',
  components: {
    ProductViewer360,
  },
};

Use the component in a template

<product-viewer-360
  :interior="https://your-interior-image.jpg"
  :images="[]"
  :images-open="[]"
  :start="14"
  disclaimer-text="Copyright © 2019 MotorK Italia s.r.l. All Rights Reserved."
  hint-text="Clicca e trascina per ruotare"
  @ready="onProductViewerReady"
  @on-viewer-event="onProductViewerEvent"
/>

Component Reference

Properties

Name	Required	Type	Default	Description
interior	false	String	null	Panorama image link
images	false	Array<Object>	[]	Closed doors images. Example data in tests/fixtures/submodel folder
images-open	false	Array<Object>	[]	Open doors images. Example data in tests/fixtures/submodel folder
start	false	Number	0	Image start position
disclaimer-text	false	String	''	Disclaimer text
hint-text	false	String	''	Hint text
container-max-width	false	Number	1440	Max width for the control's container
locale	false	String	'en'	Language localisation code. Available values: en, it, es, fr, de.
messages	false	Object	{ en: { ... } }	Localisation messages. Example data in tests/fixtures/translations/messages folder
translations	false	Object	this.messages[this.locale]	Translations object provided directly

Events

Name	Arguments	Description
ready	undefined	Fired when it's ready
on-viewer-event	Action name as String	Fired when interacting

Development

The development phase takes place through vue-cli-service which points to src/main.js file.

You have to options to start the development environment:

1 - Use your machine and install the dependencies

• Run npm i -g @vue/cli@3.4.1
• Start the server with npm run serve

2 - Use of Docker

• Make sure that docker is installed in your machine
• Run npm run docker:serve

When docker is running you can stop and remove the container with the following command

docker rm -f product-viewer-360-dev

npm-link

Sometimes you need to work on application code and @motork/product-viewer-360 dependency at the same time. In this case you should use npm-link.

Package linking is a two-step process:

1. Create a global symlink for a dependency with npm link. A symlink, short for symbolic link, is a shortcut that points to another directory or file on your system.
2. Tell the application to use the global symlink with npm link @motork/product-viewer-360.

For example:

# step 1
cd ~/projects/product-viewer-360
npm link # add global symlink

# step 2
cd ~/wp-content/themes/drivek
npm link @motork/product-viewer-360

Back to Normal

How do you switch back to normal dependencies? When you don’t want to use the local version of @motork/product-viewer-360 anymore, delete the symlink.

# in the dependency local version
cd ~/projects/product-viewer-360
npm uninstall # delete global symlink

# in the application code
cd ~/wp-content/themes/drivek
npm uninstall --no-save @motork/product-viewer-360 && npm i

Build

Building process is handled by Rollup which points to src/entry.js file.

Why should I use Rollup over Webpack?

Rollup offers optimizations like tree shaking that make it ideal for building shared libraries. This plugin also prioritizes defaults that are ideal for most Vue plugins and UI component libraries.

The base conpect of this project it's coming from vue-sfc-rollup tool.

# if chosen the first option mentioned above
npm run build
# if using docker
npm run docker:build

Release a new version

A new version can be released by triggering a Jenkins job wich will use the jenkins/Jenkinsfile.groovy file.

Troubleshooting

When using docker the node_modules folder will be binded to the docker OS environment and not to the local machine.

Remove the folder (rm -rf node_modules) and install again npm i.