Обзор возможностей PrestaShop 1.7 вы можете прочитать в предыдущем посте.
Итак чем же нас порадовали разработчики на этот раз.

Модули в PrestaShop 1.7.1

:
Новых модулей пока нет, но команда активно работает над переносом модулей из версии 1.6
Обновились модули:

• ps_bestsellers (бывший blockbestsellers)
• ps_brandlist (бывший blockmanufacturer)
• ps_crossselling (бывший crossselling)
• ps_emailalert (бывший mailalert)
• ps_newproducts (бывший blocknewproducts)
• ps_productinfo (бывший producttooltip)
• ps_rssfeed (бывший blockrss)
• ps_specials (бывший blockspecials)
• ps_viewedproduct (бывший blockviewed)

К сожалению многие важные модули до сих пор не обновились, а поэтому не поддерживаются в PrestaShop 1.7. Поэтому их необходимо покупать в их официальном маркетплейсе у разработчиков.
Например:

• Advanced Reviews (блок комментариев)
• Advanced block wishlist (вишлист)
• Referral Program (реферальная программа)

Появилась кнопка «Обновить все» и не нужно теперь обновлять каждый модуль отдельно.

1-Click Upgrade – позволяет обновить PrestaShop 1.6 до PrestaShop 1.7

В связи с глобальным обновлением магазинов — это конечно один из самых важных модулей.
Для обновления вашего магазина необходимо загрузить свежую версию 1-Click Upgrade. Лучше всего это сделать с официального сервера PrestaShop:
Скачать 1-Click Upgrade

По обновлению готовлю отдельный пост, поэтому тут процедуру описывать не буду.

Новый шрифт Noto Sans

В дефолтной теме использовался шрифт «Open Sans», теперь он замене на Noto Sans. Это сделано для лучшей поддержки языков и различных письменностей (на данный моент 583).

Панель администратора.

Разработчики сделали оптимизация мобильной верстки для админки. Меню и иконку профиля перенесли под сворачивающийся значек меню, это позволило освободить место и избавиться от не совсем информативных иконок. Сейчас меню появляется по клику на иконке.
Было:

Стало:

При редактировании товара появилась новая секция для сторонних модулей страницы товара.

Это хорошая новость, т.к теперь можно обновить модули у которых раньше была своя «вкладка». До эого релиза у этих модулей не было полной поддержки в PrestaShop 1.7

Для разработчиков модулей PrestaShop 1.7

Полная статья по хукам на блоге разработчиков тут (на английском).
Часто спрашивают, поэтому добавлю здесь – Соответствия между хуками PrestaShop 1.6 и 1.7 (на английском).

Ну и конечно же пофиксено много багов в админке и фронт оффисе.
Следующий релиз PrestaShop 1.7.2.0 согласно их таблице ждем в июне.

Работу новой версии Вы можете посмотреть на моем демо сайте, там же интегрированы некоторые платные доработки оптимизируюшие возможности магазина.
Тестировать PrestaShop 1.7

Новая система перевода до сих пор находиться в разработке и скорее всего рабочий релиз PrestaShop 1.7 выйдет со старой системой перевода. Но команда престы усиленно работают над его внедрением и обещают держать нас в курсе событий.

Краткие тезисы о предстоящих изменениях:

• Больше не будет дублей строк перевода, т.е не нужно 10 раз переводить “Edit” и “Add to Cart”
• Система будет полностью совместима с Symfony.
• Базируется на «доменах», например ‘Shop.Notifications.Error’
• Реализована обратная совместимость с модулями PrestaShop 1.6

Примеры реализации.
Каждая строка должна вызывать переводчик Symfony.
Ниже приведу сравнение вызова (первая строка как в 1.6, вторая – как будет в 1.7)
Пример вызова в .php файле:

Пример вызова в .tpl файле:

Ну и как я уже писала в обзоре PrestaShop 1.7, теперь разработчикам придется работать с новым типом файлов .twig:

Что это означает для разработчиков?
Если Вы создаете новую строку необходимо использовать метод trans() и иметь соответствующий домен.
Если у вас есть модули совместимые с версией 1.7 – не беспокойтесь! Новая система будет совместима с переводчиком 1.6 (т.е. переделывать эти модули не придется)

Доменная структура

Все домены организованы в 4 основные секции: Shop, Admin, Modules и Install. Это домены первого уровня – их присутствие при переводе строки обязательно.

Все строки предназначенные для перевода должны быть соотнесены с одним из этих доменов (думаю из названий понятно какие куда).
В строке должно быть как минимум два домена – первый и второй уровень. Рассмотрим домены второго уровня подробнее.

Modules

Структура доменов в случае перевода модулей похожа на иерархию папок. Сначала идет папка “Modules” (домен первого уровня), потом папка с название модуля (второй уровень), а потом разделение – где эта строка появится (в админке или шаблоне магазина).
Присутствие 3х уровней не обязательно, например, если модуль будет выводиться только в шаблоне, то можно использовать два уровня (Modules.ImageSlider для модуля “Image Slider”)
 
Shop

Все строки предназначенные для фронт офиса соотносятся с доменом Shop, как видите из картинки со структурой – тут все немного сложнее. Значение домена второго уровня зависит от функционала, который выполняет эта строка.

Admin
Тут как и в случае с Shop домены зависят от функционала.

Пример перевода админки (Design > Image settings)

Вот как эти строки будут разнесены по доменам (соотносить по цветам)

Как видите из краткого изложения статьи, опубликованной на блоге разработчиков PrestaShop (http://build.prestashop.com/news/new-translation-system-prestashop-17/) – изменения в системе перевода будут кардинальные.
Ждем с нетерпение когда работы по интеграции будет завершены и мы сможем протестировать новый функционал более детально.

Предыдущую статью о выборе хостинга для Prestashop (а так же схожих по нагрузке CMS OpenCart и WordPress) я писала несколько лет назад, и сначала думала обновить ее, но времена меняются «хостеры» тоже, и прикинув, что переписать придется процентов 60-70 статьи, решила написать новую. Постараюсь в этой статье кроме описания достойных нашего внимания компаний описать более подробно методику выбора хостинга и рассмотреть различные аспекты еще шире.

(Если вам лень читать всю статью, то вы можете перейти сразу к итогу и награждению кликнув по этой ссылке -> «Перейти к итогу» )

Если вы ответственно подходите к ведению вашего бизнеса, то еще более ответственно должны подойти к выбору места где будет располагаться ваш сайт, ведь на данный момент времени сайт — это чуть ли не важнейшая составляющая бизнеса, которая при должном внимании обеспечит неплохой а часто и основной приток клиентов. Исходя из этого при выборе хостинга нужно руководствоваться некоторыми критериями, которые позволят сайту работать 24 часа в сутки, 7 дней в неделю, ну я думаю вы поняли о чем я.

Мои критерии подбора хостинга для Prestashop, OpenCart и WordPress

Критерии расположены в порядке важности, так 1 это наиболее важный критерий, а 6 наименее важный.

1) Надежность ( надежность понятие очень обширное, но все что с ней связано направлено на то, что бы сервер работал круглосуточно и без перебоев, будь то резервирование каналов связи, питания или других компонентов ) — для проверки надежности буду использовать сторонний сервис «пингадмин» который непрерывно следит за работоспособностью сервера и фиксирует его падения.

2) Количество выделяемых клиенту ресурсов на схожих тарифах возьмем вилку 200-300р в месяц ( количество выделяемых вам  ресурсов зависит от многих обстоятельств если речь идет о хостинге, например сколько клиентов на сервере, какое на нем оборудование, и даже от самого сайта. В следующей статье я постараюсь сделать тест на скорость загрузки сайтов Prestashop, Opencart, WordPress на рекомендуемых мной хостингах )

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

4) Удобство панели управления ( Лично для меня важнее например насколько быстро я могу сделать или развернуть backup сайта, или могу ли я прямо из панели посмотреть файлы через FTP,  и другие приятные бонусы которые позволяет хостер сделать быстро и самостоятельно, нежели разница в стоимости 30-40 рублей в месяц, но в данном случае решает конечно каждый сам )

5) Возраст компании ( критерий косвенный, но все таки нельзя не принять тот факт, что компания которая на рынке уже 10 лет, отточила технические, бухгалтерские и т.п. процессы протекающие в компании намного лучше компании которой 1-2 года )

6) Тестовый период ( количество бесплатных дней для тестирования услуг )

Где лучше взять хостинг в России или зарубежом?

Еще один очень важный вопрос которым задаются многие – а не взять ли хостинг  зарубежом. Тут есть пара нюансов о которых нужно хорошенько подумать.

Первый – это техническая поддержка на английским языке (ну или языке той страны в которой вы выберете хостинг), и это не просто английский уровня туриста, а технический английский, и чем будет сложнее ваша проблема тем будет сложнее общение.

Второй момент который многие сейчас уже не считают за проблему  – это физическая удаленность  серверов. Да, скорость передачи данных в каналах связи выросла, но пропорционально ростет и  их загрузка, так же количество пройденных «пакетом» узлов дает не проходит бесследно. Что бы не быть голосновной давайте взглянем на путь 2х клиентов из Москвы и Тюмени до сайтов расположеных непосредственно в России (будем проверять этот сайт, он находится на Beget) и Зарубежом (возьмем для примера hostland это довольно известная американская хостинг компания).

Расположение в Москве (кликните, что бы открыть картинки).

Ниже можно увидеть скриншот с tracerout из Ростова (как пример) до Москвы, и из Москвы, до сервера там же, в Москве, в обоих случаях время отклика отличное.

Расположение в США (кликните, что бы открыть картинки)

Когда сервер расположен на другом континенте (в нашем случае в США) это заметно, и время отклика значительно увеличивается по сравнению с расположением в Москве.

Скриншоты tracerout из Ростова и Москвы до сервера расположенного в США (кликаем что бы развернуть скриншоты)

Как итог могу сказать следующее — удаленное расположение сервера как видите вносит свои коррективы, тут 150мс, там 150… глядишь уже секунда лишнего времени, так и набирается время загрузки… и мое мнение: «ближе к пользователю, меньше промежуточных узлов – лучше», но и в данном случае выбор тоже нужно делать с умом.

Перейдем непосредственно к Обзору и выбору хостинга для вашего сайта.

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

И так начнем:

Beget (Ссылка на тарифы)

C Бегетом я работаю не первый год, хостинг мне нравится честностью, отличной технической поддержкой, адекватными ценами, возможностью прямо из панели менять параметры тарифа по многим параметрам (Количество сайтов, разрешенная нагрузка, дисковая квота, нагрузка на MYSQL) это очень удобно когда например увеличившееся количество посетителей требует всего лишь добавить разрешенной нагрузки на процессор, не переплачивая например за дисковое пространство или ненужное количество сайтов.

О тех поддержке стоит сказать отдельно, настолько отзывчивой технической поддержки еще не встречала (ну может на спринтхосте…), часто помогают решить проблемы которые не в их компетенции, в разумных пределах конечно. И конечно же адекватные ответы ночью, я так полагаю, что, на ночном дежурстве, всегда есть кто то из старших администраторов, кто может решать более сложные вопросы.

SprintHost

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

Fozzy

(Используйте код  «web-esse» при заказе, что бы получить дополнительные 10% скидки!)
Последний советуемый хостинг это – FOZZY. Компания молодая, но создана она в рамках холдинга XBT, а это хостер с мировым именем у которого обслуживаются такие компании как Nival, Drimmi, ForexClub, SocialQuantum и многие другие не менее известные компании. Приятным сюрпризом будет и то, что вы сможете выбрать расположение сервера в США, Европе, России, Индии, и у вас бдет русскоязычная техническая поддержка! Так же очень много полезных «маст хэв» плюшек ускоряющих сайт (LITESPEED, бесплатный CDN сервер (настройку можно глянуть тут — http://doc.prestashop.com/display/PS16/Performance+Parameters), и т.д.). Серьезная заявка на победу, не правда ли? Если этого мало посмотрите на показательно надежности J.

TimeWeb

С таймвебом у меня связано много различных историй, и хороших и не очень. Хостинг надежный, быстрый, с удобной панелью, но последнее время мне перестала нравится их техническая поддержка, по большей части отвечающая отпиской, что у них все ок, проблема на сайте, т.е. соучастие в помощи решения проблемы стремится к 0. Нет, я понимаю конечно, что в некоторых случаях можно так отвечать, но бывают случаи когда действительно есть непонимание ситуации откуда у проблемы ноги растут (например — рабочий 10минут назад сайт в котором ничего не менялось стал выпадать в ошибку «database connection cannot be established»). Может я попадала на таких сотрудников… еще раз повторюсь, если бы не эти инциденты с ТП, то хостинг для меня был бы на первых местах по выбору.

SmartApe

Довольно молодая компания, с достаточно интересным зарубежным подходом к предоставлению услуг. Зарубежный подход подразумевает «безлимитный хостинг», т.е. как бы ограничений нет… но как вы понимаете бесплатный сыр только в мышеловке, и ограничения есть. Но несмотря на то что безлимит этот условный, его значения, например в плане места — на диске в 100 гигабайт и дополнительные 100 предоставляются по запросу, внушают уважение. Отдельно стоит сказать о стоимости и гибкому подходу при оплате за длинный промежуток времени – при оплате  сразу за 3года вы получаете стоимость 99р.\месяц (если платить помесячно то стоимость будет 249р.\месяц, если оплачивать 1 год то 149р.\месяц), что неприлично дешего на текущий момент. И при всем этом вы можете тестировать тариф целый месяц ( что я настоятельно рекомендую делать! ).  Мне приходилось работать с SmartApe, но не очень много,  панель ISP (к ней я отношусь нейтрально), хорошая скорость работы сайтов, достаточно быстрая реакция ТП на вопросы и т.д. А и чуть не забыла, у SmartАpe есть защита от DDoS атак. ( я работаю со SmartApe чуть меньше года ,  и хотя, пока мне все нравится,   прошу относится к нему с некоторой осторожностью)

Итог:

Перед тем, как раздать места участникам, хотела бы еще раз повторить основные моменты.

• Всегда тестируйте хостинг сами (желательно  копией своего магазина)
• Пообщайтесь с ТП, задайте все интересующие вас вопросы.
• Доверяйте только своим рукам и глазам.
• В этой статье я написала свое мнение, оно основано на личном опыте, и работе с рекомендуемыми хостингами, но оно может отличаться от вашего или чьего либо.
• Большинство хостингов  дают льготные периоды при переезде от конкурента, спрашивайте об этом у ТП.
• Часто перенос сайта со старого хостинга на новый можно заказать бесплатно через Техническую поддержку у компании к которой вы переезжаете ( если есть проблемы с переносом, или не хотите доверять сайт кому попало, то можете написать мне, я не дорого перенесу ваш сайт на новый хостинг без перерыва в его работе ).

И так в первую очередь я бы порекомендовала Beget (кликните для перехода на сайт хостинга) и Fozzy (кликните для перехода на сайт хостинга), они делят первое место,  обе компании заслуживают первого места в первую очередь за надежность, отличную техническую поддержку, Бегет за удобство, а Фоззи за сбалансированные тарифы и приятные бонусы в виде LITESPEED и бесплатного CDN сервера.

Второе место занимает Sprinthost – разумные цены, хорошая техническая поддержка, стабильная работа, и постоянное развитие, что еще для счастья нужно?

Третье место – SmartApe, предлагают очень выгодные тарифы, хорошую надежность,  но всетаки безлимитных тарифов не бывает, у всего есть предел (Прошу относится с осторожностью к покупке сразу 3х лет обслуживания, все таки работаю я с ним всего пол года ).

И последнее место я бы отдала TimeWeb, почему так? Казалось бы разумные тарифы, удобство, надежность. Да все просто, один из ключевых для меня параметров в последнее время стал работать на мой взгляд довольно посредственно – это техническая поддержка. За это Таймвеб и становится аутсайдером.

Еще один момент, в данной статье я рассматривала начальные тарифы которые подойдут для старта и начальной раскрутки, по мере роста сайта вам так или иначе придется задумываться о расширении либо  текущего тарифа, либо, что лично я больше приветствую, переезде на отдельный VDS\VPS. Просчитайте этот шаг заранее, посмотрите тарифы на эти услуги у выбранной вами компании, что бы переезд был наименее безболезненный. (Тут можно почитать мою статью «Выбор VPS/VDS (Виртуального сервера) для Prestashop» )

Что нового в технической части PrestaShop 1.7

:

• Поддержка PHP 5.4+ и MySQL 5.0+. Обновление минимальной версии произошло в связи с внедрением фреймворка Symfony2. Если планируете обновление проверьте настройки хостинга — более ранние версии php не будут поддерживаться. Пользователям Denwer так же придется искать альтернативные решения, так как к сожалению этот пакет не обновлялся с 2013 года и php 5.3 используемый в нем безнадежно устарел.
• Фреймворк Symfony2 вместо самописного. Для более плавного перехода на новый фреймворк в prestashop 1.7 Symfony будет использоваться только для двух разделов back-office — Товары и Модули. Интерфейс ядра останется тем же, поэтому срочно переписывать программную часть ваших модулей нет необходимости.
• Обновлена архитектура – опять таки связана с внедрением Symfony2. Огромным недостатком является невозможность обновиться с PrestaShop 1.6 и более ранних версий.
• Шаблонизатор Twig — это php шаблонизатор фреймворка Symfony. Разработчики опять постарались максимально сгладить переход между версиями и в Prestashop 1.7 он будет использоваться только для разделов Товары и Модули. Поэтому все модули не имеющие отношения к этим разделам будут работать и в 1.7. Более того, если у Вас все же есть модули работающие со страницей товаров, то как временное решение можно переключится в обратную совместимость и поддержку Smarty. Разработчики реализуют специальный переключатель для этого.

Что нового в шаблоне:

• Новый шаблон Starter – базовая сборка для дизайнеров. Как заверяют разработчики если положить в основу шаблона этот стартер, то время разработки шаблона можно сократить до 1 недели.
  

  

• Шаблоны от Prestashop 1.6 не будут работать на Prestashop 1.7.
  Логический код будет полностью отделен от темы, контроллеры не отправляют массивы объектов, тема остается неизменной
• Больше не используется Bootstrap.
• Разработка пользовательских тем путем редактирования CSS и настройки базовой темы.
• Более гибкая настройка страницы товара. Будут добавлены специальные поля для книжных магазинов, интеграция с Amazon, возможность показывать цены только в корзине.

Что нового в админке

• Упрощенное создание товара.Теперь нужно заполнить 6 вкладок вместо 12: «Главная информация», «Цена», «Количество», «Доставка», «SEO» и «Настройки»
  
• Улучшенная страница модулей. Конфигурация модулей будет представлена на отдельных страницах сгруппированная по типам. Чтобы сделать работу с модулями более интуитивной были созданы три вкладки: «Выбор», «Установленные модули» и «Уведомления». На вкладке «Выбор» выводиться список модулей, которые могут быть установлены.
• Легко настраиваемый процесс оформления заказа. 5 шаговою процедуру перенесли в аккордеон, что позволило значительно сократить процесс.
  

Что нового в модулях и функционале

:

• Вся функциональность будет реализована через модули
• В модули будет перемещена такая функциоанльность как: мультимагазин, склады и поставщики, доставка, валюты и языки. В предыдущих версиях это было в ядре.
• Повышение безопасности. Будет использоваться другое шифрование паролей, более надежное чем md5.
• URL без ID.
• Встроенный блог.

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

Навигация – работа с компонентом navbar

Отображение navbar на PC

Отображение navbar на мобильных устройствах (все элементы прячутся и появляются по нажатию на кнопку)

Элемент может быть зафиксирован при прокрутке сверху или снизу.

Список некоторых классов для работы с компонентом navbar

• navbar и navbar-inner: класс для создания элемента navbar.
• navbar-fixed-top: при прокрутке navbar всегда будет сверху.
• navbar-fixed-bottom: при прокрутке navbar всегда будет снизу.
• brand – для задания названия сайта.
• nav, nav-tabs и nav-pills – классы для блоков навигации.
• btn и btn-navba – классы для кнопки.
• nav-collapse, collapse, data-toggle, data-target – для автоматически скрываемого контента.
• icon-th-list – класс для задания иконки

Пример использования navbar классов с кнопкой меню с права в шаблоне PrestaShop

  

    

      
        
      SiteTitle
      

        

          
Home
          
About Us
          
Contact Us
        
      
    
  

Таблицы Tables

Bootstrap позволяет легко сделать таблицы более привлекательными, добавлением классов к ее элементам.
Для того, чтобы созданная вами таблица была оформлена в стиле Bootstrap, ей нужно назначить класс table

По умолчанию Bootstrap добавляет таблицам следующий стиль:

• небольшие внутренние отступы внутри ячеек
• горизонтальные серые разделительные границы между строками

Основные классы для работы с таблицами:

• table-responsive: активирует прокрутку на маленьких разрешениях.
• table-striped: добавит серый фон её нечётным строкам.
• table-bordered: добавляет горизонтальные и вертикальные границы ко всем ячейкам.
• table-hover: добавляет серый фон строкам таблицы при наведении курсора мыши.
• table-condensed: уменьшает внутренние отступы в ячейках.

Классы для оформления фонов ячеек

• success — background-color: #dff0d8;
• warning — background-color: #fcf8e3;
• danger — background-color: #f2dede;
• Info — background-color: #d9edf7;

Пример таблицы

  

    
First Name
    
Last Name
    
Email
  


  

    
John
    
Carter
    
johncarter@mail.com
  
  

    
Peter
    
Parker
    
peterparker@mail.com
  
  

    
John
    
Rambo
    
johnrambo@mail.com
    
  

Panels

Иногда нужно поместить информацию в выделенный блок. Для этого случая в Bootstrap есть специальный компонент panel.
По умолчанию Bootstrap добавляет рамку и отступы вокруг панели.

Основные классы для работы с панелью:

• panel, panel-body: определяет блок как панель.
• panel-default, panel-primary, panel-success, panel-info, panel-warning and panel-danger: добавляют визуальные стили.
• panel-heading and panel-title: добавляют заголовок к панели.
• panel-footer: добавляет подвал к панели.

Пример использования:

  

    
Panel Title
  
  

      This is the content of the panel.
  
  

    

      Go Back
    
  

Вспомогательные классы

• pull-left — float: left.
• pull-right — float :right
• clearfix – для согласования высоты дочерних плавающих блоков и родительского.
• close – создает кнопку для закрытия (x).
• caret – создает значек выпадающего меню (dropdown).
• center-block – центрирует элемент.
• show и hidden – отображают и скрывают элемент.

Это наиболее часто используемые классы для быстрой верстки, например, всем плавающим элементам можно теперь задавать класс pull-left, а родительскому clearfix для корректного выравнивания по содержимому.

Классы для респонсивной верстки

Эти классы позволяют скрыть\отобразить элемент в зависимости от устройства, на котором просматривается страница

• visible-xs / hidden-xs — extra small, для телефонов (< 768px)
• visible-sm / hidden-sm — small, для планшетов (≥768 px)
• visible-md / hidden-md — medium, для мониторов десктопов (≥992 px)
• visible-lg / hidden-lg — large, для больших мониторов и TV (≥1200 px)
• visible-print / hidden-print — печать

Бутстрап значительно упрощает поддержку респонсивной верстки, например, для корректного ресайзинга картинок достаточно назначить им класс «img-responsive». Благодаря назначенным стилям «max-width: 100%; height: auto;» картинка начинает изменять свой размер вместе с изменением размера роительского элемента.

Работа с текстом
Выравнивание текста

• text-left — Выравнивание по левому краю
• text-center -Выравнивание по центру
• text-right — Выравнивание по правому краю
• text-justify — Выравнивание текста по ширине

Цвет текста:

• text-muted — color: #999999;
• text-primary – color: #428bca
• text-success – color: #3c763d
• text-info – color: #31708f
• text-warning – color: #8a6d3b
• text-danger – color: #a94442

Как видно из приведенных примеров в Bootstrap имеется множество классов для задания визуальных эффектов, а так же ускорения верстки — поэтому рекомендую ознакомиться с ними и начать пользоваться. Но перед этим ознакомитесь с Bootstrap в структуре шаблона PrestaShop — если новогодние праздники вы начали отмечать рано и пропустили этот пост.
Для навигации по циклу статей о поддержке Bootstrap в PrestaShop удобно использовать вводный пост.

Модуль позволяет вывести слайдер с логотипами производителей на главной.

Хук в который требуется вывести можно настроить в админке.

За модуль нужно благодарить kik-off.com

Скачать бесплатный слайдер с логотипами производителей для PrestaShop.

Скачать модуль

Стили для больших размеров определяются следующими запросами:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
 
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
 
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

Бутстрап использует систему классовых префиксов для определения устройств по их разрешению:

• .col-xs-…: extra small, для телефонов (< 768px)
• .col-sm-…: small, для планшетов (≥768 px)
• .col-md-…: medium, для мониторов десктопов (≥992 px)
• .col-lg-…: large, для больших мониторов и TV (≥1200 px)

Например:

• col-xs-3: 3 колонки на телефоне.
• col-md-4: 4 колонки на десктопе.

Пример верстки страницы категорий базового шаблона PrestaShop c поддержкой модульной сетки Bootstrap

При отображении на мобильных (< 768px) левая колонка будет растянута на всю ширину сетки (на все 12 колонок, 100% ширины родительского div.container), под ней будет идти центральный блок, так же растянутый на 12 колонок. Для устройств с большим разрешением (≥768 px) левая колонка #left_column будет иметь ширину 3 колонок, а центральный блок 9 колонок (3+9 = 12). Для корректного отображения на всех разрешениях ширина колонок будет преобразована в проценты. Если ширина экрана больше 768 px — блок будет просто масштабироваться. В зависимости от размера экрана можно изменять количество колонок. Изменяя классы у блоков мы можем изменять их отображение на различных устройствах, т.о поддержка модульной сетки Bootstrap в шаблонах PrestaShop делает верстку более легкой и быстрой.

Для изменения фонового рисунка придется немного поправить стили CSS в шаблоне — эта операция не сложная, но будьте аккуратны.
Пошаговая инструкция для дефолтной темы PrestaShop:
1. Убираем белый фон у блоков — дописать в самом конце global.css ( фал стилей global.css находится в папке \themes\название_темы\css\):

.header-container, .columns-container{
background: none;
} 

2. Добавляем праздничный фон

#page{
background: url(../img/bg-new.jpg) repeat;
}

3. Для центрального блока делаем белую подложку — чтоб тексты легко читались

#columns .row{
    background: #fff;
}

4. Загружаем фоновое изображение с названием bg-new.jpg в папку img вашей темы (\themes\название_темы\img\).

Бесплатно скачать новогодний фон для сайта можно кликнув по картинкам ниже.

Помимо фона можно добавить скрипт снегопада — но будьте осторожны на высоконагруженных площадках, т.к скрипт вносит небольшую задержку при отображении страницы
Новогодние модули снегопада для PrestaShop

Для предыдущей версии PrestaShop можно скачать новогодний шаблон опубликованный ранее на блоге:

Новогодняя тема для магазина на PrestaShop 1.4

Хочу Вас предостеречь от использования слишком ярких и броских сочетаний цветов — ведь основная задача вашего интернет магазина привлекать внимание к товару, а не к фону.

...

Для корректной работы зума на мобильных устройствах необходимо разместить тег viewport в шапке шаблона.

В верстке используется три уровня вложенности блоков:

• container — класс для основного контента страницы (т.е все блоки сайта размещаются в нем). Все стили для ширины блоков задаются именно для него.
• row — область в которую помещаются блоки для материала
• блок с контентом (из модуля или контроллера)

Пример Bootstrap структуры шаблона PrestaShop

В CSS для основного блока container задана ширина

@media (min-width: 1200px) {
  .container {
    max-width: 1170px; } 

Основная разбивка макета по колонкам идет во внутреннем блоке center_column, как и большинство фишек Bootstrap реализована через классы.
О классах модульной сетки — в следующем посте.

Для навигации по циклу статей о поддержке Bootstrap в PrestaShop удобно использовать вводный пост.