Верстка карточки товара + доп. функционал (Opencart 1.5.6.1)

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

Ссылка на подробное ТЗ: 

docs.google.com/document/... 

Ссылка на дизайн: 

drive.google.com/open?id=... 

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

Оплата: Яндекс деньги, privat24, СБР. Подходит поэтапная оплата.  

Сроки: 2-5 дня, мы ищем человека, который сможет заняться проэктом на 100%, т.е который не будет делать одновременно 5-7 проэктов и сможет начать работу в ближайшие дни. 

Технические особенности:  

Ссылка на сайт – http:\joye.ninja 

Opencart 1.5.6.1 

MySQL 

ТЗ по редизайну (верстке) и кодингу Карточки товара сайта магазина: http://joye.ninja

ВАЖНО: все изменения мы сначала внедряем и тестируем на сайте Полигоне (копии основного): http://release.joye.ninja

В дальнейшем, при внесении ЛЮБЫХ правок на ОСНОВНОЙ версии сайта - сначала создаем OLD версии оригинального файла (с указанием даты), и только потом заливаем правки. Чтобы иметь возможность БЫСТРО откатиться обратно

Формат OLD файла:

ИСХОДНОЕ_НАЗВАНИЕ_ФАЙЛА.old.ДАТА

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

Наша цель - привести внешний вид Карточки товара к этому виду: https://drive.google.com/open?id=0B-eJsG5Hes89MUtqMWQtM2pSZXM  + создать весь необходимый програмный функционал.

Кроме редизайна - мы хотим протестировать целесообразность вывода в Карточке товара “комплектов”, то есть при выборе “комплекта” и нажатии “Купить” - в Корзину должны добавиться СРАЗУ все товары, указанные в Комплекте. Ниже мы пропишем 2 варианта реализации, а Вас как программиста - просим подсказать, сильно ли они отличаются в плане тех. реализации.

• Нужно сверстать Карточку товара, на основе макета, который предоставил Дизайнер.
• В выводе “Фотографий” - нужно сделать следующую логику:

  а) при нажатии на центральное фото (ВНЕ зоны бейджа смотреть видео) или при нажатии на превьюшку ЛЮБОГО дополнительного фото (которые расположены ПОД главным фото) - должен открываться лайтбокс, в котором фото АВТОМАТИЧЕСКИ должно быть пропорционально (!!!) уменьшено (максимумы: по ширине 800px, высоте 550px или 85% - 90% от ширины экрана, по длинной стороне. В процентах - предпочтительнее)

  Предусмотреть для картинок в лайтбоксе такие параметры, которые НЕ приведут к интерполяции (растягиванию) их. Так же задать параметр max-width для самого лайтбокса (максимумы: по ширине 850px, высоте 600px)

  В лайтбоксе должно присутствовать стрелки для навигации по фото и крестик для закрытия: http://i.imgur.com/kjDvFc0.png

  б) в видимой зоне ПОД центральным фото - должно быть выведено 3 видимых превьюшки дополнительных фото, а остальные дополнительные фото - должны быть доступны в режиме “карусели” при нажатии на стрелки скроллинга.

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

• При верстке Карточки товара - нужно взять во внимание, что на сайте активировано Кеширование, нужно НЕ нарушить его работу.

На сайте по кэшированию установлено:

• Pagecache
• Turbocache

• Комплекты.

  а) Создать техническую возможность (если она отсутствует) - выбирать для ОТДЕЛЬНЫХ товаров - другой Шаблон вывода Карточки товара. Реализовать через чекбокс в админке на карточке товара. (отдельный product.tpl для нового шаблона)

б) Создать возможность создавать произвольное количество наборов через добавление новой опции. У новой опции должно задаваться описание (поддержка ckeditor), продукты (через ярлыки) и контент этих ярлыков (контент попапа, ckeditor). Количество ярлыков может быть разным для разных товаров.

При наведении на ссылку с товаром из комплекта (ярлык) - должно всплывать задизайненное окошко, в котором мы высвечиваем:

а) название товара

б) его фото,

в) кратким описание

г) его цену

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

На выходе должно работать:

а) добавление товара в корзину для новых продуктов с новым дизайном и опциями,

б) добавление товара в корзину для старых продуктов,

в) оформление заказа для новой опции\без неё

• Продумать-реализовать внедрение “Цветов” товара с помощью встроенных средств.

  а) с учетом того, что цвета могут добавляться с помощью кода типа #777777 или с помощью color picker

  б) при наведении мышкой на цвет - высвечиваем задизайненную всплывашку (tooltip) с “названием цвета” - например “золотистый” (либо любой другой). Текст в попапе должен настраиваться в админке

  в) учесть и продумать, что мы можем и будем добавлять ДРУГИЕ произвольные свойства товара, от которых его цена может меняться в большую или меньшую сторону (URL товара при этом меняться НЕ должен)

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

Кастомная реализация (не через плагин).

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

• При выводе справа инфо-блоков “Доставка, Оплата, Возврат и Обмен” - предусмотреть что в КАЖДОМ из этих 3-х инфоблоков - будет короткий текст, а под ним будет ссылка с пунктирным подчеркиванием “подробнее”:

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

  б) при наведении мышкой и выборе открыть в новой вкладке - открываем соответствующую страницу магазина. Например эту: http://joye.ninja/oplata_i_dostavka

• Сделать зависимость текста про доставку - от времени заказа. До 14.00 сделанный заказ - будет отправлен сегодня.

Если время до 14-00 - товар будет доставлен завтра, если после 14 - послезавтра

• Создать в backend Карточки товар - отдельную настройку (чек-бокс) “Товар с видео” при выборе которой - на frontend Карточки товара - автоматически будет выведена на главной Фото - полупрозрачный бейдж “Смотреть видео” - при нажатии на которую активируется скрипт, который

а) плавно проскролит страницу до видео-ролика в Описании

б) сделает его автозапуск

При клике на другую часть ГЛАВНОЙ картинки - должен открываться лайтбокс

Продумать-реализовать весь необходимый код, чтобы это корректно отрабатывало на фронтенде, так же как на примере ниже (видео-шопер)

Рабочий пример (нам нужно точно такое же поведение) - http://video-shoper.ru/shipment/xiaomi-mi5-128gb-ceramic-special-edition-black.html?CODE=xiaomi-mi5-128gb-ceramic-special-edition-black

• Создаем техническую возможность (4 разных чек-бокса + текстовые поля) во backend Карточки товара - для вывода НАД главным фото - блока из 4-х небольших пиктограмм-бейджей, которые обозначают 4 качественных признака данного товара:

  а) Оригинал

  б) Новинка

  в) Лучшая цена

  а) Акция

  Предусматриваем - что при наведении мышкой на ЛЮБОЙ из бейджей - должна высветится задизайненная всплывашка с описанием СУТИ бейджа (берем из текстового поля рядом с чек-боксом)

  Бейджи реализуем или через CSS или в виде прозрачных PNG файлов которые выводятся НАД фотографией (не поверх фото, чтобы НЕ закрывали его)

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

• Выводим “Рейтинг” (в звездочках) - в такт существующему плагину микроразметки (проверяем его корректную работу в Утилитах Google и Yandex)
• Выводим “Отзывы (ХХ)”  - где ХХ это количество отзывов об этом товаре. С пунктирным подчеркиванием.

  а) При наведении на эту надпись - если отзывов 0 - высвечиваем всплывашку “Добавьте Ваш отзыв”

  б) При наведении на эту надпись - если отзывов 1 или более - высвечиваем всплывашку “Нажмите, чтобы прочесть Отзывы об этом товаре!”

  в) При нажатии на эту ссылку, должен сработать скрипт, который сделает 2 вещи:

  - проскролит страницу внизу ДО табов

  - сделает АКТИВНЫМ - таб с “Отзывами”

• Выводим кнопку Купить! - ПОД которой выводим кол-во УЖЕ купивших этот товар.

Алгоритм расчета этой цифры следующий: От цифры 10 отнимаем кол-во остатка товара на складе. Получившийся результат, если он вдруг отрицательный - делаем положительным. После этого к нему прибавляем цифру 1 (чтобы избежать Нуля если остаток тоже 10) и выводим получившийся результат.

• При наведении мышкой на кнопку “Купить” - выводим всплывающую фразу: http://i.imgur.com/desyR09.png - которая призвана уменьшить страх НАЖАТЬ на эту кнопку
• Выводим ПОД комплектами инфо-блок “Быстрого заказа”, в который добавить плейсхолдер “маску” для ввода номера телефона (взять правила из текущей корзины).

При его использовании Клиентом должно произойти 2 вещи:

а) в системе должен быть создан полноценный заказ с резервацией этого товара (если это возможно) на покупателя с Именем и Фамилией: “Быстрый Заказ” (менеджер потом вручную уточнит у клиента его данные и впишет)

б) на почту менеджеру должно быть отправлено письмо с темой:

Поступил новый быстрый заказ на товар: “Название товара”

Тело письма:

а) “Название товара” - которое является гипер-ссылкой на Карточку товара

б) Номер телефона

После нажатия кнопки “Отправить” - нужно вывести popup-подтверждение об успешном создании “Быстрого заказа”. Речь об этом: http://i.imgur.com/RWKW6Nt.png

• Ниже выводим инфо-блок “Смотрите еще товары в категории ”Атомайзеры”

  в котором мы  выводим 4 товара (ТОЛЬКО те что в наличии!!!) в видимой зоне + добавляем возможность стрелками просмотреть еще товары (всего 10).

  Грубый пример: http://i.imgur.com/kxlL83p.png

  Эти товары (10 штук)  мы формируем по такому алгоритму:

  а) сначала извлекаем товары из backend - Карточки товара из добавленных “связанных товаров”, (только те что В НАЛИЧИИ!!!)

  б) а если их количества там НЕ хватает до 10 штук - то смотрим товары которые относятся к этой же родительской Категории - и выводим их (только те что В НАЛИЧИИ!!!). Например те что имеют более высокий id чем текущий товар. А если товаров с более высоким id нет, то парсим товары с более низким id чем текущий. Это для того - чтобы в разных Карточках в пределах одной Родительской категории - у нас были разные товары в инфо-блоке “Смотрите еще в категори….”

Ссылки в этом блоке должны быть noindex\nofollow. У ссылок на товар (картинка, текст) и у кнопки купить должен быть обязательно айдишник (

• Для товаров, у которых остаток на складе = 0, то есть их НЕТ НА СКЛАДЕ - меняем логику вывода инфо-блока “Смотрите еще в категории….” - то есть убираем его вывод внизу, и выводим его НАД табами с описанием, отзывами и т.д - ВМЕСТО инфо-блока “3 причины по которым нам доверяют”. То есть сюда: http://i.imgur.com/re2fQg0.png

  *****************************************************************************************

Требования по обратной совместимости:

1. Должны работать все текущие плагины и vqmod-ы

На данный момент на сайте используются следующие плагины (основной список):

• Простая регистрация и заказ Simple
• Multiple Featured Module Pro
• Microdata PRO ↵ [Microdata, JSON-LD, Open Graph, Twitter cards]
• FAQ Management
• Рекомендуемые из групп
• Cache Manager ocShop.biz
• Custom Page Titles
• Custom Image Titles
• FilterPro v2.5.12_beta (speed)
• Redirect Manager
• Super Mega Menu
• XDS Menu. Произвольное меню
• XDS OC Default 2.0. Настройки шаблона

2. Текущее кэширование должно работать как и до правок

3. Оценка сайта по pagespeed не должна поменяться, сравниваться будет старая\новая версия карточки товара (сейчас она от 75 до 81).

4. Сайт должен адекватно работать во всех стандартных браузерах и разрешениях от 1024-768 до 1900-1200

5. Любые новые плагины, которые планируется добавить в проэкт нужно согласовать.

6. Не использовать варезные плагины