Конструктор по подбору багета и паспарту на Drupal

Востриков12 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
27.02.2017

На сайте kolibri_kz необходимо разработать конструктор по подбору багета. Во вложении прототип конструктора, там 8 страниц:

1 страница - как будет выглядеть кнопка, она будет находиться на странице "Багет"(kolibri_kz/katalog/fillet);

2 страница - что будет открываться при клике на кнопку "конструктор":

   - слева три кнопки: "загрузить фото" (для загрузки своего изображения посетителем), "размеры опции" (где посетитель может выбрать параметры изображения), "редактор фото" (где посетитель может изменять цветовые решения изображения), затем столбик "Выберите цвет фона" с разными цветами, при клике фон конструктора меняется;

  - справа три раздела "Постер в раме", "Зеркало", "Только рамка";

                     - посередине само изображение в рамке, под ним стоимость, кнопка "лупа" для увеличения, кнопка "в закладки" чтобы можно было убрать в закладки все выбранные параметры, а также характеристика все выбранных параметров (багета, паспарту);

3-4 страницы - вид конструктора при выборе раздела "постер в раме".  Левый блок уходит, центральный двигается влево, справа выплывает блок с функционалом: сверху две вкладки "багет/рамка" и "паспарту". 

3я страница Вкладка "багет/рамка":

   - сначала блок с тремя разделами 1й, 2й и 3й багет, то есть можно выбрать три слоя багета. Пока не выбран первый - второй не активный, пока не выбран второй - третий не активный. При выборе багета появляется кнопочка "увеличить/подробнее" (открывает багет в увеличенном виде и все его характеристики снизу), и краткая информация по багету: цена, артикул, ширина и наличие (есть/нет);

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

   - затем идет таблица со всеми багетами, под ними указывается цена, артикул, ширина и наличие (есть/нет), а при наведении мышью на багет - информация уходит и появляются кнопки "увеличить/подробнее" и иконка "выбора" багета. При прокрутке списка багетов появляется кнопочка "наверх".

4я страница Вкладка "паспарту":

   - сначала блок с тремя разделами 1е, 2е и 3е паспарту, также можно выбрать три слоя. Пока не выбрано первые - второе не активное, пока не выбрано второе - третье не активное. Под изображением также появляется кнопочка "увеличить/подробнее" (открывает паспарту в увеличенном виде и все его характеристики снизу), и краткая информация по паспарту: цена, артикул, цвет и наличие (есть/нет). Также на паспарту есть 4 степпера инпута , для ввода ширины, если в пункте "все поля одинаковые" стоит галочка, то только одно поле для ввода активно, если нет - то активны все. 

   - затем блок с кнопками "фильтры"(открывает подблок с полями для выбора фильтров по цене, цвету среза и просто цвету), при повторном клике на "фильтры" подблок скрывается, "закладки/смотрели"(чтобы посмотреть что было просмотрено или добавлено в закладки) и "поиск" по артикулу. 

   - затем идет таблица со всеми паспарту, под ними указывается цена, артикул, цвет и наличие (есть/нет), а при наведении мышью на паспарту - информация уходит и появляются кнопки "увеличить/подробнее" и иконка "выбора" паспарту. При прокрутке списка паспарту появляется кнопочка "наверх".

5я страница - в разделе "зеркало" будет только "багет/рамка", функционал аналогичный;

6я страница -  в разделе "просто рамка" будут только "багет/рамка", функционалы аналогичные;

7я страница - форма кнопки "загрузить фото";

8я страница - форма кнопки "размеры опции".

При каких либо изменениях в правом блоке, в левом меняется изображение соответственно выбранным изменениям. В мобильно версии все также должно быть ровно. Пример такого конструктора по ссылке https://s-poster.ru/baget/?utm_source=direct_rsy&utm_medium=cpc&utm_campaign=seti_baget&utm_term=%25D0%25B1%25D0%25B0%25D0%25B3%25D0%25B5%25D1%2582%25D1%258B%2520%25D1%2580%25D0%25B0%25D0%25BC%25D0%25BA%25D0%25B8&utm_content=1307866956&_openstat=ZGlyZWN0LnlhbmRleC5ydTsxNDcyNDM4OTsxMzA3ODY2OTU2O2UubWFpbC5ydTpuYQ&yclid=255082207823007011