Инструмент разработчика для PrestaShop

imagesМодуль задумывался для возможности редактирования и добавления кнопок и иконок в шаблон магазина.

Но оказалось, что спектр его применения гораздо шире. Те кто использовал когда нибудь WordPress,

знают что у него есть свой встроенный редактор файлов, который позволяет редактировать шаблон и

некоторые файлы движка прямо из админки. Этот модуль позволяет делать то же самое и еще больше.

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

сайта и основы html. Но новичкам в этом деле будет так же интересно поэкспериментировать на том

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

разархивировав, залить по ftp, с последующей установкой. Если вы хотите постоянно использовать

этот модуль на рабочем сайте, то не забудьте о безопасности. Чтобы злоумышленники не смогли

добраться до файла редактора и натворить бед, выполните первую настройку. В поле поиска текста

наберите слово Безопасность(регистр учитывается поэтому обязательно с большой буквы)
скрин 1
Нажмите ниже кнопку поиск и увидите результат поиска ниже формы. Редактор просканирует все файлы

модуля и найдет введенный текст во всех файлах, кроме исключений.
скрин 2
Нажмите кнопку редактировать в файле htaccess, появиться окно его редактирования .
скрин 3
Выполните указанные действия и нажмите кнопку сохранить. После этого доступ к файлам модуля будет

закрыт всем кроме вашего IP. Это первый урок использования редактора.
Использование модуля.
Способы применения
1.запись скриптов в файл шаблона без модулей.
2. стилизация кнопок
3.удаленное редактирование или исправление ошибок на сайте заказчика(дать модуль клиенту с

исправленным паролем и зайти по ссылке домен/modules/wnbuttonstyle/far.php?pass=пароль)
4. использовать модуль на работе где нельзя устанавливать сторонние программы.
5.перевод шаблона, если используется только один язык
6.Поиск и удаление вредоносного кода или сторонних ссылок.
7.Правка css
Если у Вас есть еще идеи использования скрипта, прошу написать их в отзывах.
Для начала я приведу несколько простых примеров,
Пример 1
Установим кнопки социальных сетей на страницу товара в любое выбранное место. Для примера возьмем

скрипт кнопок Яндекс.
Для начала определимся в каком месте должен отображаться код. Основной браузер у меня Chrome и я

использую его инструмент разработчика. Откроем страницу товаров. Расположим кнопки Яндекс ниже

сообщения In stock (в наличии) отмеченной зеленым цветом.Наводим курсор мышки и нажимаем ее

правую кнопку в выпадающем меню выбираем просмотр кода элемента
скрин 4
Во вкладке Elements мы видим слово In stock и id элемента, дважды кликнув по которому выделяем его

и копируем.
скрин 5
Возвращаемся в настройки модуля Поиск и замена. Вставляем скопированный id в поле Текст поиска.

Теперь нужно задать место поиска. Как мы знаем за страницу товаров в шаблонах PrestaShop

отвечает файл product.tpl, который находится в папке используемого шаблона. Редактору нужно

указать место поиска. В поле директория по умолчанию мы видим папки нашего модуля,
скрин 6
а кликнув по двум точкам мы переходим в директорию выше и попадаем в папку модули. Кликнув еще

раз попадаем в главную директорию сайта. Ищем папку themes кликнув по ней раскрывается список

папок шаблонов, выбираем нужную нам(default-bootstrap) и нажимаем кнопку Искать
скрин 7
Из результатов поиска выбираем файл product.tpl и нажимаем редактировать.
скрин 8
В окне редактирования в отличии от первого примера много строк кода и найти нужную часть

визуально сложно, поэтому воспользуемся поиском Ctrl+F и снова введем искомый id
скрин 9
теперь находим закрывающий тег

и после него вставляем полученный код со
страницы http://api.yandex.ru/share/ , а для того что бы наши кнопки не прилипали к другим блокам

заключим этот код так же в теги

скрин 10
Перезагрузим страницу товаров и наблюдаем картину.
скрин 11
Пример 2
Делаем собственные кнопки социальных сетей с помощью модуля инструментов разработчика. В

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

кнопки и оставляю поле пустым, в поле ссылка вставляю http://vkontakte.ru/share.php?url=ссылка

вашего сайта. Цвет кнопки выбираем светло синий. Размер-мини и иконка Вконтакте.
скрин 12
Копируем полученный код внизу блока и вставляем вместо скрипта кнопок Яндекс. И еще добавим уже в

самом шаблоне rel=”nofollow” target=”_blank”
скрин 13
Аналогичным способом делаем кнопки для остальных соц сетей и получим результат типа
скрин 14
Пример 3
Давайте отредактируем кнопки которые мы делали в прошлой статье добавление кнопок навигации на

страницу товара. Нам снова потребуется задать в поле директория используемый шаблон и сделать

правки в файле product.tpl.
Поиск кнопок можно задать уже словами Previous Product и Next Product
скрин 15
Зададим в настройках модуля нужный цвет и иконку и для кнопки Next Product иконку ставим справа.
скрин 16
Но теперь нам понадобиться не весь полученный код а заменим только class=”btnb btnb-success btnb-

default” и добавим иконку
скрин 17
Сохраняем и в итоге получаем
скрин 18

Замечание. Все изменения кнопок и иконок сохраняться только в том случае, если модуль будет установлен на вашем сайте, так как он подгружает стили и иконки.
С помощью модуля я изменил кнопку добавить в корзину в своем магазине http://webnewbie.ru/home/117-modul-instrument-razrabotchika.html

Comments (8)

Сергей
29.05.2015 - 01:15 / Ответить

Спасибо Евгений за такой классный модуль, пользуюсь им уже несколько месяцев, очень иногда выручает!!!
После последних каких-то обновлений или может какой модуль ставил на сайт в общем не знаю по какой причине и при открытии а админке престашоп настройки модуля выходит такое сообщение:
Notice в строке 212 в файле /home/clients/xxxx/domains/xxxxxx.ru/html/modules/wnbuttonstyle/wnbuttonstyle.php
[8] Undefined variable: output

Notice в строке 72 в файле /home/clients/xxxx/domains/xxxxxx.ru/html/modules/wnbuttonstyle/wnbuttonstyle.php
[8] Undefined variable: output

можете подсказать как это исправить?

31.05.2015 - 05:11 / Ответить

Отключите режим сообщений об ошибках в файле defines.inc.php

sergio
07.07.2015 - 20:08 / Ответить

Приветы Евгений….а у меня косяк вылез и не даёт сохраниться…. Warning: set_time_limit() has been disabled for security reasons in /home/u445894797/public_html/modules/wnbuttonstyle/far.php on line 183
и можно ли модулем не дефолтный шаблон редактировать?
благодарю за ответы…

07.07.2015 - 21:38 / Ответить

Все зависит от настроек вашего хостинга. Возможно он внес эту функцию set_time_limit – ограничения времени выполнения скрипта в список запрещенных или время указано очень маленькое для выполнения скрипта. Как вариант попробуйте удалить в файле far.php строки 183 и 184. Файл лежит в корне модуля.

Михаил
15.12.2015 - 19:22 / Ответить

Подскажите пожалуйста, а как убрать этот In stock?

15.12.2015 - 21:31 / Ответить

Убирается в настройках товара. Вкладка количество и раздел настройка наличия. Никакой код править не надо.

Юрий Гирин
25.12.2015 - 03:50 / Ответить

Я поставил на 1.6.0.9 и не отображает нигде. Где его посмотреть?

25.12.2015 - 11:06 / Ответить

Я думаю, что Вам этот модуль не пригодится раз задаете такие вопросы.

Leave a Reply