Как сделать конфигуратор для сайта
Делаем 3D конфигуратор для WooCommerce
Этот урок является логическим продолжением двух предыдущих статей (часть 1, часть 2) про создание трёхмерных конфигураторов без использования программирования и вёрстки.
В прошлой части мы рассматривали вопрос интеграции трёхмерной части с использованием штатной системы заказов, входящей в плагин Verge3D для WordPress. Однако такой вариант подходит далеко не всем, поскольку возможности этого плагина существенно ограничены. С его помощью невозможно получить доступ к популярным платёжным системам, типа PayPal или 2Checkout, невозможно оперировать со скидками, купонами, запасами и прочими вещами, которые все привыкли видеть в популярных системах электронной коммерции.
В этой статье мы покажем, как обойти эти ограничения и интегрировать трёхмерную визуализацию непосредственно в интернет магазин на WooCommerce. К слову, на сегодняшний день это самая популярная система электронной коммерции — согласно статистике она используется в 28% всех интернет-магазинов.
Результат
Вот как будет выглядеть наш магазин — нажмите на картинке, чтобы попробовать его вживую.
В этом прототипе мы будем продавать некогда популярные игрушки — спиннеры. Предполагается, что потенциальный покупатель будет иметь возможность выбора цвета и размера из предложенных вариантов. В качестве бонуса, посетитель нашего магазина сможет раскрутить трёхмерную модель в реальном времени, и более того, услышать характерный звук подшипника. Само собой, модель можно будет рассматривать со всех сторон и приближать/удалять.
Рабочий процесс не отличается особой сложностью, но на всякий случай набросаем короткий план того, что мы собираемся сделать:
Инсталляция
Плагины WooCommerce и Verge3D имеются в штатном каталоге WordPress. Просто найдите их, установите и активируйте.
При установке системы WooCommerce, мастер предложит ввести ряд параметров вашего будущего магазина, в то время как Verge3D дополнительной настройки не требует.
3D Графика
Для целей статьи мы используем готовую модель спиннера, включенную в примеры Verge3D. К слову, такая модель может быть легко создана человеком, имеющим базовые навыки работы в программах 3D моделирования 3ds Max или Blender, либо загружена из бесплатного каталога или магазина моделей.
Кроме модели, нам потребуется определить логику работы приложения в визуальном редакторе Puzzles. В частности, нам потребуется менять цвет и размеры, а также включать/выключать анимацию по клику. Подробнее об этом мы поговорим ниже.
Загрузка 3D-приложения на сайт
Чтобы загрузить приложение на свой сайт, воспользуйтесь инструментом Verge3D-Applications, расположенным на панели инструментов WordPress. Нажмите кнопку «Add New»:
Введите имя для вашего 3D-приложения и нажмите «Next». На странице настроек выберите папку с файлами приложения и нажмите «Upload»:
После того, как загрузка завершится, перейдите обратно в окно приложений и проверьте, как всё работает, нажав на ссылку spinner.html.
Наш 3D конфигуратор спиннера откроется в новом окне и будет занимать всю страницу. Это нормально, поскольку мы ещё не занимались основной частью, а именно интеграцией с WooCommerce.
Добавление 3D на страницу продукта
Наш следующий шаг — заменить скучные статичные изображения товара в магазине WooCommerce на полноценную трёхмерную модель. Кстати, если вы ещё не создали сам продукт, самое время это сделать.
Подключение 3D производится в режиме редактирования:
В разделе «Product data» перейдите на вкладку Verge3D и выберите приложение, которое мы создали ранее:
Сохраните настройки и перейдите на страницу продукта. Теперь она должна показывать интерактивное приложение вместо картинки:
Добавление вариантов продукта
Показ покупателям 3D видов продукта — это уже большое достижение. Но поскольку мы взялись делать не просто 3D визуализацию, а полноценный конфигуратор, нам потребуется сделать нашу трёхмерную модель настраиваемой.
Возможность создавать 3D-конфигураторы продуктов обеспечивается стандартной функцией WooCommerce, которая называется вариациями (variable product). В нашем магазине покупатель сможет выбирать товар одного из трёх различных размеров и цветов.
Итак, начнем с цветов! В разделе «Product data» выберите «Variable product», а затем перейдите на вкладку «Attributes» и добавьте новый атрибут с именем «Color». Укажите 3 значения — красный, синий и желтый — и отметьте «Used for variations».
Добавьте еще один атрибут «Size» для размера и сохраните настройки:
Теперь создайте все возможные варианты товара в WooCommerce:
Всего будет создано 9 различных продуктов: синий маленький, красный маленький, желтый большой и так далее. Всё что вам останется сделать — проставить цены для каждого из вариантов:
Сохраните настройки и проверьте продукт в магазине!
Создание 3D конфигуратора
На этом этапе у вас есть вариативный продукт WooCommerce. Тем не менее, трёхмерная часть остаётся всегда одинаковой, независимо от того, какие варианты выбирают клиенты. Давайте исправим это!
На предыдущем этапе вы могли заметить, что в приложении имеются 3 цветных шарика, служащие для изменения цветов спиннера. При нажатии одной из этих «кнопок» материал модели изменяется. Это делается с помощью простых блоков Puzzles, редактора визуальной логики, входящего в Verge3D:
Теперь вместо этих трех сфер мы будем использовать меню выбора, которое автоматически добавил WooCommerce на страницу товара. В этом случае, логические блоки будут выглядеть несколько иначе:
На картинке видно, что когда клиент выбирает цвет, на модели будет назначен материал с тем же именем — красный, синий или желтый.
А вот как будет выглядеть логика для изменения размеров модели:
Вот и все! Создав логику, вы просто загружаете приложение на сайт, как мы проделывали выше, и перезагружаете страницу с товаром. Теперь у нас есть полноценный конфигуратор с анимацией, выбором размеров и цветов.
Трилогия уроков по созданию трёхмерного конфигуратора без программирования и вёрстки закончена. Если что осталось непонятным, или будут другие вопросы, давайте обсудим в комментариях. Также пишите, что бы вы хотели видеть в последующих уроках по использованию 3D в вебе.
Делаем 3D конфигуратор без программирования и вёрстки. Часть вторая
В нашей предыдущей статье «Делаем 3D конфигуратор без программирования и вёрстки» мы обсудили вопросы создания 3D-магазина ювелирных изделий с использованием пакетов моделирования Blender и 3ds Max.
Нажмите тут, чтобы запустить приложение.
Как обычно, вы можете найти исходные файлы (3ds Max, Blender и Puzzles) этого конфигуратора в последней версии дистрибутива фреймворка Verge3D.
Задача выглядит несколько амбициозной. Нам нужно создать 3D-магазин с конфигуратором (клиентская часть) и системой обработки заказов на стороне сервера. Но в реальности всё не так сложно, ведь у нас есть чёткий план:
Настройка сервера
В этом уроке мы предполагаем, что на вашем сервере установлена система управления контентом WordPress. Начиная с версии 2.7, фреймворк Verge3D (который мы использовали в прошлый раз для создания конфигуратора) поставляется с плагином к WordPress. Этот плагин уже содержит в себе простую систему электронной коммерции, которая может обрабатывать заказы, переданные с помощью блока визуального редактора логики Puzzles «place order» (мы обсудим этот момент чуть позже).
Если у вас нет сервера или вы не знаете, что такое WordPress — без паники! Гуглим «хостинг WordPress», изучаем и заказываем готовый сервер (подсказка — больше 100 рублей в месяц можно не давать). Чтобы научиться работе с WordPress быть программистом, сисадмином или веб-дизайнером совсем не обязательно.
Давайте продолжим настройку нашего магазина. Сначала установите и активируйте плагин Verge3D через меню «Плагины» в админке WordPress. Этот плагин имеется в официальном каталоге WordPress.org, так что проблем установкой не будет.
Далее, чтобы научить ваш сайт обрабатывать заказы, добавьте на любую страницу или в пост следующий короткий код:
Этот код заменяется на форму заказа, которая выглядит примерно так (примерно, потому что её вид сильно зависит от используемой темы WordPress):
Все заказы, отправленные через эту форму заказа, будут доступны через меню Verge3D->E-Commerce в вашей админке:
Заказы в этом списке создаются автоматически после получения запросов от вашего приложения-конфигуратора. Например, когда некий Джон (его заказ первый на картинке) покупает серебряное кольцо с тремя драгоценными камушками за 180 долларов, вы можете перезвонить ему или написать письмо, подтвердить заказ и узнать дополнительную информацию, такую как адрес доставки и способ оплаты.
Собственно это все, что вам нужно делать на сервере. Теперь пришло время вернуться к нашему 3D-конфигуратору и научить его работе с WordPress.
Прикручиваем форму заказа к 3D-конфигуратору
Эта часть довольно простая. Добавьте в ваше приложение пазл «place order», укажите URL на форму заказа, название, описание и сумму заказа. Вот что получится:
Логика работы довольно тривиальна: когда пользователь нажимает кнопку заказа, мы вычисляем цену кольца на основе выбранного металла и драгоценных камней. Затем мы используем пазл «place order» для отправки выбранной конфигурации на сервер.
Кнопки соц. сетей
Вы когда-нибудь видели магазин без кнопок для расшаривания в социальных сетях? Вот-вот, давайте исправим это недоразумение с помощью серии однотипных пазлов:
Тут логика ещё проще. Когда пользователь нажимает на кнопку, мы открываем нужную социальную сеть в новой вкладке, предварительно сообщив заголовок и содержимое поста, который хотим опубликовать.
Выводы
Методы, описанные в этой статье, могут использоваться не только для 3D-конфигураторов продуктов, но и для других приложений электронной коммерции. Например, вы можете использовать их для создания магазина 3D-моделей или интерактивной презентации чего-либо, особенно если в этой презентации имеется возможность что-нибудь заказать.
Что же касается социальных сетей, то простор для воображения просто огромный. Вместо скучной плоской кнопки можно сделать забавного анимированного персонажа.
Спасибо, что прочитали мою статью до этого места. Как всегда, комментарии приветствуются.
Конфигуратор компьютера
Конфигуратор системного блока HYPERPC поможет подобрать комплектацию ПК и проверить комплектующие на совместимость. Выбирайте, сравнивайте характеристики, заказывайте дополнительные опции для создания конфигурации своей мечты!
Собрать компьютер
Сборка игрового ПК в онлайн-конфигураторе HYPERPC по силам даже новичку. Укажите игровую платформу, и сервис предложит комплектующие для стабильной совместной работы, накопители, системы охлаждения и периферию. А профессионально собрать компьютер на заказ в Москве могут наши инженеры. При сборке компьютера в конфигураторе системного блока HYPERPC учитываются требования тяжелых игр – это отличный помощник для создания мощной платформы с лучшими комплектующими 2020 года. При анализе совместимости учитываются рекомендации производителей, результаты нагрузочных тестов и опыт киберспортсменов.
Подобрать конфигурацию
Конструктор системного блока с проверкой совместимости оценивает не только тип слотов, шин, портов и разъемов. Все комплектующие проверяются на согласованную работу друг с другом, поэтому даже при ограниченном бюджете вы можете собрать хороший компьютер с высокой производительностью. Начните с определения платформы, а конфигуратор предложит доступные компоненты для сборки игрового ПК под заказ.
Онлайн сборка системного блока
Вы собираете компьютер онлайн – HYPERPC претворяет ваш проект в жизнь! Укажите видеокарту, процессор, материнскую плату и другие параметры системы. Калькулятор покажет стоимость конфигурации с учетом сборки и настройки. По каждому компоненту есть подсказки, они помогут принять решение. Сразу можно заказать периферию, установку операционной системы и другого софта, моддинг и безопасный разгон компьютера. Можно создать несколько конфигураций и сравнить их между собой.
Конфигуратор ПК
Для каждой игровой платформы предлагаются комплектующие с разными характеристиками – от начального в своем сегменте уровня до топового железа. В конструкторе системного блока с проверкой совместимости есть компоненты разных производителей, поэтому выбор игрового компьютера не ограничен. Заказ пойдет в производство сразу после подтверждения с вашей стороны. Если есть сомнения – к вашим услугам экспертная помощь сотрудников HYPERPC, которые помогут собрать игровой компьютер 2020 года для уверенного покорения игровых вершин.
15 «фишек» для сайтов или как усовершенствовать сайт
На каком этапе продумываются «фишки» для сайтов? Какими могут быть эти «фишки»?
Для чего они нужны? Как уместно применить «фишку» и в чем их главная задача?
На все эти вопросы мы постарались ответить в статье и показать на конкретных примерах.
Идея в том, что не надо описывать с помощью кучи текста Ваш сложный продукт/товар/ услугу. Визуализируйте и упрощайте. Объясните с помощью картинок/схем/цифр все самые сложные вещи. Ведь, если клиент их поймет, он будет больше Вам доверять и с большей вероятностью купит именно у Вас.
Так, на сайте Теплокрепости мы показали выгоду от использования той или иной технологии при постройке дома.
Слайдеры используются под разные задачи. Они нужны для привлечения внимания к тем или иным разделам, акциям, товарам.
Мы привыкли к стандартным слайдерам, где меняются изображения и контент поочередно, справа-налево. Такие слайдеры имеют место быть, но если у Вас есть важный контент, с которым можно «поиграть» в дизайне, то можно его оформить интересным слайдером.
Такие факты точно не останутся незамеченными!
Еще пример, простые, приятные анимации на слайдере сайта компании “Мой Офис”
Зачастую, пользователю нужно просто увидеть, чтобы понять хочет он купить или нет. Поэтому, очень важно визуализировать результат. То есть, если Вы продаете диваны и у конкретной модели 5 вариантов расцветки, почему б не показать их все? Многие интернет-магазины делают выбор цвета в виде выпадающего списка, или даже с помощью “цветных квадратиков”, но это все не работает, если человек не увидит весь диван именно в том, цвете, который он хочет.
“Это не фишка”, — скажете Вы. Но у нас есть аргументы в пользу того, что в реальности это фишка. И вроде бы все кивают головой, что да, нужны качественные фото, видео, но мы часто сталкиваемся с тем, что у заказчика подобного контента просто нет. При этом пожелания к дизайну могут быть самые изысканные, и непременно одно из требований будет задействовать большие, красивые фотографии, которые исполнители находят на фотостоках, но при наполнении реальным контентом сайт перестает быть, таким, каким его задумали.
Поэтому, если Вы продаете товар, который необходимо “показать лицом”, то будьте готовы к тому, что надо будет генерировать необходимый контент и именно это станет фишкой вашего сайта.
Хороший пример “Показать товар лицом” сайт Ювелирного бренда The Saplings
Отличные фотокарточки, не требующие увеличения на сайте Студии интерьера Форес т, можно не только посмотреть все вариации товара, но и посмотреть фото товара в интерьере.
Взаимодействуйте с пользователем. Предложите ему ответить на вопросы викторины, чтобы получить бонус или скидку. Вопросы должны быть простые и все ответы должно быть легко найти на сайте. Можно продумать вопросы таким образом, чтобы он проникся философией компании, узнал подробнее об ее истории, прочитал интересные факты или отзывы.
Так на сайте ФОК Гагаринский посетителям предлагается ответить на вопросы викторины, чтобы получить скидку.
Вопросы викторины и ответы можно задавать через административную панель сайта.
Простой, но действенный инструмент для продаж. Если расчет цены складывается из нескольких параметров, то можно предложить “поиграть” с этими параметрами и самим рассчитать стоимость конечного продукта/услуги.
Например, на сайте интернет-провайдера К-телеком есть возможность менять параметры в тарифе и рассчитывать стоимость:
На сайте интернет-магазина дверей Sidoorov в разделе межкомнатных дверей также можно посчитать стоимость двери в зависимости от размера полотна и наличия погонажных изделий.
Автоматизировать необходимо процессы, которые происходят постоянно.
Например, у вас есть складская система, которая привязана к кассам, именно в ней можно отследить актуальное количество товаров и цену, а значит можно настроить синхронизацию по тем пунктам, которые обновляются. В интернет-магазине Канистра происходит ежесуточная синхронизация с 1С по товарам, ценам, остаткам, таким образом на сайте поддерживается актуальная информация по всем товарам.
У компании Diko-group настроена синхронизация по контрагентам, их заказам, их накопленным бонусам.
На некоторых сайтах будет актуально сделать подарочные сертификаты, которые можно будет дарить, просто пересылкой на e-mail. Хотя, для материальности подарка, такой сертификат можно и распечатать.
Разумеется, чтобы это стало фишкой, а не провалом, надо продумать механизм взаимодействия, удобство пользования сертификатом, удобство покупки, ну и, конечно нельзя забывать, что сертификаты должны быть красивыми, а значит нужно подключать дизайнера.
На сайте Рамблер/кассы есть магазин, где можно приобрести сертификаты разного номинала на покупку билетов в кинотеатрах-партнерах рамблер/кассы. Такое решение несомненно увеличивает продажи и становится фишкой, ведь сертификат можно подарить на любой праздник.
А является ли фишкой адаптивность для сайта? Безусловно, да! Современный сайт просто обязан быть адаптирован под мобильные устройства. Статистика показывает, что 50% пользователей заходят в интернет с мобильного и ПК и 16% населения выходят в интернет только с мобильного. Отсюда вопрос, хотите ли вы потерять те самые 16% пользователей, а может и все 54%.
Установку SSL сертификата можно назвать фишкой, а можно назвать необходимостью.
SSL (Secure Sockets Layer) представляет собой криптографический протокол, который обеспечивает защищенную передачу информации.
SSL сертификат необходим в случае работы с электронными деньгами, при необходимости передачи конфиденциальной информации (номера кредитных карт, паспортные данные, пин-коды, пароли и др)
На данный момент некоторые браузеры показывают предупреждение, о том, что на сайте не подключен SSL, и как Вы знаете любое предупреждение о небезопасности Вашего сайта может отпугнуть Вашего потенциального клиента.
Также некоторые социальные сети не позволяют переходить по ссылкам у которых нет протокола SSL.
Мы уже рассказывали, что считаем своим долгом делать красивые OG-метатеги и это входит в наш чек-лист готовности сайта
Open Graph — популярный стандарт разметки веб страниц, который помогает соцсетям правильно отображать превью сайта по ссылке. Вы можете видеть такие превью уже почти везде: в сообщениях и постах в соцсетях, в мессенджерах, даже в смс-ках (iMessage на iOS)!
Еще один обязательный пункт подготовки сайта к публикации — создание Фавиконов.
Никогда не знаешь, где ваш проект сохранят в закладки, поэтому мы создаем фавиконы под все основные операционные системы.
В действительности, все вышеперечисленное не имеет значения, если вы не установите на свой сайт Гномопад!