Opencart - Скрипт Обратного Звонка Для Сайта

Тема в разделе "Модули и дополнения", создана пользователем admin, 21 окт 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.321
    Симпатии:
    76.439
    Репутация:
    170
    Это бесплатный скрипт обратного звонка (контактная форма, которая вызывается при клике на кнопку и достаточно легко подключается к любому сайту).

    Идея создания это скрипта пришла после того, как появилось сотни разных вопросов в комментариях к статьям о формах обратной связи, ведь многим не хочется разбираться с версткой, программированием и подобными вещами, а нужен готовый инструмент которой работает и решает поставленные задачи.
    Кроме того, захотелось углубится в изучение javascript. А на реальном проекте это делать гораздо интереснее. По мере изучения, скрипт будет постоянно улучшаться и совершенствоваться. Если есть пожелания, критика и рекомендации, буду рад услышать ваше мнение в комментариях.

    Что представляет из себя ?
    На данный момент - это кнопка, в левом нижнем углу экрана, при нажатии на которую появляется 2 дополнительные кнопки с иконками телефона и конверта. При клике на одну из них, в модальном окне появляется соответствующая форма (форма для заказа обратного звонка, и форма для отправки сообщения или заявки). Выглядит это следующим образом:
    2016-10-21_114004.png
    2016-10-21_114015.png
    2016-10-21_114058.png
    Как подключить к своему сайту?
    Чтобы подключить к своему сайту, достаточно скачать и распаковать архив в корень вашего сайта. В результате у вас появится папка script.

    После этого, между тегами head необходимо подключить таблицу стилей:

    Код:
    <!-- Таблица стилей -->
    <link href="script/css/style.css" type="text/css" rel="stylesheet">
    А ниже и сам скрипт.

    Код:
    <script src="scritp/script.js"></script>
    Но скрипты, обычно, стараются подключать в конце сайта, поэтому я рекомендую подключать его перед закрывающимся тегом /body.

    Теперь, нужно указать адрес почты, на который будет приходить письмо. Делается это в файле mail.php, который находится по пути scritp/php/mail.php. Ищем строки:

    Код:
    $to = "admin@lowenet.biz"; /*Укажите адрес, на который должно приходить письмо*/
    $sendfrom = "admin@lowenet.biz"; /*Укажите адрес, с которого будет приходить письмо */
    И меняем адреса, на свои.

    Не забывайте, что скрипт обратного звонка, использует jQuery, а значит перед подключением файла script.js необходимо подключить сам jQuery. Но так как на большинстве сайтах он и так используется, то проблем возникнуть не должно.

    Не стоит подключать несколько раз jQuery к сайту. Это может вызвать ошибки и повредить работу некоторых плагинов. JQurey подключается 1 раз и располагается до вызова остальных скриптов, которые его используют.

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

    Каким функционалом будет обладать скрипт?
    На данный момент, не все реализовано, что задумано. Список довольно длинный и будет расширятся, с учетом ваших пожеланий и замечаний.
    • Подключение до 3 кнопок.
    • Выбор, между использованием иконического шрифта FontAwesome или svg, png, jpg иконками.
    • Редактирование placeholder у полей.
    • Редактирование заголовков форм.
    • Редактирование иконок форм и кнопок, вызывающих форму.
    • Возможность вызова формы своей ссылкой, расположенной в любом месте на сайте.
    • 3 положения основной кнопки.
    • Настройка внешнего вида (несколько тем оформления).
    • Возможность сделать поля обязательными для заполнения.
    • Возможность подключения reCaptcha.
    • Передача utm меток.
    • Передача в сообщении города пользователя.
    • Настройка цели для Метрики.
    • Передача файла.
    • Отправка письма на несколько адресов.
    • Автоматическая отправка письма пользователю.
    • Редактирование сообщения текста об успешной отправке.
    • Автоматическое всплывание формы, через время.
    • Возможность подключения своих форм.
    • Связь с CRM Битрикс 24.
    • Подключение простой корзины для сайта.
    Это не полный список будущих возможностей скрипта. Что-то сделать проще, а для реализации каких-то моментов, придется кардинально переработать логику. Но это все будет происходить с усовершенствованием самого скрипта. Еще раз повторюсь, что список будет расширятся с учетом ваших пожеланий и замечаний, который всегда будет содержать подробный комментарий для редактирования.

    Какие настройки доступны и как ими пользоваться?
    Все настройки расположены в файле. В самом начале:

    Код:
    / Опции
    
    // Подключен ли к сайту fontawesome - иконический шрифт. Если нет, то будут выводиться обычные картинки.
    // true - подключен, false - не подключен
    var fontAwesome = false;
    // Путь к картинкам, если не подключен к сайту fontawesome
    if (!fontAwesome){
    var callFormIcon = '<img src="smartlid/img/phone.svg" height="16">';
    var requestFormIcon = '<img src="smartlid/img/envelope.svg" height="16">';
    var basketFormIcon = '<img src="smartlid/img/phone.svg" height="16">';
    }
    // Подключение формы обратного звонка
    // true - выводить формы, false - не выводить
    var callForm = true;
    // Подключение формы с возможностью отправить сообщение
    // true - выводить формы, false - не выводить
    var requestForm = true;
    // Подключение корзины к landing page (пока не реализовано)
    // true - выводить формы, false - не выводить
    var basketForm = false;
    // Внешний вид форм (стилевое оформление) -- 'dark-space' -- 'orange-morning' -- 'blue-night'
    var styleForm = 'dark-space';
    // Заголовок формы для заказа обратного звонка
    var callFormTitle = "Закажите обратный звонок, и наш консультант свяжется с вами";
    // Путь к иконке формы для заказа обратного звонка
    var callFormImg = '<img src="smartlid/img/call.svg">';
    // Заголовок формы для отправки заявки (сообщения)
    var requestFormTitle = "Оставьте заявку, и наш консультант свяжется с вами";
    // Путь к иконке формы для отправки заявки (сообщения)
    var requestFormImg = '<img src="smartlid/img/mail.svg">';
    // Заголовок формы с корзиной покупок (не реализовано)
    //var basketFormTitle = "Корзина";
    // placeholder для ввода имени
    var placeHolderName = "Введите ваше имя";
    // placeholder для ввода телефона
    var placeHolderTel = "Введите ваш телефон";
    // placeholder для ввода почты
    var placeHolderMail = "Введите ваш email";
    // placeholder для ввода сообщения
    var placeHolderText = "Введите сообщение";
    // Конец настроек
    Это основные настройки, позже их количество будет расширятся, по мере развития скрипта. Может быть упакую их в отдельный файл. Над этим еще нужно подумать.
     

    Вложения:

    • scritp.zip
      Размер файла:
      11,1 КБ
      Просмотров:
      82
    Lily, Pafik, shakeman и 49 другим нравится это.
  2. Offline

    alex124 Пользователь

    Сообщения:
    9
    Симпатии:
    2
    Репутация:
    0
    Спасибо!
     
    khyzhniak нравится это.
  3. Offline

    skolse88 Пользователь

    Сообщения:
    13
    Симпатии:
    14
    Репутация:
    0
    süper .
     
    khyzhniak и alex124 нравится это.
  4. Offline

    denisa1988 Пользователь

    Сообщения:
    13
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  5. Offline

    denisa1988 Пользователь

    Сообщения:
    13
    Симпатии:
    0
    Репутация:
    0
    Не получается установить,ничего не происходит
     
  6. Offline

    max88888 Пользователь

    Сообщения:
    44
    Симпатии:
    8
    Репутация:
    0
    Спасибо
     
  7. Offline

    Manu Пользователь

    Сообщения:
    1
    Симпатии:
    2
    Репутация:
    0
    СПАСИБО
     
    xss1o1 и Masik нравится это.
  8. Offline

    khyzhniak Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    спасибо
     
  9. Offline

    Elsvet Пользователь

    Сообщения:
    62
    Симпатии:
    47
    Репутация:
    7
    Спасибо
     
  10. Offline

    Дмитрий1985 Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  11. Offline

    vetala81 Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    Спасибо попробую )
    попробовал подключить не получилось и в корень пробовал и в javascript пути прописывал правильно и в хедер и в футер не хочет работать ))
    В ocmod никак не впихнуть ?
     
    Последнее редактирование: 4 апр 2017
  12. Offline

    Davidmx Пользователь

    Сообщения:
    3
    Симпатии:
    0
    Репутация:
    0
    Спасибо большое! Отличное решение. Единственное, подскажите как сделать так, чтобы при нажатии на кнопку "обратный звонок" не перекидывала на основную страницу сайта, если находишься в каком-либо другом разделе?
     
  13. Offline

    Максим_93 Пользователь

    Сообщения:
    13
    Симпатии:
    1
    Репутация:
    0
    Спасибо!
     
  14. Offline

    Максим_93 Пользователь

    Сообщения:
    13
    Симпатии:
    1
    Репутация:
    0
    Попробуйте поставить заглушку
    onclick="return false;"
     
  15. Offline

    Davidmx Пользователь

    Сообщения:
    3
    Симпатии:
    0
    Репутация:
    0
    Максим, спасибо за ответ! А где именно нужно установить заглушку:
    файл smartlid.js
    a.attr('href', '#sl-overlay-bf'); <----здесь?
    Просто я не сильно разбираюсь в js.
     
  16. Offline

    programistprogramist Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
  17. Offline

    LavrovAlex5093 Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  18. Offline

    Melixion Пользователь

    Сообщения:
    5
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  19. Offline

    Masik Пользователь

    Сообщения:
    3
    Симпатии:
    0
    Репутация:
    0
    Спасибо :)
     
  20. Offline

    asdasd Пользователь

    Сообщения:
    40
    Симпатии:
    9
    Репутация:
    0
    Спасибо