В апреле релиз новой версии PrestaShop 1.7 стал доступен для открытого тестирования, разработчики активно принимают баги и готовятся к релизу стабильной версии. На момент написания статьи релизу присвоен статус 3 альфа. Под катом обзор нового функционала и технических нововведений.
Общее представление о Bootstrap и его классах мы получили из предыдущих постов, в сегодняшней статье рассмотрим более подробно работу с bootstrap и html компонентами в шаблонах PrestaShop.
Новогодние праздники позади и мы продолжаем знакомство с реализацией Bootstrap в шаблонах PrestaShop. Для навигации рекомендую использовать первый пост в цикле статей. В Bootstrap есть множество дефолтных классов с заранее заданными стилями поведения – PrestaShop поддерживает большинство из них.
В преддверии нового года предлагаю познакомиться с еще одной важной темой для верстки шаблона PrestaShop с поддержкой Bootstrap, а новогодние праздники потратить на закрепление материала )
Итак перейдем к теории – Bootstrap использует 12 колоночную сетку, которая позволяет построить гибкий макет. Вы можете использовать медиа запросы для указания контрольных точек для сетки. Дефолтное значение оптимизировано для самых низких разрешений экрана (480px – экраны самых маленьких телефонов), поэтому для этого случая использовать медиа конструкцию не нужно.
Для создания праздничного настроения у покупателей интернет магазина, можно сделать хорошие скидки и акции. А можно сделать новогодний фон для сайта на PrestaShop, о том как как изменить и сделать красивый фон для сайта читайте в статье под катом.
Как и обещала от теории переходим к практике, в сегодняшнем посте опишу подробнее применение Bootstrap в структуре шаблона PrestaShop.
Для полноценной работы Bootstrap необходимо использование HTML5. Будьте внимательны используя свойство doctype в своих шаблонах.
В июле вышел долгожданный релиз новой версии PrestaShop 1.6.1. Разработчики CMS в своем блоге утверждают, что этот апдейт имеет более 500 улучшений.
Изменения видны уже на этапе установки, помимо изменения цветовой гаммы, изменился порядок шагов заполнения формы. Позитивные смайлики означающие успешное прохождение этапа установки сменились галочками(.
По сравнению с предыдущими релизами была существенно доработана внешняя часть админки – произошла смена логотипа, цветовой гаммы, навигационных элементов и т.п.
Начиная с версии PrestaShop 1.6 базовый шаблон разрабатывается на основе фрэймворка Bootstrap. Поэтому даже если Вы не планируете разработать шаблон с нуля, а только хотите внести ряд правок в текущий – необходимо ознакомиться с этой технологией.
Тип сайта: Интернет магазин.
Поставленная задача: Разработка интернет магазина на PrestaShop 1.6
Срок разработки: 45 дней
Использовались: CMS PrestaShop 1.6, HTML5, CSS3, Font Awesome 4, Google Fonts, Ajax.
В основу дизайна положено яркое сочетание цветов: черный, желтый и белый. Благодаря этой контрастности можно отказаться от излишне детализированных элементов, и по максимуму использовать возможности CSS3 верстки. Минимизация картинок в оформлении позволяет увеличить время загрузки страницы, что крайне важно для крупного интернет магазина электроники. Например, всё графическое оформление данного шаблона вынесено в единый спрайт, который имеет размер всего 3.8Кбайта.
Рада предложить Вашему вниманию новый бесплатный шаблон PrestaShop 1.6.
Из преимуществ стоит отметить:
– полностью респонсивная верстка, корректно отображающаяся на мониторах устройств с различным расширением (мониторы ПК, планшеты и телефоны).
– шаблон разработан с использованием новых веб-технологий: Bootstrap 3, Font Awesome 4, CSS3, HTML5, Google Fonts.
– SEO оптимизирован
– используется CSS и JS компрессия.