Image
О проекте

Галерея Yellow korner в Санкт-Петербурге

Технологии
  • PHP
  • 1С-Bitrix малый бизнес
  • mySQL
  • JavaScript
Клиент

Подрядная работа для агентства

Ссылка
https://yk.gallery/

Общие работы 

Сделана посадка верстки на CMS 1C-Bitrix, проведена настройка модулей доставки СДЭК, кассы Yandex. Доработан модуль СДЭКА. Оказалось, что стандартный функционал не дает возможности в зависимости от свойства товара, определять с какого города, из какого склада делать расчет доставки. Дописан модуль.

По интеграции Yandex кассы - стандартно. Настройка, логин-пароль, ключ и интеграция модуля в верстку.

Хотим рассказать про уникальную доработку и функционал, который интересен. Об этом дальше в статье.

Задача 

yellow-korner-image


В формате интерактивной презентации выбирать интерьер, цвет стен из предложенных вариантов. 

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

Требования 


Хранение загруженных фотографий пользователем не хранить на жестком диске, не тратить ресурсы системы.

Функционал должен корректно работать на планшетах и мобильных устройствах.

Визуально с точки зрения Ux|Ui должно быть интуитивно понятно, как пользоваться.

Реализация 


Начали с брифинга. Постановки задач.

Далее собрали информацию о том, в какие обычно комнаты покупают картины клиенты и какие тона стен самые популярные.


yellow-korner-image-blue

После утверждения макета был написан скрипт на фронт-енде сайта содержащий логику переключения изображений.

Приступили к разработке функции загрузки, хранения в кеше загруженного персонального фона и вывод его без перезагрузки страницы по Ajax.


yellow-korner-image-cursor

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

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

После согласования макета приступили к программированию. Нашли готовую библиотеку: ссылка на статью о ней на основе которой написали решение по перемещению фотографии.

Далее, после показа клиенту, решили доработать вид на мобильном устройствах. Перенесли функциональные кнопки наверх и доработали верстку.

Итог 


yellow-korner-image-final

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