Wir erstellen einen 3D-Konfigurator ohne Programmierung und Layout. Teil zwei

  • Tutorial
In unserem vorherigen Artikel „ Erstellen eines 3D-Konfigurators ohne Programmierung und Layout “ haben wir die Erstellung eines 3D-Juweliergeschäfts mit den Blender- und 3ds Max-Modellierungspaketen besprochen.

Heute werden wir dieses Projekt aktualisieren und zu einem wirklich funktionierenden Geschäft machen. Dafür müssen wir folgende Funktionen bereitstellen:
 
  • Preise basieren auf Benutzerkonfiguration.
  • Senden von Aufträgen zur weiteren Bearbeitung durch den Manager.
  • Schaltflächen von sozialen Netzwerken (wo ohne sie).

Am Ende haben wir so etwas:

Bild

Klicken Sie hier , um die Anwendung zu starten.

Wie üblich können Sie die Quelldateien (3ds Max, Blender und Puzzles) dieses Konfigurators in der neuesten Version des Distributionspakets des Verge3D-Frameworks finden.

Planen


Die Aufgabe sieht etwas ehrgeizig aus. Wir müssen einen 3D-Shop mit einem Konfigurator (Client-Seite) und einem serverseitigen Auftragsabwicklungssystem erstellen. Aber in Wirklichkeit ist alles nicht so schwierig, weil wir einen klaren Plan haben:

  1. Zuerst müssen wir einen Server einrichten, um Bestellungen zu empfangen und zu bearbeiten.
  2. Der nächste Schritt - mithilfe des visuellen Editors Puzzles berechnen wir den Preis und fügen die Logik hinzu, um einen Auftrag zu formulieren und an den Server zu senden.
  3. Schließlich fügen wir der Anwendung Schaltflächen hinzu, um unsere Anwendung auf Facebook, Twitter, LinkedIn und Google+ zu teilen.

Lassen Sie uns den gesamten Prozess Schritt für Schritt betrachten.

Server-Setup


In diesem Lernprogramm wird davon ausgegangen, dass auf Ihrem Server ein WordPress Content Management System installiert ist. Ab Version 2.7 enthält das Verge3D-Framework (das wir zuletzt zum Erstellen eines Konfigurators verwendet haben) ein WordPress-Plugin. Dieses Plugin enthält bereits ein einfaches E-Commerce-System, das Aufträge verarbeiten kann, die mit dem Block "Platzieren" des Piktogramms für die visuelle Logik des Pics ausgeführt werden (wir werden diesen Punkt später besprechen).

Wenn Sie keinen Server haben oder nicht wissen, was WordPress ist, geraten Sie nicht in Panik! Wir google "WordPress-Hosting", wir studieren und bestellen einen fertigen Server (ein Hinweis - mehr als 100 Rubel pro Monat können nicht angegeben werden). Um zu lernen, wie man mit WordPress arbeitet, um Programmierer, Sysadmin oder Webdesigner zu sein, ist dies nicht erforderlich.

Lassen Sie uns unseren Shop weiter einrichten. Installieren und aktivieren Sie zunächst das Verge3D-Plugin über das Menü "Plugins" im WordPress-Adminbereich. Dieses Plugin ist im offiziellen WordPress.org-Verzeichnis verfügbar , so dass keine Installationsprobleme auftreten. Um

Ihrer Website die Verarbeitung von Bestellungen beizubringen, fügen Sie einer Seite oder einem Beitrag den folgenden Kurzcode hinzu:

[verge3d_order]

Dieser Code wird durch ein Bestellformular ersetzt, das ungefähr so ​​aussieht (etwa weil der Typ stark vom verwendeten WordPress-Design abhängt):

Bild

Alle Bestellungen werden gesendet über dieses Bestellformular können Sie über das Menü Verge3D-> E-Commerce in Ihrem Admin-Panel aufrufen:

Bild

Bestellungen in dieser Liste werden automatisch erstellt, nachdem Anforderungen von Ihrer Konfiguratoranwendung empfangen wurden. Wenn beispielsweise ein bestimmter John (seine Bestellung ist der erste auf dem Bild) einen silbernen Ring mit drei Edelsteinen für 180 US-Dollar kauft, können Sie ihn zurückrufen oder einen Brief schreiben, die Bestellung bestätigen und zusätzliche Informationen herausfinden, beispielsweise eine Lieferadresse und eine Zahlungsmethode.

Eigentlich ist dies alles, was Sie auf dem Server tun müssen. Nun ist es an der Zeit, zu unserem 3D-Konfigurator zurückzukehren und ihm beizubringen, wie man mit WordPress arbeitet.

Das Bestellformular wird an den 3D-Konfigurator angehängt


Dieser Teil ist ziemlich einfach. Fügen Sie Ihrer Anwendung das Rätsel "Bestellung platzieren" hinzu, geben Sie die URL für das Bestellformular, den Namen, die Beschreibung und den Betrag der Bestellung an. Folgendes passiert:

Bild

Die Logik der Arbeit ist ziemlich trivial: Wenn der Benutzer auf den Bestellknopf klickt, berechnen wir den Preis des Rings anhand des ausgewählten Metalls und der Edelsteine. Dann verwenden wir das Rätsel „Bestellung platzieren“, um die ausgewählte Konfiguration an den Server zu senden.

Soziale Tasten Netze


Haben Sie jemals einen Laden ohne Schaltflächen zum Teilen in sozialen Netzwerken gesehen? Lassen Sie uns dieses Missverständnis mit Hilfe einer Reihe ähnlicher Puzzles korrigieren:

Bild

Hier ist die Logik noch einfacher. Wenn ein Benutzer auf eine Schaltfläche klickt, öffnen wir das gewünschte soziale Netzwerk auf einer neuen Registerkarte, nachdem wir den Titel und den Inhalt des Beitrags, den wir veröffentlichen möchten, informiert haben.

Schlussfolgerungen


Die in diesem Artikel beschriebenen Methoden können nicht nur für 3D-Produktkonfiguratoren, sondern auch für andere E-Commerce-Anwendungen verwendet werden. Sie können sie beispielsweise verwenden, um einen 3D-Modellspeicher oder eine interaktive Präsentation von etwas zu erstellen, insbesondere wenn Sie die Möglichkeit haben, etwas in dieser Präsentation zu bestellen.

Bei den sozialen Netzwerken ist der Spielraum für Fantasie einfach riesig. Anstelle eines langweiligen flachen Knopfes können Sie einen lustigen animierten Charakter erstellen.

Vielen Dank, dass Sie meinen Artikel an diesem Ort gelesen haben. Kommentare sind wie immer willkommen.

Jetzt auch beliebt: