Wordpress Plugin

As of version 2.7, Verge3D comes with a plug-in for WordPress, the most popular content management system (CMS) in use (60+ million installations).

Verge3D WordPress plug-in offers the following features:

These features can work independently on each other. For example, you might want just the embedding, or you can handle orders received from a Verge3D application hosted somewhere else (such as on Verge3D Network etc).

Installation

Before installing this plug-in, make sure you have at least WordPress 4.7. To upload applications on your server you need to have a modern browser such as Google Chrome, Firefox, Edge or Safari 11.1+.

Follow these steps to install Verge3D plug-in:

Alternatively, find Verge3D plugin in the official WordPress.org repository and install/activate it as any other WP plugin.

Try uploading some of your apps or creating a test order to verify that plug-in works fine.

Please note that your WordPress server configuration might have tight upload limits. If you experience troubles during uploading of your apps, you might want to tweak the following settings in your php.ini file:

upload_max_filesize = 100M max_file_uploads = 100

Adding and Managing Applications

Use the Applications admin menu to access Verge3D Applications screen:

To upload your app, click Edit just under an application's title, click Choose Files and select an application folder in the Update Verge3D Application form:

On this form you can also configure iframe (canvas) size of your application and allow/deny using the fullscreen mode.

To embed Verge3D applications in your WordPress pages/posts use the following shortcode:

[verge3d id="YOUR_APP_ID"]

where YOUR_APP_ID is an ID of your application displayed in the table on the Verge3D Application screen.

Receiving Basic Orders

To handle regular orders sent by your Verge3D applications (by the "place order" puzzle), add an order form to some of your WordPress page/post using the following shortcode:

[verge3d_order]

Then specify the link to that page/post as the "send to" parameter of the "place order" puzzle. Each time this puzzle is executed, your app will redirect users to your order form:

Managing Orders

Use the E-Commerce admin menu to access E-Commerce Orders screen:

The orders in this list are created automatically upon receiveing requests from Verge3D applications. You can use this screen for reviewing and managing customer orders.

Plug-in Settings

Use Settings admin menu to modify the plug-in global settings:

Order notification e-mail option is used to specify an e-mail address of the person responsible for managing orders. When a customer places a new order, you will be notified about this order on this e-mail.

Order e-mail "From" option is used to specify a name/e-mail of a person/organisation that is responsible for communicating with the customer. This can be a sales manager e-mail, some common address such as sales@yourcompany.com or just a no-reply address such as noreply@yourcompany.com.

Advanced E-commerce Applications

In some cases you might want to extend the functionality of your e-commerce system. For example, if you develop a 3D configurator or require more info from your clients to handle orders properly, you need to add more data to the request as well as handle this data on the server. For such cases, you need to encode your data in the JSON format using the "send data" puzzle and then create custom template forms for your e-commerce system.

Say you want to create a basic table customizer. This is how your data might look like:

{ "width": 120, "length": 150, "height": 100, "color": "Redwood", "title": "Custom Table", "price" 100, "user_name", "John Smith", "user_email", "john.smith@example.com", "user_phone", "+123456789" }

You can compose this structure using the dictionary puzzles and then send it to the server using the "send data" puzzle. After that, you need to create custom templates for your order management admin page as well as emails which will be sent to your customers and sales stuff. To do so, copy the following source templates to your WP theme directory under the verge3d subdirectory:

WORDPRESS/wp-content/plugins/verge3d/templates/order_admin_form.php WORDPRESS/wp-content/plugins/verge3d/templates/order_email_body.php

Where WORDPRESS is the root directory of your WordPress installation. Edit these files according to the structure specified for your order.

The last part is to assign a proper URL for your "send data" puzzle. This one looks like:

https://HOSTNAME/wp-json/verge3d/v1/place_order/

Where HOSTNAME is the host name of your WordPress server, such as www.soft8soft.com

E-Commerce Protocol Specification

The "place order" puzzle uses basic protocol to handle orders. Orders are sent from the browser to server using HTTP POST requests with the following parameters:

POST parameters Description
v3d_title Order title. This field is used to describe the order. Since this value is of no use to customers, it is of use solely for persons that are responsible for handling orders.
v3d_content Order content. This text field includes a complete order information and is visible to both the customer and the sales manager.
v3d_price Order total price. It can be a number or a string, for example 99, 99.99, "$99.99".
v3d_screenshot Order screenshot. This optional value must be a data URI representing an image. This value is generated by the HTMLCanvasElement.toDataURL() method.

The more advanced JSON-based protocol uses the following set of default parameters:

JSON fields Description
title Order title. This field is used to describe the order. Since this value is of no use to customers, it is of use solely for persons that are responsible for handling orders.
price Order total price. It can be a number or a string, for example 99, 99.99, "$99.99".
user_name Customer's full name.
user_email Customer's e-mail address.
user_phone Customer's phone number.
user_comment Order comments.
screenshot Order screenshot. This optional value must be a data URI representing an image. This value is generated by the HTMLCanvasElement.toDataURL() method.

Since this protocol is extensible you can add any parameters you want such as additional configuration options, product properties, shipping address, billing info, taxes, discounts etc.