Почему не кликается ссылка на вызов href="tel:..."?
Есть у меня такой генератор
/** * Generate the Phone Number button * * @param $post * @param bool $btnBlock * @return string */ function genPhoneNumberBtn($post, bool $btnBlock = false): string { $post = (is_array($post)) ? Arr::toObject($post) : $post; $out = ''; if (empty($post->phone_intl) || $post->phone_hidden == 1) { return $out; } $enableWhatsAppBtn = (config('settings.single.enable_whatsapp_btn') == 1); $whatsAppPreFilledMessage = (config('settings.single.pre_filled_whatsapp_message') == 1) ? '?text=' . rawurlencode(t('whatsapp_pre_filled_message', [ 'title' => $post->title, 'appName' => config('app.name'), ])) : ''; $whatsAppLink = 'https://wa.me/' . strToDigit($post->phone) . $whatsAppPreFilledMessage; $waBtnClass = ''; $btnLink = 'tel:' . $post->phone; $btnAttr = ''; $btnClass = ' phoneBlock'; /* for the JS showPhone() function */ $btnHint = t('Click to see'); $phone = $post->phone_intl; if (config('settings.single.hide_phone_number')) { $phoneToHide = phoneNormalized($phone); if (config('settings.single.hide_phone_number') == '1') { $phone = str($phoneToHide)->mask('X', -str($phoneToHide)->length(), str($phoneToHide)->length() - 3); } if (config('settings.single.hide_phone_number') == '2') { $phone = str($phoneToHide)->mask('X', 3); } if (config('settings.single.hide_phone_number') == '3') { $phone = str($phoneToHide)->mask('X', 0); } $btnLink = ''; $btnAttrTooltip = 'data-bs-toggle="tooltip" data-bs-placement="bottom" title="' . $btnHint . '"'; $btnClassTooltip = ''; $btnAttr = $btnAttrTooltip; $btnClass = $btnClass . $btnClassTooltip; $enableWhatsAppBtn = false; } else { if (config('settings.single.convert_phone_number_to_img')) { try { $phone = LarapenTextToImageFacadesTextToImage::make($phone, config('larapen.core.textToImage')); } catch (Throwable $e) { $phone = $post->phone; } $btnClass = ''; } } if (config('settings.single.show_security_tips') == '1') { /* Set multiple data-bs-toggle for link in Bootstrap Tooltip + modal in button - Bootstrap Usage of '[rel="tooltip"]' as selector instead of '[data-bs-toggle="tooltip"]' for the tooltip, and trigger that with on hover event from JS */ $btnAttrTooltip = 'rel="tooltip" data-bs-placement="bottom" title="' . $btnHint . '"'; $btnClassTooltip = ''; $btnAttrModal = 'data-bs-toggle="modal"'; $btnLink = '#securityTips'; $btnAttr = $btnAttrModal . ' ' . $btnAttrTooltip; $btnClass = ' phoneBlock'; /* for the JS showPhone() function */ if (!config('settings.single.hide_phone_number')) { $phone = t('phone_number'); } $btnClass = $btnClass . ' ' . $btnClassTooltip; } if (!auth()->check()) { if (config('settings.single.guests_can_contact_authors') != '1') { $btnAttrModal = 'data-bs-toggle="modal"'; $phone = $btnHint; $btnLink = '#quickLogin'; $btnAttr = $btnAttrModal; $btnClass = ''; $enableWhatsAppBtn = false; } } if ($btnBlock) { $waBtnClass = $waBtnClass . ' btn-block'; $btnClass = $btnClass . ' btn-block'; } // Generate the Phone Number button $out .= '<a href="' . $btnLink . '" ' . $btnAttr . ' target="_blank" class="btn btn-warning' . $btnClass . '">'; //$out .= '<i class="fas fa-mobile-alt"></i> '; $out .= $phone; $out .= '</a>'; if ($enableWhatsAppBtn) { $waBtnAttr = 'data-bs-toggle="tooltip" data-bs-placement="bottom" title="' . t('chat_on_whatsapp') . '"'; $waBtnClass = $waBtnClass . ''; // Generate the WhatsApp button $out .= '<a href="' . $whatsAppLink . '" ' . $waBtnAttr . ' target="_blank" class="btn btn-success' . $waBtnClass . '">'; $out .= '<i class="fab fa-whatsapp"></i> '; $out .= 'WhatsApp'; $out .= '</a>'; } return $out; } |
/** * Generate the Phone Number button * * @param $post * @param bool $btnBlock * @return string */ function genPhoneNumberBtn($post, bool $btnBlock = false): string { $post = (is_array($post)) ? Arr::toObject($post) : $post; $out = ''; if (empty($post->phone_intl) || $post->phone_hidden == 1) { return $out; } $enableWhatsAppBtn = (config('settings.single.enable_whatsapp_btn') == 1); $whatsAppPreFilledMessage = (config('settings.single.pre_filled_whatsapp_message') == 1) ? '?text=' . rawurlencode(t('whatsapp_pre_filled_message', [ 'title' => $post->title, 'appName' => config('app.name'), ])) : ''; $whatsAppLink = 'https://wa.me/' . strToDigit($post->phone) . $whatsAppPreFilledMessage; $waBtnClass = ''; $btnLink = 'tel:' . $post->phone; $btnAttr = ''; $btnClass = ' phoneBlock'; /* for the JS showPhone() function */ $btnHint = t('Click to see'); $phone = $post->phone_intl; if (config('settings.single.hide_phone_number')) { $phoneToHide = phoneNormalized($phone); if (config('settings.single.hide_phone_number') == '1') { $phone = str($phoneToHide)->mask('X', -str($phoneToHide)->length(), str($phoneToHide)->length() - 3); } if (config('settings.single.hide_phone_number') == '2') { $phone = str($phoneToHide)->mask('X', 3); } if (config('settings.single.hide_phone_number') == '3') { $phone = str($phoneToHide)->mask('X', 0); } $btnLink = ''; $btnAttrTooltip = 'data-bs-toggle="tooltip" data-bs-placement="bottom" title="' . $btnHint . '"'; $btnClassTooltip = ''; $btnAttr = $btnAttrTooltip; $btnClass = $btnClass . $btnClassTooltip; $enableWhatsAppBtn = false; } else { if (config('settings.single.convert_phone_number_to_img')) { try { $phone = LarapenTextToImageFacadesTextToImage::make($phone, config('larapen.core.textToImage')); } catch (Throwable $e) { $phone = $post->phone; } $btnClass = ''; } } if (config('settings.single.show_security_tips') == '1') { /* Set multiple data-bs-toggle for link in Bootstrap Tooltip + modal in button - Bootstrap Usage of '[rel="tooltip"]' as selector instead of '[data-bs-toggle="tooltip"]' for the tooltip, and trigger that with on hover event from JS */ $btnAttrTooltip = 'rel="tooltip" data-bs-placement="bottom" title="' . $btnHint . '"'; $btnClassTooltip = ''; $btnAttrModal = 'data-bs-toggle="modal"'; $btnLink = '#securityTips'; $btnAttr = $btnAttrModal . ' ' . $btnAttrTooltip; $btnClass = ' phoneBlock'; /* for the JS showPhone() function */ if (!config('settings.single.hide_phone_number')) { $phone = t('phone_number'); } $btnClass = $btnClass . ' ' . $btnClassTooltip; } if (!auth()->check()) { if (config('settings.single.guests_can_contact_authors') != '1') { $btnAttrModal = 'data-bs-toggle="modal"'; $phone = $btnHint; $btnLink = '#quickLogin'; $btnAttr = $btnAttrModal; $btnClass = ''; $enableWhatsAppBtn = false; } } if ($btnBlock) { $waBtnClass = $waBtnClass . ' btn-block'; $btnClass = $btnClass . ' btn-block'; } // Generate the Phone Number button $out .= '<a href="' . $btnLink . '" ' . $btnAttr . ' target="_blank" class="btn btn-warning' . $btnClass . '">'; //$out .= '<i class="fas fa-mobile-alt"></i> '; $out .= $phone; $out .= '</a>'; if ($enableWhatsAppBtn) { $waBtnAttr = 'data-bs-toggle="tooltip" data-bs-placement="bottom" title="' . t('chat_on_whatsapp') . '"'; $waBtnClass = $waBtnClass . ''; // Generate the WhatsApp button $out .= '<a href="' . $whatsAppLink . '" ' . $waBtnAttr . ' target="_blank" class="btn btn-success' . $waBtnClass . '">'; $out .= '<i class="fab fa-whatsapp"></i> '; $out .= 'WhatsApp'; $out .= '</a>'; } return $out; }
Код для WhatsApp игнорится (создан новый).
На выходе вот это:
<div class="content-footer text-start"> <a href="tel:+79123456789" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" target="_blank" class="btn btn-warning phoneBlock" data-bs-original-title="Нажмите, чтобы посмотреть" aria-describedby="tooltip419892"><i class="fas fa-mobile-alt"></i> <img src="data:image/png;charset=utf-8;base64,...gg=="></a> </div> |
<div class="content-footer text-start"> <a href="tel:+79123456789" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" target="_blank" class="btn btn-warning phoneBlock" data-bs-original-title="Нажмите, чтобы посмотреть" aria-describedby="tooltip419892"><i class="fas fa-mobile-alt"></i> <img src="data:image/png;charset=utf-8;base64,...gg=="></a> </div>
Дело в том, что при нажатии на кнопку ничего не происходит. То есть вызов указанного номера. Консоль в хроме ни на что не указывает. В чем может быть дело? Может кто нибудь сталктвался?
Дополнительно:
js где-то превентит клик по ссылке...
и твой генератор тут вообще не нужен
Смотрите как это можно примерно переписать, чтобы было аккуратно:
function btn(): string { // Определяем текст ссылки/кнопки $content = 'Call me'; // Определяем список атрибутов $attr = new IlluminateViewComponentAttributeBag(); $attr['id'] = 'wa-link'; $attr['href'] = 'tel:9999'; if (/*какое-то условие*/true) { $attr['data-tooltip'] = 'somevalue'; } // Определяем набор классов $isRequireFirstClass = true; // какое условие для наличия css класса $isRequireSecondClass = false; // какое условие для наличия css класса $attr = $attr->class([ 'permanent-class', 'first-condition-class' => $isRequireFirstClass, 'second-condition-class' => $isRequireSecondClass, 'btn-block' => $btnBlock, ]); // И выводим готовую разметку return '<a '.$attr.'>'.$content.'</a>'; // Примерный вывод // <a class="permanent-class first-condition-class" id="wa-link" href="tel:9999" data-tooltip="somevalue">Call me</a> } |
function btn(): string { // Определяем текст ссылки/кнопки $content = 'Call me'; // Определяем список атрибутов $attr = new IlluminateViewComponentAttributeBag(); $attr['id'] = 'wa-link'; $attr['href'] = 'tel:9999'; if (/*какое-то условие*/true) { $attr['data-tooltip'] = 'somevalue'; } // Определяем набор классов $isRequireFirstClass = true; // какое условие для наличия css класса $isRequireSecondClass = false; // какое условие для наличия css класса $attr = $attr->class([ 'permanent-class', 'first-condition-class' => $isRequireFirstClass, 'second-condition-class' => $isRequireSecondClass, 'btn-block' => $btnBlock, ]); // И выводим готовую разметку return '<a '.$attr.'>'.$content.'</a>'; // Примерный вывод // <a class="permanent-class first-condition-class" id="wa-link" href="tel:9999" data-tooltip="somevalue">Call me</a> }
в посту фрагмент проекта на ларе
Тут из лары только auth() и config(); Можно было не указывать тег, так как код в целом php'шный и к ларе практически не завязан.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с некликабельной ссылкой href="tel:..." может возникать по нескольким причинам. Вот несколько возможных решений:
1. Проверьте правильность написания ссылки. Убедитесь, что вы используете правильный формат для ссылки на телефонный номер. Формат должен быть таким: href="tel:+1234567890". Обратите внимание на то, что номер должен начинаться с "+", за которым следует код страны и номер телефона без пробелов или тире.
2. Убедитесь, что в вашем CSS не применяются стили, которые могут перекрывать стандартные стили ссылки. Например, проверьте, что у ссылки на телефонный номер не применяется стиль "pointer-events: none;", который делает ссылку некликабельной.
3. Проверьте, что на мобильном устройстве, на котором вы тестируете ссылку, поддерживается функционал набора номера по клику. Некоторые устройства или браузеры могут не поддерживать автоматический набор номера по ссылке.
4. Если вы используете JavaScript на вашем сайте, убедитесь, что нет конфликтов с обработкой событий клика на ссылке. Проверьте, что нет каких-либо скриптов, которые могут блокировать нормальное поведение ссылки.
Применение вышеперечисленных рекомендаций может помочь вам решить проблему с некликабельной ссылкой на телефонный номер на вашем сайте. Если проблема не решена, попробуйте провести дополнительные тесты и исследования, чтобы выяснить причину некликабельности ссылки.