11 Октября, 2012. Адаптивные Prestashop шаблоны

Только представьте себе различные способы доступа в Интернет: настольные компьютеры, ноутбуки, планшеты, смартфоны, eReaders и многие другие. А если еще добавить изобилие веб-браузеров и операционных систем, то посещение сайта где угодно, выглядит как небольшое чудо. Для удобства в веб-серфинге были изобретены адаптивные шаблоны, которые включают гибкий дизайн, использующий скрипты и технологии, которые могут перестраивать веб-страницы безо всяких усилий, автоматически.

Сегодня Адаптивный дизайн можно встретить везде в Интернете. Каждый, уважающий себя, сайт уже давно адаптирован для мобильных девайсов, делая его более удобным для пользования.

Команда разработчиков Templateog体育首页 проделала отличную работу, преобразовав адаптивный дизайн в линейку новых продуктов: Адаптивных шаблонов Prestashop, которые мы рады представить.

Эта цель заставила нас потрудиться наславу этой осенью. Проделано много работы для функциональной адаптации магазина к разрешениям экранов смартфонов и планшетов. Это не просто перестановка блоков, увеличение/уменьшение изображений вместе с изменением размера шрифта, а стало настоящим «приложением для смартфонов». Все элементы и модули были перерисованы и стилизированы. Изменения затронули даже Корзину и страницу подтверждения заказа, «интеллектуальное» увеличение описания было тщательно продумано и запатентовано, были добавлены Ajax скрипты для перезагрузки страниц. Элементы для тач-скринов были эффективно реализованы для комфортного пользования.

Давайте ознакомимся с самыми интересными и важными особенностями.

Ниже Вы можете видеть три главные разметки адаптивных шаблонов Prestashop. С первого взгляда ничего особенного, но давайте рассмотрим их поподробней.

Начнем с верхней панели. В правой части Вы можете видеть символы: Language, Currency и Log In.

Вот, что происходит при нажатии на эти кнопки: появляются выпадающие меню с 5 языками и тремя валютами.

Чтобы увидеть адаптивную разметку, просто измените размер окна браузера.

Корзина

Давайте посмотрим на опции и возможности корзины:

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

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

Когда Вы нажимаете Add to Cart миниатюра продукта «перелетает» в корзину, появляется выпадающее окно с сообщением, что продукт успешно добавлен. Простой, но очень эффективный способ показать посетителю, что продукт в корзине.

Просмотр продукта

Есть одна великолепная вещь, мимо которой просто нельзя пройти. Это усовершенствованный просмотр продукта. Особенно удобно для тач-скринов, просто нажмите на красный крестик и передвигайте пальцем или стулусом по экрану, чтобы увидеть увеличенное изображение продукта. Слайдер под изображениями продуктов тоже можно «прокручивать» пальцем или стилусом.

Категории

Далее рассмотрим Категории. Вне зависимости от девайса панель будет на экране. На экранах широкого разрешения этот блок будет без изменений, но на планшетах он превратиться в выпадающее меню! Неплохо, не правда ли!

Опции продуктов

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

Страница продуктов со скидками

Давайте взглянем на Страницу специальных продуктов, по умолчанию доступно два типа просмотров: Мозаика и Список.

Еще больше продуктов появилось в пространстве адаптивного дизайна. Теперь пришло время взглянуть на другие Адаптивные шаблоны Prestashop Themes.