Bonus Chapter - WordPress

Note about the demo: For most Dev Stories, we try to make the actual usable product from the Dev Story available for readers to explore directly. However, the website in this Dev Story was built using WordPress, which is complicated (and sometimes costly) to host, so unfortunately we weren't able to keep it live indefinitely. Instead, the demo link above will direct you to videos showing the site in action, while the source link goes to a zipped file containing the raw files of the WordPress site.

Introduction: Barnabas

Barnabas was a sentimental fellow, and he wasn't ashamed of it: he did feel a little sorry for the old WordPress-based Vaporwear site now that the new React.js site's 3D experience was so much more sophisticated. More practically, however, he also knew that the process of switching sites would take a little time, so even after the "completion" of the new site the old one would still be live for at least another month or two. With that in mind, Barnabas approached Allan with an idea: what if they could take the same 3D experience which had been developed for the new React.js site and incorporate it into their old WordPress site as well? "Go for it," Allan told him, so Barnabas set off to figure out how to integrate the new custom 3D experience into the old WordPress site.

Using an NPM Package in WordPress

Diane had built the new Vaporwear 3D experience into an NPM package, which made it very easy to add into most modern Web workflows. Using an NPM package in WordPress, however, is a bit tricky: WordPress was not designed to work with modern Web workflows and, being PHP-based, isn't naturally well-suited to being used with JavaScript development practices. After poking around for a good way to get NPM-based functionality into a WordPress site, Barnabas found a WordPress NPM Bridge Template which offered an easy way to take NPM-powered JavaScript code and bundle it into a custom WordPress plugin.

First, Barnabas created a new repository from the WordPress NPM Bridge Template using the same approach described in a Dev Story for starting Babylon's Template Repository Workflow.
Barnabas's plan was to create a plugin that would let him use a custom shortcode to insert the new Vaporwear 3D experience. His new repo made from the template showed an example of how to do that; to get started, he had to modify the plugin PHP file to remove the defaults.
Since he'd changed the names of basically everything, he needed to modify the package.json file, too.
This simple version wasn't really doing anything meaningful, but he did want to check that it was working. Thus, he built what he had so far...
```
npm run build
```
...added it to the old Vaporwear WordPress site...

...and tried using the new vaporwear-experience shortcode.

And it worked!

Hello, world!

Now for the real thing.

Creating the VaporwearExperience WordPress Plugin

In the root directory of the plugin repository, Barnabas added Diane's 3D Vaporwear experience NPM package.
Next, he replaced his "Hello, world!" code in his PHP file with a call to a custom function.
Finally, he defined the custom function he'd called from the PHP file in index.js. He based his implementation on Edie's integration of the same NPM package into the new Vaporwear site, though of course he didn't use React.js to make the UI. He also didn't want to use the "matchmoving" states in the experience as the WordPress site's design didn't really have a place for them, so he just skipped right to the configuration state.
For simplicity, he reused the asset host he'd made from his original Babylon Viewer integration to host the rest of the assets.
Then he built the plugin...
```
npm run build
```
...uninstalled the old version and replaced it with the new...
...and voila.

And that, at last, concludes the story of the new and improved Vaporwear e-commerce experience built from the ground up with 3D in mind. Not only had Allan and Barnabas been able to create a brand new site with a 3D viewer/configurator as a flagship feature, but they'd even been able to take that same configurator and use it in another site as well. Barnabas was happy -- the new site was being adopted, and even the old site had been significantly improved -- and he sent a short screen capture of the new WordPress functionality over to Allan. Allan didn't see it immediately, though; he was on the forum again, checking out community demos and wondering if there was even more that 3D could do for his e-commerce business.

-syntheticmagus