Сайт интернет-магазина AvtoGSM.ru построен на глубоко модернизированном движке shop-script premium, smarty шаблоны
также существенно изменены, сайт не имеет адаптивности, т.е. он заточен под разрешение 1024, но сейчас это
меньшинство компьютеров, сейчас согласно метрики 3/4 пользователей с большим разрешением дисплеев, и наоборот уже
около 9% всех заходов приходится с мобильных устройств c разрешением меньше чем 800Х600 (подробная статистика на
картинке).
в общем нужно на javascript (без ajax и php) сделать адаптивными несколько страниц нашего сайта, а именно
1. главная
avtogsm.ru/index.php
при разрешениях меньше 1024 нужно чтоб убирались боковые столбцы (новости, бренды, статьи и т.д.)
все реализации этой функции должны производиться с шаблоном index.tpl.html
при увеличении разрешения более 1024 пикс развернутый каталог меню на главной нужно показывать не в два столбца а в
три (а если это экран мобильного телефона то показывать в один столбец).
товары под развернутым каталогом (лидеры продаж, самые популярные акции, новые поступления) нужно показывать не по 3
шт а по 4, 5, 6 в зависимости от разрешения экрана (и опять для мобильных телефонов можно показывать по 1 шт в ряду)
все реализации этой функции должны производиться с шаблоном home.tpl.html
также кол-во отображаемых товаров должно меняться в зависимости от разрешения, чтоб столбцы были всегда заполнены
(php код сразу даст достаточное кол-во для максимального разрешения) для экранов с маленьким разрешением это кол-во
можно делать меньше 6.
2. карточка товара
здесь хочу пока только модифицировать блок отображения картинок, а именно сделать один в один как здесь:
т.е. если разрешения экрана не достаточно то отображать одну картинку и внизу маленькие дополнительные картинки
товара при наведении на которых мышкой она отображается на месте основной картинке, но если разрешения экрана
достаточно то выводить сразу две картинки, в общем один в один как на сотмаркете, хотелось бы полностью скопировать
их систему, она очень продумана в мелочах и вылизана, во всяком случае очень много товаров я пересмотрел у них и в не
зависимости от кол-во фоток у товара и их разрешения и наличия больших фоток все работает четко, просьба полазить по
товарам в сотмаркете и с разным разрешением посмотреть как это у них работает, и посмотреть как работает у нас
сейчас:
необходим разработать стабильный код для крутилок "Купившие этот товар также покупают (наша статистика):" и "Эти товары могут Вас заинтересовать:" так как текущий скрипт крутилки не очень надежен при изменениях разрешения экрана и при разном кол-ве товара, поэтому прокручиваем по одному товару, что не очень удобно, в общем крутилка должна быть надежной и современной.
шаблон product_detailed.tpl.html
также приветствуются любые предложения по добавлению адаптивности на эту страницу, чтоб и с мобильных устройств это
все нормально смотрелось
3. Также нужно коснуться страниц отображающих товары в категориях, брендах и результаты поиска, пока не знаю что
сделать, но так как сейчас мне не нравится и к тому же также нужно сделать адаптивной, здесь жду ваших предложений на
этот счет
нужно как минимум не сократив функционал (информация о доставке, 3D картинка, и т.д.) в общем все информационные
надписи, можно пожертвовать только кратким описанием, но выводить его при наведении на область товара мышкой, в общем
здесь от вас нужны идеи и побольше, да и устарелыми смотрятся эти страницы.
шаблон product_brief.tpl.html
все должно работать так что если скрипт не смог узнать разрешение экрана то чтоб все было как сейчас, т.е. чтоб сайт
отображался так как будто он не адаптивный.
также нужно чтоб можно было легко в любом месте сайта показывать или не показывать конкретные блоки или
конкретную информацию в зависимости от разрешения экрана (дальнейшие доделки), здесь нужно сразу продумать концепцию адаптивности чтоб легко было ее модифицировать и дополнять и использовать в разных местах сайта.
От исполнителя требуется знакомство с движком shop-script premium и опыт создания адаптивных сайтов (портфолио адаптивных сайтов обязательно), которые бы успешно работали не только на сложном експлорере разных версий, но и на различных мобильных платформах.
Вся работа должна происходить только с файлами smarty шаблонов которые конечно будут предоставлены, в PHP код
разрешение экрана передавать не нужно, чтоб вся адаптивность была на уровне браузера и JavaScript, картинки
интерфейса можно сделать разных размеров для разных разрешений, но если это картинка товара то необходимо работать
только с width тега img