Слайдер во всю ширину сайта, PrestaShop 1.6

В этом уроке хотим показать, как легко можно изменить способ появления слайдов стартовой страницы в загруженном по умолчанию шаблоне PrestaShop 1.6. Как вам уже известно, установленный по умолчанию модуль для прокрутки слайдов домашней страницы – это неотъемлемая часть вашего магазина.
Слайдер во всю ширину сайта, PrestaShop 1.6

Он появляется непосредственно под главным меню. Возле модуля справа можно заметить два небольших баннера. В этом руководстве будет описано, как удалить эти баннеры и как изменить ширину слайда до 100%.

Как изменить ширину до 100%.


В PrestaShop 1.6 всего этого можно достичь, не затрагивая файлы. Можно делать что угодно в бэк-офисе с доступными настройками и свойствами. Это что то невероятное! Я просто сравниваю все это с PrestaShop 1.5, там все было намного сложнее, если нужна подробная инструкция для PrestaShop 1.5 пишите в комментариях.

Отключение малых баннеров справа


Первое, что следует сделать: нужно удалить два маленьких баннера справа с заглавной страницы со слайдами. Эти картинки (фото) являются частью модуля «темы конфигурации», и для их удаления нужно просто отключить этот модуль. Но имейте ввиду, что не стоит отключать модуль для всех, только для присоединенного displayTopColumn. Для этого заходим в модули – вкладка «Позиционирование» бэк-офиса. Ищем там список модулей под названием displayTopColumn. Вы увидите два таких модуля (так устанавливается по умолчанию). Нажимаете на правку возле темы конфигурации и кликнете «отсоединить» (unhook). Отсоединение модуля темы конфигурации от главной позиции на экране.
Отключение малых баннеров справа
После произведенных действий два маленьких баннера исчезнут, но останется пустое пространство. Его нужно заполнить с помощью нашего модуля слайдера. Тогда получится картинка на всю ширину экрана.

Изменение ширины баннера


Заходим в Модули — таблица модулей и ищем «слайдер изображений для домашней страницы» (image slider for your homepage). Нажимаем на кнопку «Настройки» возле этого модуля, и тогда Вы будете перенаправлены на страницу конфигурации модуля. В главных настройках в форме меняете максимальные параметры ширины со значения 799рх (пикселей) на 1170рх (но вписывать 1170 надо строго как показано). Почему именно 1170? Потому что 1170 – это ширина содержимого главной страницы.
Изменение ширины баннера

Удаление баннеров шириной меньше, чем 1170


Поскольку мы изменили ширину окна слайдера, то теперь нужно удалить все старые загруженные баннеры, имеющие параметр ширины менее 1170 пикселей. Теперь нужно загрузить изображения, ширина которых составляет минимум 1170 пикселей. Удаляем актуальные слайды. Под меню «Настройки» (где вы меняли ширину слайда) можно управлять уже загруженными слайдами. Просто выбираем кнопку «Удалить» (delete).
Удаление баннеров шириной меньше, чем 1170

Загрузка изображений с новыми параметрами


Если вы удалили уже все старые файлы с неправильной шириной, как раз время загрузить новые изображения. Итак, нужно подобрать ваши собственные слайды, например, обработав в фотошопе или с помощью другого программного обеспечения. Это позволит создать слайды с шириной в необходимые нам 1170 пикселей и загрузить их в слайдер. Они появятся как «полностью» широкие слайды, то есть как заглавные слайды на стартовой странице. После загрузки всех новых слайдов не забудьте их активировать – включить! Можете загрузить пример любого изображения с параметром ширины 1170 здесь.

Итог


Загрузили новый слайд
Загрузили новый слайд
После всех правок, наш результат
После всех правок, наш результат

Вот и всё, урок окончен) Если у Вас остались вопросы пишите их в комментариях по возможности буду стараться давать ответ.

24 комментария

комментарий был удален
комментарий был удален
avatar
Вопрос на засыпку: как текст переместить на банере? Редактирование средствами престашоп ни к чему не приводит. И по правому краю, и по центру и пробелами ничем не помогает. Также заметил, что если через код добавить тексту дополнительные css свойства, например тень, то в редакторе текст становится с тенью, но при нажатии на «сохранить» ничего не происходит. Код удаляется, остается только тот код, функционал, которого есть в редакторе. Как это поправить?
avatar
Вносить стили напрямую через CSS это также касается и расположения текста на слайдере.
avatar
в общем править global.css я так понимаю?
avatar
Да все верно, прописать в нем нужные стили или изменить существующие.
avatar
Нужна ли помощь?
avatar
А не подскажете как вернуть обратно банеры которые справа от слайд-шоу? Я их удалил а сейчас хотел вернуть, но не получается…
avatar
Постараюсь помочь Вам ;)
Для начала возвращаем исходный размер слайдера
joxi.ru/ZrJYPjPt136O5A
Должен быть 779px на 448px, в панеле управления указываете только ширину
joxi.ru/E2p1OnOHBOYqLA
Теперь переходим к настройке шаблона
joxi.ru/bmoz3b3hMNQGJr
Далее скролим вниз, там будет много баннеров, но тех что справа слайдера, не будет
joxi.ru/MAjoLeLFvRayzr
Давайте добавим первый баннер, возвращаемся немного вверх и нажимаем добавить элемент
joxi.ru/n2YaP0PtjGn852
Хук top
Изображение нужно выбрать из Вашего компьютера
Ширина изображения 381px
Высота изображения 219px
joxi.ru/a2XZBYBFy0V8kr
По аналогии добавляем второй баннер
Как видим они появились в панеле управления
joxi.ru/YmEaPpPtZb3QEm
И на самом сайте
joxi.ru/1A5x7J7uK0QN12
avatar
Спасибо большое! Разобрался!
avatar
;)
avatar
Добрый вечер. Скажите пожалуйста как можно поменять местами слайдер с баннером который по стандарту справа снизу от слайдера. Слайдер нужно сделать размером как баннер, а баннер на месте слайдера по его размеру. Спасибо.
avatar
Добрый вечер, используйте хуки, или визуальный редактор.
avatar
То есть не нужно лезть в код, можно все сделать стандартными возможностями Presta?
avatar
Да
avatar
Спасибо большое за быстрый ответ%)
avatar
;)
avatar
Добрый день. Перепробовал все и ничего не получилось((( Наверное что-то не так делаю. Возможно Вы бы смогли мне подсказать немного подробнее как правильно выполнить эту задачу.
avatar
Да конечно, но платно.
avatar
Спасибо. Полночи сидел и все же добился успеха. Еще раз благодарю за помощь.
avatar
Подскажи, пожалуйста, где именно и какие хуки ковырять. Хочу просто вынести все банеры под слайдер в одну линию.
avatar
Возможно сделаю, когда то урок. Как вынести все баннеры в одну линию под слайдер.
avatar
Что то я не то сделал. У меня вообще пропал слайдер. Подскажите что я не то открепил, и как вернуть обратно :) Спасибо.
avatar
Я не знаю что Вы не так открепили.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.