Пример реализации проекта

Интернет-магазин профессионального оборудования, косметики и аксессуаров для депиляции depil.by

Задача: создать магазин профессионального оборудования, косметики и аксессуаров для депиляции.

Основные требования:

  • Дизайн должен быть выполнен в фирменном стиле компании, а также быть адаптивным и современным;
  • Информационная структура сайта должна соответствовать представленной клиентом структуре; (схема)
  • Должна быть осуществлена возможность подбора пользователем косметических средств по следующим параметрам: тип кожи, тип волос, участок тела;
  • Для каждого товара должна быть реализована возможность добавления фотографий (фотогалереи) и видео-ролика;
  • Для каждого товара должна быть реализована возможность добавления следующих параметров: артикул, производитель, вес, стоимость, остаток на складе (при остатке на складе 0 выводить для товара «Нет на складе»);
  • Стоимость всех товаров в панели администратора должна указываться в евро, а для пользователей на сайте отображаться в белорусских рублях по курсу нацбанка на текущий день (с округлением до 1 коп.);
  • Для товаров должны быть предусмотрены специальные стикеры, такие как «Новый товар», «Специальная цена», «Скоро в продаже»;
  • На странице каждого товара должен быть разработан блок «Взаимозаменяемые товары», «Сопутствующие товары»;
  • На всех страницах товара необходимо добавить блок «Нужна консультация?». При клике на блок должно открываться всплывающее окно, в которое пользователь может ввести свой номер телефона и интересующий вопрос. Информация о запросе консультации должна приходить письмом на почту менеджеру магазина;
  • На сайте должен быть разработан личный кабинет пользователя. В нем должны храниться контактные данные пользователя, а также размер текущей накопительной скидки. Размер накопительной скидки зависит от суммы покупок, сделанных в интернет-магазине и соответствует таблице; (таблица)
  • При переходе пользователя на страницу «Оформление заказа» ему должен предоставляться выбор «Войти и заказать» (при клике открытие во всплывающем окне формы авторизации; после успешной авторизации открытие формы заказа с уже заполненной контактной информацией, взятой из профиля пользователя) либо «Заказать без регистрации» (при клике открытие формы заказа, где пользователь должен вручную заполнить контактную информацию);
  • При варианте, когда заказ оформляет авторизованный пользователь, ему должна предоставляться информация о его текущем размере накопительной скидки, текущей скидке к оформляемому заказу и сумма заказа, которой не хватает пользователю для получения следующей большей скидки (по таблице скидок);
  • На сайте должна быть реализована возможность добавления промокодов. При вводе пользователем промокода, ему должна предоставляться дополнительная скидка на заказ согласно этому промокоду. Пользователю должна показываться информация о проценте скидки и сумме скидки в заказе;
  • Реализовать возможность исключать некоторые товары из системы скидок (накопительных и промокодов);
  • Реализовать расчет доставки товара. Стоимость доставки зависит от местоположения покупателя, суммы заказа и веса заказа и представлена в таблице; (таблица)
  • На страницах категорий товаров и на странице «Оформление заказа» пользователю должен быть показан список просмотренных ранее товаров;
  • На сайте должен быть реализован весь необходимый функционал для дальнейшего сео-продвижения (возможность прописывания мета-тегов, title всех страниц, возможность добавления и удаления контента на всех страницах);
  • Интернет-магазин должен быть подключен к основным системам получения статистики (Google Analytics и Яндекс.Метрика), а также к системе электронной коммерции Яндекс.Метрика.

 

Этапы работ

 1. Проектирование и дизайн

Задачи:

  • Основная задача проектирования — систематизация предоставленной клиентом информации, подготовка материалов (прототипов страниц, элементов дизайна) для запуска работы над проектом техническими специалистами.

Требования:

  • Интернет-магазин должен иметь удобный понятный пользователю интерфейс на любых устройствах (десктопных и мобильных).
  • Дизайн должен базироваться на предоставленных клиентом элементах фирменного стиля. В качестве основы дизайна интернет-магазина были использованы предоставленные клиентом элементы фирменного стиля (логотип, шрифт, цвета). Подготовленный для интернет-магазина дизайн, является адаптивным и отвечает всем требованиям современного веб-дизайна.

Заказчиком была предоставлена схема информационной структуры сайта. (схема) Исходя из этой структуры мы выделили 4 типа страниц:

  • главная страница;
  • информационная страница («О нас», «Доставка», «Личный кабинет», «Оформление заказа», «Контакты» и др.);
  • категория товара;
  • товар.

Для каждого типа страниц был спроектирован прототип шаблона страницы на основе анализа сценариев поведения пользователей и потребностей пользователей.

 2. Верстка

На этапе вёрстки мы перенесли подготовленный дизайн в формат html-шаблонов. При вёрстке использовались такие современные средства и технологии, как html5, css3, jQuery, bootstrap.

После выполнения основных работ этого этапа было произведено тестирование и исправление ошибок.

В итоге мы получили адаптивные к различным разрешениям (десктопным и мобильным), к различным браузерам и операционным системам html-шаблоны.

 3. Программирование

В качестве CMS (системы управления содержимым) интернет-магазина была выбрана CMS Modx Evolution последней на момент проектирования версии 1.0.14.

CMS Modx Evolution — система управления содержимым с открытым исходным кодом и открытой лицензией. Написана на языке программирования PHP, использует для хранения данных СУБД MySQL. Большим преимуществом этой системы является ее гибкость и адаптация под нужды каждого конкретного проекта. При использовании этой системы можно постоянно развивать и расширять функционал проекта.

3.1          Начальный этап

Этап программирования мы начали с создания поддомена depil.qmedia.by на нашем хостинге. На этом поддомене мы вели все дальнейшие работы. Таким образом, мы обеспечили постоянный доступ клиента к процессу разработки, а также ежедневное создание резервных копий разрабатываемого интернет-магазина. На созданный поддомен мы установили CMS Modx Evolution и установили на него созданные ранее шаблоны.

3.2          Реализация основного функционала

На этом этапе мы реализовали динамический вывод различных блоков сайта (основного меню, левого меню каталога, товаров в категориях), настроили вывод товаров на главной странице, добавили управление слайдером главной страницы из панели администрирования. В этот этап также входят реализация поиска по сайту, фильтра товаров в каталоге, стикеров товаров («Новый товар», «Супер цена», «Скоро в продаже»), реализация форм обратной связи «Нужна консультация?» и «Записаться на бесплатный семинар» и другие мелкие функции.

3.3          Реализация конвертации валют и экспорта/импорта товаров

В разрабатываемом интернет-магазине цены на товары в панели администрирования задаются в евро (согласно ТЗ). На сайте для пользователей они должны выводиться в белорусских рублях по текущему курсу нацбанка. Для реализации такой возможности мы создали специальный модуль, который в установленное время связывается с сайтом нацбанка, забирает оттуда текущий курс евро и далее на сайте пересчитывает цены на все товары по этому курсу. Кроме автоматического обновления, есть также возможность для администратора магазина в любое время поменять курс евро вручную и пересчитать все цены на товары соответственно по этому новому курсу.

Основная проблема любого интернет-магазина – постоянное поддержание актуальными цены и наличие товаров. Для решения этой проблемы мы создали модуль для автоматического обновления цен и остатков на складе товаров. Программа учета товаров клиента выгружает на хостинг сайта csv-файл, в котором содержатся артикулы товаров, цены и остатки на складе. Интернет-магазин автоматически обновляет информацию о товарах в базе данных из этого файла. Таким образом, наличие товара и цены всегда остаются актуальными.

3.4          Подключение модуля Shopkeeper (добавление функционала интернет-магазина)

На этом этапе мы разработали функционал механизмов добавления товаров в корзину и оформления заказа. Оформленные покупателем заказы приходят менеджеру интернет-магазина письмом на электронную почту. Также есть возможность вести учет заказов непосредственно из панели администрирования сайта. Для этого установлен и настроен модуль «Управление заказами». В этом модуле администратор магазина, может просматривать состав заказа, контактные данные покупателя, менять статусы заказа, писать свои комментарии к заказам.

3.5          Реализация расчета доставки заказа

Согласно ТЗ, разрабатываемый интернет магазин имеет достаточно запутанную для пользователя систему доставки, зависящую от месторасположения, суммы заказа и веса заказанных товаров. (страшная таблица) Поэтому было принято решение создать модуль, который будет рассчитывать стоимость доставки для конкретного заказа при оформлении заказа. В панели администрирования сайта администратор магазина задает все тарифы и условия доставки, а пользователю при этом необходимо только выбрать населенный пункт или область, куда должна быть осуществлена доставка, а далее система сама предложит ему варианты доставки и их стоимость. (скрины)

3.6          Реализация личного кабинета и накопительной системы скидок

Данный функционал поддерживает следующие действия пользователей:

- регистрация;

- авторизация;

- восстановление забытого пароля;

- просмотр личной информации (контактная информация, размер накопительной скидки);

- редактирование контактной информации.

Для каждого зарегистрированного пользователя на сайте действует накопительная система скидок, размер которой зависит от суммы произведенных ранее в этом магазине покупок. При оформлении заказа зарегистрированный пользователь видит размер своей текущей скидки (в процентах и в белорусских рублях от стоимости заказа), а также сумму покупок, которой ему недостает для получения следующей большей скидки согласно таблице скидок (таблица). Размеры скидок и суммы заказов для них хранятся в панели администрирования сайтом и могут редактироваться администратором магазина.

Кроме того при оформлении заказа авторизированным пользователем, ему не нужно каждый раз вводить свои контактные данные к заказу, они заполняются автоматически из профиля пользователя, это значительно ускоряет и облегчает процесс заказа.

3.7          Разработка модуля промокодов

Также на сайте мы реализовали функционал получения дополнительной скидки по промокодам. Промокоды администраторы магазина будут раздавать в виде бумажных флаеров. Имея такой флаер, пользователь, оформляя заказ в интернет-магазине, вводит свой промокод и получает соответствующую скидку. Свою скидку по промокоду пользователь видит в процентах и в белорусских рублях от стоимости заказа. После успешного окончания оформления заказа, промокод удаляется из базы данных, и пользователь больше не сможет его использовать для получения скидки.

Для добавления промокодов в систему в панели администрирования был создан модуль «Управление промокодами». Зайдя в этот модуль, администратор магазина может вручную добавлять промокоды, а также произвести импорт промокодов в систему из CSV-файла. Также в этом модуле администратор магазина может отслеживать количество израсходованных и неизрасходованных промокодов.

3.8          Тестирование и тестовое наполнение интернет-магазина

После выполнения всех предыдущих этапов мы произвели тестирование полученной системы и передали ее заказчику для наполнения товарами и информацией. В ходе наполнения магазина, с нашей стороны шло дополнительное тестирование и исправление ошибок.

3.9          Подключение платежной системы webpay

Мы рекомендуем подключать платежные системы к интернет-магазину на последней стадии разработки, когда остальной функционал уже реализован.

Подключение платежной системы webpay (как и любой другой платежносй системы) происходит в 4 этапа:

a)          Заключение договора с владельцем платежной системы. Этот этап выполняет владелец интернет-магазина. После успешного заключения договора владелец интернет-магазина получает доступы к тестовой среде системы оплаты и передает их нам;

b)          Техническое подключение платежной системы (написание скриптов, отправляющих данные заказа в платежную систему);

c)          Размещение необходимой юридической информации об онлайн-оплате и системе оплаты на сайте и отправка готового сайта на проверку в компанию-владелицу системы отнлайн-оплаты webpay;

d)          В случае успешного прохождения проверки, мы осуществляем переход из тестовой системы оплаты в реальную. После этого интернет-магазин может принимать оплату заказов через систему оплаты webpay.

3.10       Подключение систем получения статистики и электронной торговли

Для сбора статистики посещений пользователей сайта мы подключаем Яндекс.Метрика и Google Analytics. Собирая такую статистику, мы будем видеть аудиторию нашего интернет-магазина (пол, возраст, регион и др.), видеть динамику развития интернет-магазина по таким показателям как посещаемость, процент отказов, глубина просмотров и др. Для более детального анализа мы подключили статистику «Электронная торговля» от Яндекс.Метрики. С помощью нее мы будем видеть, какие товары наиболее популярны в магазине, какие товары чаще всего добавляют в корзину, но не покупают, на каком этапе оформления заказа покупатели чаще всего уходят с сайта, не закончив покупки, и другие показатели, помогающие понять желания и трудности потенциальных покупателей, продолжая, таким образом, совершенствовать процесс покупки в интернет-магазине.

 

В итоге мы получаем современный гибкий интернет-магазин - инструмент для ведения интернет-торговли и продвижения бизнеса в интернете, удобный для использования, администрирования и расширения и развития в будущем.