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/[email protected]
• [email protected]
• [email protected]

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/[email protected]
• 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.