[ClickToCall] Виджет звонка
Представляю Вашему вниманию компонент, который выводит анимационную кнопку «позвонить» для пользователей мобильных устройств.
Для определения мобильных устройств используется библиотека mobile-detect.js
Особенности
Настройки компонента:
Параметры сниппета ClickToCall
&force — Принудительный вызов виджета, по умолчанию 0.
&phone — Телефон для виджета, если параметр не указан, то берется значение из системных настроек
&tpl — Чанк с виджетом, по умолчанию ClickToCall.tpl
&useCustomCss — Полностью отключает подключение CSS компонентом.
&useCustomJs — Полностью отключает подключение JS компонентом. (кроме mobile-detect.js, которая отключается в настройках).
Если вы отключили использование CSS и JS, то Вам необходимо самому написать скрипт отображения кнопки и задать свои собственные стили.
Системные настройки:
clicktocall_mobiledetect — Включить использование библиотеки mobile-detect.js. Если Вы уже используете mobile-detect на своём сайте, отключите данную опцию. По умолчанию — Да.
clicktocall_phone — Телефон для виджета по умолчанию
Сниппет должен вызываться не кэшируемым!
Примеры использования:
Для принудительного вызова сниппета используется параметр &force
Если Вам необходимо на разных страницах указывать разный телефон, используйте следующий вызов:
Компонент полностью бесплатный и распространяется под лицензией GNU GPLv3.
Компонет добавлен в MODSTORE, код выложен на GitHub.
Большое спасибо Василию Наумкину и Илье Уткину за прекрасную кодовую базу выложенную на github, отдельно спасибо Михаилу Воеводскому за великолепное обучение написанию компонетов различной сложности, а также Никите Денисову за помощь с ExtJS.
UPD:
Компонент доступен для скачивания в репозитории MODSTORE
Для определения мобильных устройств используется библиотека mobile-detect.js
Особенности
- Выводит виджет только для пользоваталей мобильных устройств (используется mobile-detect.js).
- Гибкая настройка времени отображения виджета по каждому дню.
- Можно выключить используемую библиотеку mobile-detect.js в настройках, если Вы уже её используете на сайте.
- Имеется возможность использовать собственные JS/CSS файлы.
Настройки компонента:
Параметры сниппета ClickToCall
&force — Принудительный вызов виджета, по умолчанию 0.
&phone — Телефон для виджета, если параметр не указан, то берется значение из системных настроек
&tpl — Чанк с виджетом, по умолчанию ClickToCall.tpl
&useCustomCss — Полностью отключает подключение CSS компонентом.
&useCustomJs — Полностью отключает подключение JS компонентом. (кроме mobile-detect.js, которая отключается в настройках).
Если вы отключили использование CSS и JS, то Вам необходимо самому написать скрипт отображения кнопки и задать свои собственные стили.
Системные настройки:
clicktocall_mobiledetect — Включить использование библиотеки mobile-detect.js. Если Вы уже используете mobile-detect на своём сайте, отключите данную опцию. По умолчанию — Да.
clicktocall_phone — Телефон для виджета по умолчанию
Сниппет должен вызываться не кэшируемым!
Примеры использования:
Для принудительного вызова сниппета используется параметр &force
[[!ClickToCall? &force=`1`]]Если Вам необходимо на разных страницах указывать разный телефон, используйте следующий вызов:
[[!ClickToCall? &phone=`+79991234567`]]Компонент полностью бесплатный и распространяется под лицензией GNU GPLv3.
Компонет добавлен в MODSTORE, код выложен на GitHub.
Большое спасибо Василию Наумкину и Илье Уткину за прекрасную кодовую базу выложенную на github, отдельно спасибо Михаилу Воеводскому за великолепное обучение написанию компонетов различной сложности, а также Никите Денисову за помощь с ExtJS.
UPD:
Компонент доступен для скачивания в репозитории MODSTORE
04 апреля 2016, 07:57
Комментарии: 53
Собственно смысл такой, есть чанк, в чанке тэг a с id=«ClickToCall», можете в своём JS написать следующее:
$( document ).ready(function() {
$( "#ClickToCall" ).on( "click", function() {
// yaCounterXXXXXX.reachGoal('TARGET_NAME');
});
});
или я чего-то не знаю?Похоже на то.
С гитхаба нужно скачать архив, залить на сервер (я закидываю в корневую папку), распаковать и запустить файл build.transport.php
Скрипт создает транспортный пакет и автоматически устанавливает в систему. Если установка не прошла, в менеджере запускаем функцию «Искать пакеты локально» и устанавливаем — профит.
ИМХО как то не айс видеть такое (кликабельно):
А смещать кнопку в лево не эстетично, а правый угол уже может быть занят другими онлайн консультантами или ещё чем нибудь.
Но в любом случае, можно передать сниппету параметр &useCustomJs=`1`, отключить использование mobile-detect.js в настройках, подключить новый js файл, скопировав функционал из файла clicktocall.js, оставив только:
В принципе если кому-то понадобится такой функционал из коробки, почему бы и не реализовать, реализую?!
А смещать кнопку в лево не эстетично, а правый угол уже может быть занят другими онлайн консультантами или ещё чем нибудь.
Но в любом случае, можно передать сниппету параметр &useCustomJs=`1`, отключить использование mobile-detect.js в настройках, подключить новый js файл, скопировав функционал из файла clicktocall.js, оставив только:
$(document).ready(function () {
$('#ClickToCall').css('display', 'block');
});В принципе если кому-то понадобится такой функционал из коробки, почему бы и не реализовать, реализую?!
А в целом гут)За отзыв — спасибо!
Внесу свои пожелания:
1) Было бы ОЧЕНЬ здорово, если бы, когда время не рабочее, то иконка все равно отображалась бы, но при нажатии происходил не вызов, в всплывало модальное окошко с формой для обратной связи, к примеру.
2) Можно добавить возможность, чтобы звонок был не на телефон, а в скайп, к примеру.
1) Было бы ОЧЕНЬ здорово, если бы, когда время не рабочее, то иконка все равно отображалась бы, но при нажатии происходил не вызов, в всплывало модальное окошко с формой для обратной связи, к примеру.
2) Можно добавить возможность, чтобы звонок был не на телефон, а в скайп, к примеру.
1) Было бы ОЧЕНЬ здорово, если бы, когда время не рабочее, то иконка все равно отображалась бы, но при нажатии происходил не вызов, в всплывало модальное окошко с формой для обратной связи, к примеру.Подумаю над этим, в принципе можно реализовать.
2) Можно добавить возможность, чтобы звонок был не на телефон, а в скайп, к примеру.Можно создать свой чанк (например с именем — ClickToCall.skype.tpl, со следующим содержимым:
<a href="skype:[[+phone]]?call" id="ClickToCall">
<div class="click-to-call-phone"></div>
</a>[[!ClickToCall? &phone=`skypeusername` &tpl=` ClickToCall.skype.tpl`]]Не тестировал, но должно работать.
Кстати, да, по второму пункту можно так, как вы написали. Что-то о том, что в тупую через чанк сделать не подумал. Но в любом случае не всем известно, как в ссылке кодируется такие фишки, по этому возможность лишней не была бы.
Кстати, а помимо дней недели и времени, сниппет учитывает праздники?
Кстати, а помимо дней недели и времени, сниппет учитывает праздники?
Нет, праздники не учитываются, решение довольно общее, даже если выключить отображение виджета 1ого января, оно может подойти не всем, вдруг вы торгуете шампанским или же солёными огурцами и количество звонков именно в день, больше чем в любой другой ЦЕЛЫЙ месяц.
А теперь по делу, мысль хорошая — внедрить календарь и добавить возможность для отметки дней, по которым виджет не должен будет отображаться.
Записал, постараюсь реализовать.
А теперь по делу, мысль хорошая — внедрить календарь и добавить возможность для отметки дней, по которым виджет не должен будет отображаться.
Записал, постараюсь реализовать.
Благодарю! Все понял, временные настройки работают как часы, по москве!
Дайте плз код чтобы поставить время 30 секунд, через которое посетитель увидит кнопку?
ps для будущих новичков подскажу — настройки цвета и место-положения кнопки в ищите в файле: assets/components/clicktocall/css/clicktocall.css
Дайте плз код чтобы поставить время 30 секунд, через которое посетитель увидит кнопку?
ps для будущих новичков подскажу — настройки цвета и место-положения кнопки в ищите в файле: assets/components/clicktocall/css/clicktocall.css
Опытным путем выяснил что номер телефона надо вводить в параметры сниппета. А введя телефон только в настройки системы /clicktocall результата был не тот — мобилы предлагают ввести номер самостоятельно.
Резюмирую, ошибок нет?
1.Установили пакет, вызвали снипет [[!ClickToCall]]
2. Вписали номер в параметры снипета и все ок.
ps буду ждать пожалуйста наворот — чтоб в ночное время вместо вызова по телефону, была форма обратной связи, и клиент оставил контакты
Резюмирую, ошибок нет?
1.Установили пакет, вызвали снипет [[!ClickToCall]]
2. Вписали номер в параметры снипета и все ок.
ps буду ждать пожалуйста наворот — чтоб в ночное время вместо вызова по телефону, была форма обратной связи, и клиент оставил контакты
clicktocall.css кинула в свою папку (assets/template/css/clicktocall.css), а еще изображение mobile.png тоже кинула в свою папку (assets/template/img/clicktocall/mobile.png). Соответственно путь к картинке такой:
background-image: url("../img/clicktocall/mobile.png");
почему то изображения трубки нет. Может путь не верный?
background-image: url("../img/clicktocall/mobile.png");
почему то изображения трубки нет. Может путь не верный?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| ClickToCall | 0.1.0-pl от 19.11.2017 | 240 |
| ReachGoal | 1.0.3-beta от 13.10.2023 | 454 |
25 декабря 2024, 14:29
$array = array(ids);
if(in_array($modx->resource->get('id'), $array)) {
$modx->regClientStartupHTMLBlock('<script>Ext.onReady(fu...
25 декабря 2024, 14:13
В итоге переписала сама. Не знаю можно ли вставлять сюда столько текста, так что чистый JS код, если кому надо, можно найти по ссылке
24 декабря 2024, 21:46
Это не косяк, это осознанное изменение. Я считаю, что нет смысла показывать «Форма содержит ошибки» и ещё сами ошибки. Однако само сообщение в ответе ...
23 декабря 2024, 18:04
Для версии 3 лучше конечно иметь типа minishop3.
Да для всего этого нужно свободное время конечно же.
23 декабря 2024, 16:08
Добрый день, спасибо за помощь, разобрались на сайте поддержки продукта, сразу просто не увидели там продление поддержки, с Уважением.
