Робимо 3D конфігуратор без програмування і верстки. Частина друга

У нашій попередній статті «Робимо 3D конфігуратор без програмування і верстки» ми обговорили питання створення 3D-магазину ювелірних виробів з використанням пакетів моделювання Blender і 3ds Max.

Сьогодні ми оновимо цей проект і зробимо з нього реально працюючий магазин. Для цього нам знадобиться забезпечити його наступними функціями:

  • Обчислення ціни на основі конфігурації користувача.
  • Відправка замовлень для подальшої обробки менеджером.
  • Кнопки соціальних мереж (куди без них).

Зрештою, у нас буде щось на зразок цього:

Як звичайно, ви можете знайти вихідні файли (3ds Max, Blender і Puzzles) цього конфігуратора в останній версії дистрибутива фреймворку Verge3D.

План

Завдання виглядає дещо амбітним. Нам потрібно створити 3D-магазин з конфігуратором (клієнтська частина) і системою обробки замовлень на стороні сервера. Але в реальності все не так складно, адже у нас є чіткий план:

  1. Для початку нам потрібно налаштувати сервер для прийому і обробки замовлень.
  2. Наступний етап — з допомогою візуального редактора Puzzles обчислюємо ціну і додаємо логіку формування замовлення та відправки його на сервер.
  3. Нарешті, ми додаємо в додаток кнопки для розшарювання нашого застосування у мережах Facebook, Twitter, LinkedIn і Google+.

Давайте розглянемо весь процес крок за кроком.

Налаштування сервера

У цьому уроці ми припускаємо, що на вашому сервері встановлена система управління контентом WordPress. Починаючи з версії 2.7, фреймворк Verge3D (який ми використовували в минулий раз для створення конфігуратора) поставляється з плагіном до WordPress. Цей плагін вже містить у собі просту систему електронної комерції, яка може обробляти замовлення, передані за допомогою блоку візуального редактора логіки Puzzles «place order» (ми обговоримо цей момент трохи пізніше).

Якщо у вас немає сервера або ви не знаєте, що таке WordPress — без паніки! Гуглим «хостинг для WordPress», вивчаємо і замовляємо готовий сервер (підказка — більше 100 рублів на місяць можна не давати). Щоб навчитися роботі з WordPress бути програмістом, сисадміном або веб-дизайнером зовсім не обов’язково.

Читайте також  Telegram API демон — склеюємо послідовні повідомлення

Давайте продовжимо налаштування нашого магазину. Спочатку встановіть і активуйте плагін Verge3D через меню «Плагіни» в адмінці WordPress. Цей плагін є в офіційному каталозі WordPress.org, так що проблем з установкою не буде.

Далі, щоб навчити ваш сайт обробляти замовлення додайте на будь-яку сторінку або в пост наступний короткий код:

[verge3d_order]

Цей код замінюється на форму замовлення, яка виглядає приблизно так (приблизно, тому що її вигляд суттєво залежить від використовуваної теми WordPress):

Всі замовлення, надіслані через форму замовлення, будуть доступні через меню Verge3D->E-Commerce у вашій адмінці:

Замовлення в цьому списку створюються автоматично після отримання запитів від вашого додатки-конфігуратора. Наприклад, коли якийсь Джон (його замовлення перший на картинці) купує срібне кільце з трьома дорогоцінними камінчиками за 180 доларів, ви можете зателефонувати або написати листа, підтвердити замовлення і дізнатися додаткову інформацію, таку як адреса доставки та спосіб оплати.

Власне це все, що вам потрібно робити на сервері. Тепер прийшов час повернутися до нашого 3D-конфігуратору і навчити його роботі з WordPress.

Прикручуємо форму замовлення до 3D-конфігуратора

Ця частина досить проста. Додайте в ваш додаток пазл «place order», вкажіть URL на форму замовлення, назва, опис і суму замовлення. Ось що вийде:

Логіка роботи досить тривіальна: коли користувач натискає кнопку замовлення, ми обчислюємо ціну кільця на основі обраного металу і дорогоцінних каменів. Потім ми використовуємо пазл «place order» для відправки обраної конфігурації на сервер.

Кнопки соц. мереж

Ви коли-небудь бачили магазин без кнопок для розшарювання в соціальних мережах? Ось-ось, давайте виправимо це непорозуміння з допомогою серії однотипних пазлів:

Тут логіка ще простіше. Коли користувач натискає на кнопку, ми відкриваємо потрібну соціальну мережу в новій вкладці, попередньо повідомивши заголовок і вміст поста, який хочемо опублікувати.

Читайте також  Що не забути, приймаючи макет сайту від дизайнера, або дрібниць не буває

Висновки

Методи, описані в цій статті, можуть використовуватися не тільки для 3D-конфигураторів продуктів, але і для інших додатків електронної комерції. Наприклад, ви можете використовувати їх для створення магазину 3D-моделей або інтерактивної презентації чого-небудь, особливо якщо в цій презентації є можливість що-небудь замовити.

Що ж стосується соціальних мереж, то простір для уяви просто величезний. Замість нудної плоскої кнопки можна зробити забавного анімованого персонажа.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *