От себя скажу сразу, что Shop script (который не 5й, а раньше) мне не нравится, но тем не менее работать с ним приходится.
Приведу простой условный пример создания плагина – вызова специалиста на дом: при нажатии на кнопку должно появляться модальное окно, данные с которого отправятся на сервер и как-то обработаются.
Предполагается, что модальное окно будет реализовано с помощью Fancybox.
В сумме понадобится создать 2 дополнительных файла:
- 1.
function.callspec.phpв директории /kernel/includes/smarty/plugins/function.callspec.php – здесь будет происходить вызов нужного темплейта, а так же обработка пришедших с формы (которая на темплейте) данных - 2. темплейт с формой, я назвала его
callspec.htmlв директории /published/SC/html/scripts/templates/frontend/callspec.html – просто форма
Что же касается стилей и js скрипта, то здесь все зависит от вас; я, обычно, создаю кастомные css и js файлы для работы с модулями, которые подключаю в заголовке. Если вы не практикуете такой подход, то можете расположить их в любом удобном для вас месте.
Что бы плагин заработал необходимо в шаблоне желаемой страницы (в моем случае это product_info.html) вставить тег с именем функции, в данном случае callspec – вот так {callspec}. В таком случае движок зайдет в function.callspec.php и выполнит указанное там.
Итак, содержимое самого function.callspec.php:
|
1 2 3 4 5 6 7 8 9 10 |
<?php function smarty_function_callspec($params, $smarty) { if (isset($_POST['action_ajax']) && $_POST['action_ajax'] == 'call_spec') { // валидация данных с формы, какое-то преобразование $text = 'Какой-то текст'; ss_mail(CONF_ORDERS_EMAIL, 'Тема письма', $text, true); } return $smarty->fetch('callspec.html'); } |
Оно условно разбито на две части: обработку запроса, если он пришел, и отрисовку/возвращение темплейта, если запрос не пришел.
Содержимое файла callspec.html:
|
1 2 3 4 5 6 7 8 |
<div id="callSpecBlock" style="display: none;"> <h2 class="productDescriptionTitle">Вызовите нашего специалиста</h2> <label>Ваше имя</label> <input type="text" name="name" /> <label>Телефон</label> <input type="text" name="phone" /> <a class="btn" id="sendForm">Отправить вызов</a> </div> |
Как видите – это просто форма.
Думаю, код для fancybox приводить не стоит – приведу необходимое – отправку данных из шаблона выше на сервер для обработки в function.callspec.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$('#sendForm').on('click', function(event){ event.preventDefault(); var name = $('#callSpecBlock input[name="name"]').val(), phone = $('#callSpecBlock input[name="phone"]').val(); // валидация данных, какие-то преобразования $.post(document.location.href, { action_ajax: 'call_spec', name: name, phone: phone }, function(){ $.fancybox.close(true) // что-то еще }); }); |
Теперь картина работы становится ясна полностью:
при отрисовки шаблона, где расположен тег с именем функции (в моем случае product_info.html) {callspec} движок ищет файл function.callspec.php, попадая в него происходит проверка – пришел ли к нам POST или нет, если не пришел – отрисовываем и возвращаем темплейт callspec.html. Когда же мы отправляем ajax запрос на тот же урл, то движок выполняет все те же действия, что и впредыдущем варианте, но здесь он уже проходит проверку с переданным параметром поста и происходит часть с обработкой.
Пример достаточно условный, однако, таким простым способ можно решить большое количество мелких задач.