WebVRShop

Virtual reality Woocommerce Plugin

created: 04/18/2017
latest update: 04/21/2017
by: VRApps
email: webvrapps@gmail.com

WebVRShop is the easiest way you can present your products in Virtual Reality. Is a Woocommerce plugin, easy to install and configure.

The code is written using AngularJS for the live updates.

It works on any device. This means desktop computers, mobile devices, with VR glasses or without.

Just upload your plugin with Wordpress and setup 3D models for every product, right in the product page description.

You have to upload the model first (Collada .dae for now, more extensions to come).

After that you can place the model in the scene, using the sliders (position and rotation, model size) and you can even live preview the model in the page.

Replace the logo.png image in the product img folder with your own logo image to change the admin panel logo.

Short guide:

Extract the archive you receive after purchase.
In your Wordpress admin panel, go to plugins - add new.
Upload WebVRShop archive and activate the plugin.
Go to one of your products or create a new one
First complete Model URL path (Collada .DAE) field with your own model path. To upload a model you can use any FTP program. You can use Wordpress uploader (Media - add media), but in order to upload a dae model you need first to install a plugin to allow you to install restricted file extensions.
Than you can use the sliders to resize, move and rotate your object in the scene.
Finaly you can set the sky / background color for your VR environment using the color picker tool.

You can check how it looks on the page using the live preview window, no need to refresh the page or navigate to the front website.

The plugin consists in 3 folders and one main PHP file.

css
img
lib
webvrshop.php

css folder holds the custom css code. img folder has the images, actually there is only the logo file. lib folder has the javascripts for Angular and the main library. And the webvrshop.php file is the main file for the plugin.

webvrshop.php

In the top part there is a comment block where you can setup your plugin information:

/**
 * Plugin Name: WebVRShop
 * Plugin URI: http://google.com
 * Description: Easily add 3D models in Virtual Reality mode to any Woocommerce shop.
 * Version: 1.0.0
 * Author: VRApps
 * Author URI: http://vrapps.com
 * License: Commercial
 */

Next we set up the Wordpress uploader to accept restricted filetypes (.dae for the uploaded models).

After that we take care about the admin part - display the logo, sliders and the color picker tool.

//3D model path
    woocommerce_wp_text_input(array(
        'id' => '_custom_product_path',

Next there is a javasScript where we setup the colorpicker and AngularJS main controller (empty, but you can add your Angular functions if you need).

Finaly we setup the front page display.

You can update the plugin adding your own functionality.

It is easy to work with the code, if you are familiar with Wordpress codex and AngularJS.

I will try to release periodic updates to the code, including more functionalities, like adding hotspots, purchase button, more products on a VR environment, custom animations builder. And of course I am waiting you to tell me what else you would like to see added to the product.

WebVRShop

Virtual reality Woocommerce Plugin

About

WebVRShop is the easiest way you can present your products in Virtual Reality. Is a Woocommerce plugin, easy to install and configure.

The code is written using AngularJS for the live updates.

It works on any device. This means desktop computers, mobile devices, with VR glasses or without.

How it works

Just upload your plugin with Wordpress and setup 3D models for every product, right in the product page description.

You have to upload the model first (Collada .dae for now, more extensions to come).

After that you can place the model in the scene, using the sliders (position and rotation, model size) and you can even live preview the model in the page.

Replace the logo.png image in the product img folder with your own logo image to change the admin panel logo.

Short guide:

Extract the archive you receive after purchase.

In your Wordpress admin panel, go to plugins - add new.

Upload WebVRShop archive and activate the plugin.

Go to one of your products or create a new one

First complete Model URL path (Collada .DAE) field with your own model path. To upload a model you can use any FTP program. You can use Wordpress uploader (Media - add media), but in order to upload a dae model you need first to install a plugin to allow you to install restricted file extensions.

Than you can use the sliders to resize, move and rotate your object in the scene.

Finaly you can set the sky / background color for your VR environment using the color picker tool.

You can check how it looks on the page using the live preview window, no need to refresh the page or navigate to the front website.

The code

The plugin consists in 3 folders and one main PHP file.

css

img

lib

webvrshop.php

css folder holds the custom css code. img folder has the images, actually there is only the logo file. lib folder has the javascripts for Angular and the main library. And the webvrshop.php file is the main file for the plugin.

webvrshop.php

In the top part there is a comment block where you can setup your plugin information:

Next we set up the Wordpress uploader to accept restricted filetypes (.dae for the uploaded models).

After that we take care about the admin part - display the logo, sliders and the color picker tool.

Next there is a javasScript where we setup the colorpicker and AngularJS main controller (empty, but you can add your Angular functions if you need).

Finaly we setup the front page display.

Update

You can update the plugin adding your own functionality.

It is easy to work with the code, if you are familiar with Wordpress codex and AngularJS.

I will try to release periodic updates to the code, including more functionalities, like adding hotspots, purchase button, more products on a VR environment, custom animations builder. And of course I am waiting you to tell me what else you would like to see added to the product.