В этой статье мы рассмотрим, как можно реализовать функцию набора номера телефона при клике на его отображение на адаптивном мобильном сайте, который создан с использованием Drupal. Это может быть полезно для пользователей, которые хотят быстро позвонить по указанному номеру прямо со страницы сайта на своем мобильном устройстве.

Шаг 1: Добавление номера телефона на сайт

Первым шагом является добавление номера телефона на страницу вашего сайта. Для этого вы можете использовать модуль Contact Formatter, который позволяет добавлять номера телефонов с автоматическим созданием ссылок для их набора. При активации этого модуля появляется новый вид поля «Телефон», который можно добавить к вашей контентной форме.

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\Plugin\Field\FieldFormatter\TelephoneFormatter;
use Drupal\Core\Field\FormatterBase;
  
class MyCustomTelephoneFormatter extends TelephoneFormatter {
  /**
   * {@inheritdoc}
   */
  public function viewElements(FieldItemListInterface $items, 
      $langcode) {
    $elements = parent::viewElements($items, $langcode);
  
    foreach ($elements as $delta => $element) {
      $element['#markup'] = $this->createMarkup($element['#markup']);
      $elements[$delta] = $element;
    }
  
    return $elements;
  }
  
  /**
   * Create the markup to be displayed by setting the #markup property.
   *
   * @param string $number
   *   The phone number to display.
   *
   * @return array
   *   The markup array.
   */
  protected function createMarkup($number) {
    return [
      '#type' => 'link',
      '#title' => $number,
      '#url' => 'tel:' . preg_replace('/\D/', '', $number),
    ];
  }
}

Вы можете создать собственный модуль Drupal и добавить вышеприведенный код в файл my_module/data-src/Plugin/Field/Formatter/MyCustomTelephoneFormatter.php. Затем активируйте этот модуль на вашем сайте Drupal. Теперь вы можете добавить новое поле «Телефон» к вашим формам контента, и номера телефонов будут отображаться с автоматической ссылкой для набора при просмотре на мобильных устройствах.

Шаг 2: Добавление кода JavaScript

Следующим шагом является добавление кода JavaScript, который будет отслеживать события кликов на номера телефонов и вызывать набор номера на мобильных устройствах. Для этого вы можете использовать следующий код:

<script >
(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.callPhoneNumber = {
    attach: function (context, settings) {
      $('.field--name-field-telephone a').click(function() {
        var phoneNumber = $(this).attr('href').replace('tel:', '');
        window.location.href = 'tel:' + phoneNumber;
      });
    }
  };
})(jQuery, Drupal, drupalSettings);
</script>

Убедитесь, что класс «field—name-field-telephone» соответствует классу вашего поля телефона. Если ваше поле имеет другой класс, необходимо изменить его в коде выше. Этот код будет отслеживать события кликов на ссылках и запускать набор номера на мобильных устройствах.

Шаг 3: Тестирование и оптимизация

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

Чтобы оптимизировать эту функцию, вы можете добавить дополнительные проверки, чтобы убедиться, что номер телефона действительный перед набором. Вы также можете добавить стилевое оформление для отображения номеров телефонов, чтобы пользователи понимали, что они являются активными ссылками.

Дополнительные вопросы и ответы

1. Как добавить номер телефона на страницу Drupal?

Для добавления номера телефона на страницу Drupal вы можете использовать модуль Contact Formatter. Активируйте этот модуль и добавьте новое поле «Телефон» к вашим формам контента. Номера телефонов будут автоматически отображаться с ссылками для набора.

2. Как изменить класс поля телефона в коде JavaScript?

Если ваше поле телефона имеет другой класс, вы должны изменить его в соответствующей строке кода JavaScript. Например, если ваш класс поля телефона называется «field—name-my-phone-field», замените ‘.field—name-field-telephone’ на ‘.field—name-my-phone-field’.

3. Как добавить стилевое оформление для номеров телефонов в Drupal?

Вы можете добавить стилевое оформление для номеров телефонов в Drupal, используя каскадные таблицы стилей (CSS). Добавьте соответствующие стили для класса поля телефона, чтобы они отображались как активные ссылки на вашем мобильном сайте.