Разработка сайта для магазина фотообоев и модульных картин Strongprint

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

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

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

Категории Фотообоев

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

Заказ Фотообоев (Полный Заказ)

Во вторую очередь, разрабатывали и тоже несколько раз улучшали, страницу оформления заказа. Она состоит из двух этапов:

1 этап "обрезка изображения"

Пользователь вводит необходимые ему размеры поверхности и позиционирует получившийся контур на изображении (кадрирует).

При необходимости, он может применить различные эффекты: сепия, отражения, черно\белое. Он также может выбрать текстуру обоев, от которых тоже зависит стоимость обоев. Все изменения сразу же отображаются на экране пользователя.

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

На основании введенных данных и стоимости выбранных обоев, скрипт рассчитывает стоимость заказа и показывает ее пользователю.

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

2 этап "ввод информации о клиенте"

Здесь клиент видит краткую информацию о своем заказе и заполняет несколько полей.

Так же, для проведения акций и других целей, здесь предусмотрено поле «промокод».

После нажатия кнопки «заказать», все данные попадают в единую базу заказов, отправляются менеджеру магазина и клиенту.

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

Категории Модульных Картин

Модульные картины представляют из себя фотографии, разрезанные на несколько фрагментов и закрепленных на раме.

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

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

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

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

Заказ Модульных Картин (Полный Заказ)

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

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

Далее, пользователь может применить цветовые фильтры, отражение, тип картины (обычная или модульная). И в случае модульных картин, может выбрать вариант разбивки. Их достаточно много – все они применяются к выбранной фотографии «на лету».

Отдельный интерес представляет разбивка №17 и аналогичные. Это более дорогие разбивки, т.к. при их производстве возникают дополнительные «отходы». Зато при вертикальном смещении картина выглядит цельной.

Если по дизайнерской задумке, фрагменты не должны становиться в единую структуру – можно воспользоваться разбивкой №13 и сместить фрагменты по вертикали как требуется.

После выбора варианта разбивки, пользователь выбирает необходимый ему размер из выпадающего списка или задает размеры вручную – скрипт автоматически считает конечную стоимость продукта!

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

На реализацию этого функционала ушло много времени, но оно того стоило. Результат радует не только нас, но и заказчика и его клиентов.