Функция "Обратный звонок насчёт этого товара"

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

Кому интересно рассмотреть, как устроена серверная часть модуля, напомним, его обработчик расположен в файле objects/callme/CallMe.php и по сути является расширением модуля Feedback (обратная связь).

Первым делом добавим в карточку товара кнопку обратного звонка. Поскольку в шаблоне (дизайне) сайта верстальщик в общем случае может оперировать теми именами переменных, какие ему удобны, то мы для простоты представим, будто в карточке товара верстальщик использовал переменную $product - объект записи о текущем товаре.

«a class="btn callme" data-model="{$product-»model|escape}"»
    Обратный звонок
«/a»

Данный код вставьте в желаемое место того tpl-файла шаблона, где собираетесь выводить кнопку (только удостоверьтесь в совпадении имени переменной). Смысл кода в том, что через атрибут data-model кнопки будем передавать во всплывающую форму параметр model (название товара).

Обработчик кнопки

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

Начнём с яваскрипта. Он будет извлекать из нажатой кнопки сведения о названии товара, передавать его в соответствующее поле формы, затем проявит форму на экране.

«script»
    jQuery(document).ready(function() {
        jQuery('.btn.callme').click(function () {
            var popup = jQuery('#callme-popup');
            if (popup.length » 0) {

                /* сообщаем в форму название товара */
                var text = jQuery(this).attr('data-model');
                text = 'Прошу позвонить насчёт "' + text + '".';
                jQuery(popup).find('input[name="callme_reason"]').val(text);

                /* всплывание окна */
                jQuery(popup).find('.warning, .success').hide();
                jQuery(popup).show();
            }
        });
    });
«/script»

И стили для этого вслывающего окна.

#callme-popup {
    background: #222;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 65535;
    vertical-align: middle;
}

#callme-popup > * {
    display: block;
    margin: 100px auto;
}

Этот код можно расположить прямо в шаблоне, в конце файла index.tpl например. Однако с точки зрения соблюдения стандартов, скрипты и стили лучше вынести в соответствующие файлы, подключаемые в заголовочной секции страницы.

Подготовка всплывающего окна

Теперь нужно разместить на странице само вслывающее окно. Предлагаем поместить его в конце файла index.tpl, прямо перед закрывающим тегом body.

«div id="callme-popup"»
    {include 'callme.tpl' inline=TRUE}
«/div»

Как видно по коду, тело формы ввода берётся из файла callme.tpl шаблона. Вообще говоря, разметку формы мы могли бы повторить здесь без подключения tpl-файла. Это дело вкуса: одному нравится везде видеть разметку в чистом виде, и он готов вручную синхронизировать расплодившиеся дубликаты по разным файлам шаблона, если начальная форма со временем изменяется. Другой предпочитает иметь единственный экземпляр плюс дополнительные точки подключения экземпляра (а к ним некий уточняющий параметр типа inline=TRUE, чтобы подключаемая сторона понимала, в каком виде её вызывают), и он готов мириться с дроблением шаблона на части.

Форма ввода и её обработчик

Теперь осталось разметить тело формы в файле callme.tpl - он является визуальным представлением работы модуля Callme.

«h1»Обратный звонок«/h1»
{if !empty($callme_accepted)}
    «div class="success"»Ваш запрос обратного звонка принят.«/div»

{elseif !empty($callme_error)}
    «div class="warning"»{$callme_error}«/div»
{/if}
«form method="post"»
    «label»
        Телефон:
        «input name="callme_phone" type="text" value="{inputValue from=callme_phone}" required»
    «/label»

    {if empty($settings-»callme_captcha_disabled)}
        «label»
            Защитный код:
            «input name="captcha" type="text" value="" required»
            «img src="{site}captcha.jpg?unique={randomId}"»
        «/label»
    {/if}

    «input name="callme_reason" type="hidden" value=""»
    «input name="callme_copystop" type="hidden" value="{inputValue from=callme_copystop}"»
    «input type="submit" value="Отправить"»
«/form»
{if !empty($inline)}
    «a class="btn close" onclick="jQuery('#callme-popup').hide()"»закрыть«/a»

    «script»
        jQuery(document).ready(function() {
            var form = jQuery('#callme-popup form');
            jQuery(form).attr('action', '{site}callme');
            jQuery(form).submit(function () {
                /* здесь отправка формы аяксом с возвратом результата в #callme-popup */
                return false;
            });
        });
    «/script»
{/if}

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

Письмо администратору

В случае успешного принятия запроса, модуль обратной связи отправляет администратору емейл, текст которого можно определить с помощью файла design/ваш_шаблон/html/email/callme-to-admin.htm в шаблоне. Вот простой пример такого файла.

{if !empty($post)}
    «p»Пользователь просит перезвонить на {$post-»phone}«/p»
    «p»Причина: {$post-»reason|nl2br}«/p»
{/if}

Если бы нам потребовалось, чтобы администратору отправлялось СМС, его текст можно определить с помощью файла design/ваш_шаблон/html/sms/callme-to-admin.htm в шаблоне. Вот пример.

{if !empty($post)}
    Пользователь просит перезвонить на {$post-»phone|truncate:32:'...':true}
    Причина: {$post-»reason|truncate:128:'...':true}
{/if}

Обратите внимание, что в последнем примере мы использовали модификатор truncate (обрезать строку), чтобы СМС не получилось слишком длинным и соответственно дорогим. Примерная стоимость большого СМС для сообщений на русском равна Цена * РазмерТекста / 70.