Главная / Создание и продвижение сайтов / САЙТОСТРОЕНИЕ / Prestashop / Кнопка «Вверх» для интернет-магазина на PrestaShop

Кнопка «Вверх» для интернет-магазина на PrestaShop

Очередной урок из серии «Настройка PrestaShop 1.5». О том, что необходимо предпринять, чтобы в 1.5 нормально заработал поиск, я писал здесь.  Не так давно были также посты о том, как снять ограничение на количество товара при покупке и как без лишних хлопот сделать выгрузку остатков и цен в интернет-магазин. Еще несколько статей ожидают своего часа, пока же на фиксирование даже части того, что мне приходится делать с файлами моего рабочего шаблона, не всегда есть время.

Сегодня хочу рассказать вам о быстром и простом способе добавить на страницы вашего магазина на PrestaShop кнопку прокрутки к началу страницы или кнопку «Вверх». Потребность в этой кнопке, безусловно, есть у любого мало-мальски заполненного товаром сайта. Одной из полезных функций, идущих в системе «из коробки» является возможность отображения требуемого количества номенклатурных позиций на странице категорий кратно 5, 10, 20, 50. Постоянному клиенту, долгое время работающему с вашим товаром нет нужды каждый раз заходить в карточку товара, чтобы добавить его в корзину, если есть возможность покупать товар прямо со страниц категорий и подкатегорий. И в случае, когда товаров на странице отображается более десятка, приходит на помощь кнопка «Вверх». Кроме того, в PrestaShop сортировка товаров на странице реализована по таким критериям, как наименование, цена, артикул, наличие — а это дополнительное удобство для покупателя. О том, как пользоваться сортировкой поговорим в следующий раз.

Элементарный поиск по официальному форуму PrestaShop выдает несколько вариантов добавления прокрутки к началу страницы. Все они реализованы с помощью модулей PrestaShop. Вот, например, один из них:

prestashop-scroll-top-01Разумеется, нет никакого смысла покупать совсем не дешевый модуль для реализации несложной функции, когда существуют его бесплатные аналоги. Там же, на официальном PrestaShop-форуме мне попалось два free-варианта кнопки «ScrollTop», один из них оказался актуален для версии 1.5, что мне и требовалось.

Модуль называется Scroll To Top 1.2, взят в разделе Free Modules, можете его скачать там или у меня (ссылка в конце страницы), поделившись этой статьей в одной из соцсетей. Он настолько прост в установке и настройке, что даже не требует перевода, все понятно и так. Тем не менее, минимально проиллюстрирую процесс его интеграции в интернет-магазин.

prestashop-scroll-top-02

Установка производится стандартным для модулей способом: меню Модули — Добавить новый модуль. Показываем путь к архиву scrolltop.zip и нажимаем Загрузить этот модуль. Поскольку модуль очень мал (порядка 25Kb), загрузка происходит моментально и нас перебрасывает в раздел Модули для фронт офиса. Нажав кнопку Установить, включаем модуль вновь добавленный нами модуль Scroll To Top.

prestashop-scroll-top-03

После этого открывается минималистичное окно настроек, в котором нам предлагается выбрать стиль кнопки, задать ее прозрачность и расположение относительно правого нижнего угла страницы. Меня предложенный по умолчанию вариант вполне устроил, т.к. на поддерживаемом мной ресурсе часть нижнего угла страницы занимает свернутое окно онлайн-консультанта.

prestashop-scroll-top-04

Все, других настроек у этого модуля нет. Теперь вам известно, как сделать кнопку «Вверх» для сайта PrestaShop. Кнопка появляется сразу и при нажатии на нее осуществляется скроллинг к началу страницы, т.е. — к меню, которое нам в большинстве случаев и требуется.

Кстати, если дизайн, размер или цвет кнопки вас чем-то не устраивает, достаточно заменить графический файл кнопки на хостинге по адресу ваш сайт\modules\scrolltop\icon_top.png. Экспериментируйте. До скорых встреч!

Ну и напоследок, обещанная ссылка на скачивание этого замечательного модуля:

Модуль Scroll to Top для PrestaShop

Расскажите об этой статье в соцсетях:

7 комментариев

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

  2. Кристина

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

  3. Шикарно!!! Большое спасибо!!! Работает на ура!!! Если можно вопрос: почему такая бледная кнопка на сайте, прозрачность около 40-50%. Можно убрать прозрачность, или чуть уменьшить? И как перенести кнопку налево?

    • Цитирую из текста статьи: «минималистичное окно настроек, в котором нам предлагается выбрать стиль кнопки, задать ее прозрачность и расположение относительно правого нижнего угла страницы». Там все предельно просто.

  4. Перенести кнопку налево просто: нужно увеличить расстояние 50px по стрелке налево до 1450px (в моём случае). Но шикарный модуль, шикарный….

  5. Поддерживаю, кнопка «вверх» не помешала бы и на вашем сайте.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *