We make a 3D configurator without programming and layout. Part two
In our previous article “ Making a 3D Configurator Without Programming and Layout ”, we discussed the creation of a 3D jewelry store using the Blender and 3ds Max modeling packages.
Today we will update this project and make it a really working store. For this we need to provide it with the following functions:
In the end, we will have something like this:
')
Click here to launch the application.
As usual, you can find the source files (3ds Max, Blender and Puzzles) of this configurator in the latest version of the distribution package of the Verge3D framework.
The task looks somewhat ambitious. We need to create a 3D store with a configurator (client side) and a server-side order processing system. But in reality, everything is not so difficult, because we have a clear plan:
Let's look at the whole process step by step.
In this tutorial, we assume that your server has a WordPress content management system installed. Starting from version 2.7, the Verge3D framework (which we used last time to create a configurator) comes with a WordPress plugin. This plugin already contains a simple e-commerce system that can process orders transferred using the “place order” block of the visual logic editor Puzzles (we will discuss this point a little later).
If you do not have a server or you do not know what WordPress is - do not panic! We google “WordPress hosting”, we study and order a ready server (a hint - more than 100 rubles a month can be not given). To learn how to work with WordPress to be a programmer, a sysadmin or a web designer is not necessary.
Let's continue setting up our store. First install and activate the Verge3D plugin through the "Plugins" menu in the WordPress admin area. This plugin is available in the official WordPress.org directory, so there will be no installation problems.
Next, to teach your website to process orders, add to any page or post the following short code:
This code is replaced by the order form, which looks something like this (approximately, because its type depends heavily on the WordPress theme used):
All orders sent via this order form will be available through the Verge3D-> E-Commerce menu in your admin panel:
Orders in this list are created automatically after receiving requests from your configurator application. For example, when a certain John (his order is the first in the picture) buys a silver ring with three precious stones for $ 180, you can call him back or write a letter, confirm the order and find out additional information, such as a delivery address and payment method.
Actually this is all you need to do on the server. Now it's time to go back to our 3D configurator and teach him how to work with WordPress.
This part is pretty simple. Add the “place order” puzzle to your application, specify the URL for the order form, the name, description and amount of the order. Here's what happens:
The logic of the work is quite trivial: when the user clicks the order button, we calculate the price of the ring based on the selected metal and gems. Then we use the “place order” puzzle to send the selected configuration to the server.
Have you ever seen a shop without buttons for sharing on social networks? Just about, let's correct this misunderstanding with the help of a series of similar puzzles:
Here the logic is even simpler. When a user clicks a button, we open the desired social network in a new tab, after informing the title and contents of the post that we want to publish.
The methods described in this article can be used not only for 3D product configurators, but also for other e-commerce applications. For example, you can use them to create a 3D model store or an interactive presentation of something, especially if there is an opportunity to order something in this presentation.
As for social networks, the scope for imagination is simply huge. Instead of a boring flat button, you can make a funny animated character.
Thank you for reading my article to this place. As always, comments are welcome.
Today we will update this project and make it a really working store. For this we need to provide it with the following functions:
- Pricing based on user configuration.
- Sending orders for further processing by the manager.
- Buttons of social networks (where without them).
In the end, we will have something like this:
')
Click here to launch the application.
As usual, you can find the source files (3ds Max, Blender and Puzzles) of this configurator in the latest version of the distribution package of the Verge3D framework.
Plan
The task looks somewhat ambitious. We need to create a 3D store with a configurator (client side) and a server-side order processing system. But in reality, everything is not so difficult, because we have a clear plan:
- First we need to set up a server for receiving and processing orders.
- The next stage - using the visual editor Puzzles, we calculate the price and add the logic of forming the order and sending it to the server.
- Finally, we add buttons to the application to share our application on Facebook, Twitter, LinkedIn and Google+.
Let's look at the whole process step by step.
Server Tuning
In this tutorial, we assume that your server has a WordPress content management system installed. Starting from version 2.7, the Verge3D framework (which we used last time to create a configurator) comes with a WordPress plugin. This plugin already contains a simple e-commerce system that can process orders transferred using the “place order” block of the visual logic editor Puzzles (we will discuss this point a little later).
If you do not have a server or you do not know what WordPress is - do not panic! We google “WordPress hosting”, we study and order a ready server (a hint - more than 100 rubles a month can be not given). To learn how to work with WordPress to be a programmer, a sysadmin or a web designer is not necessary.
Let's continue setting up our store. First install and activate the Verge3D plugin through the "Plugins" menu in the WordPress admin area. This plugin is available in the official WordPress.org directory, so there will be no installation problems.
Next, to teach your website to process orders, add to any page or post the following short code:
[verge3d_order]This code is replaced by the order form, which looks something like this (approximately, because its type depends heavily on the WordPress theme used):
All orders sent via this order form will be available through the Verge3D-> E-Commerce menu in your admin panel:
Orders in this list are created automatically after receiving requests from your configurator application. For example, when a certain John (his order is the first in the picture) buys a silver ring with three precious stones for $ 180, you can call him back or write a letter, confirm the order and find out additional information, such as a delivery address and payment method.
Actually this is all you need to do on the server. Now it's time to go back to our 3D configurator and teach him how to work with WordPress.
We attach the order form to the 3D configurator
This part is pretty simple. Add the “place order” puzzle to your application, specify the URL for the order form, the name, description and amount of the order. Here's what happens:
The logic of the work is quite trivial: when the user clicks the order button, we calculate the price of the ring based on the selected metal and gems. Then we use the “place order” puzzle to send the selected configuration to the server.
Social buttons nets
Have you ever seen a shop without buttons for sharing on social networks? Just about, let's correct this misunderstanding with the help of a series of similar puzzles:
Here the logic is even simpler. When a user clicks a button, we open the desired social network in a new tab, after informing the title and contents of the post that we want to publish.
findings
The methods described in this article can be used not only for 3D product configurators, but also for other e-commerce applications. For example, you can use them to create a 3D model store or an interactive presentation of something, especially if there is an opportunity to order something in this presentation.
As for social networks, the scope for imagination is simply huge. Instead of a boring flat button, you can make a funny animated character.
Thank you for reading my article to this place. As always, comments are welcome.
Source: https://habr.com/ru/post/423791/
All Articles