Шаг 1. Скачайте обновленный файл с иконками
Скачайте файл иконок с демо-сайта Aspro Max и сохраните его под новым именем social_new.svg.
Такой подход позволяет не трогать стандартный файл шаблона без необходимости и держать кастомизацию отдельно.
Шаг 2. Загрузите новый файл в папку шаблона
Загрузите файл social_new.svg в ту же папку, где лежит стандартный файл иконок шаблона:
/bitrix/templates/aspro_max/images/svg/
Новый файл должен находиться рядом со старым. Это упростит поддержку и позволит не смешивать типовые файлы шаблона с вашими изменениями.
Шаг 3. Добавьте стили в Custom.css
Теперь нужно переопределить отображение иконки, чтобы вместо WhatsApp визуально использовался Max. Для этого добавьте код в Custom.css.
Готовый код для Custom.css Custom.css Скопировать весь код .social-icons li.whats a, .soc-avt a i.whats { background-position: -611px -234px !important; } footer .social-icons li.whats a, .soc-avt a i.whats { background-position: -615px -612px !important; } Этот код переопределяет позицию иконки и позволяет показать вместо стандартного значка WhatsApp нужную иконку в спрайте.
Важно. Если на сайте уже есть собственные переопределения для блока соцсетей, проверьте, не перебиваются ли эти стили другими селекторами.
Шаг 4. Укажите значение в настройках Aspro
В административной части сайта откройте настройки Aspro и найдите поле, в котором указывается WhatsApp.
Административное поле
Вместо прежнего номера укажите любое служебное значение. Задача этого шага — не сохранить старую ссылку, а оставить активным сам механизм вывода кнопки в шаблоне.
Именно поэтому на этом этапе можно вписать что-то свое, а фактическую ссылку уже заменить позже через JavaScript.
Шаг 5. Подмените ссылку через Custom.js
После этого нужно заменить URL WhatsApp на ссылку Max при загрузке страницы. Для этого добавьте код в Custom.js.
Готовый код для Custom.js Custom.js Скопировать весь код $(document).ready(function() { // Находим все ссылки с href, содержащим wa.me $('a[href*="wa.me/1234"]').each(function() { $(this).attr('href', 'https://max.ru/u/f9LHodD0cOKdVQlcSJfA2BRYm1Im6pbsyJchAjslOctvoUWn3XxR2jEr1BY'); $(this).attr('title', 'Max'); }); });
Скрипт находит нужные ссылки с фрагментом wa.me/1234 и заменяет их на ссылку профиля Max. Одновременно меняется атрибут title, чтобы он соответствовал новому каналу связи.
Обратите внимание. В селекторе a[href*="wa.me/1234"] нужно указать именно тот фрагмент ссылки, который реально используется на вашем сайте. Если номер или формат URL другой, скрипт не найдет нужный элемент.
Что проверить после внедрения
- иконка корректно отображается в шапке;
- иконка корректно отображается в футере;
- по клику пользователь попадает в Max, а не в старую ссылку WhatsApp;
- атрибут title изменился на Max;
- на мобильной версии кнопка работает так же корректно;
- после очистки кеша Битрикс и браузера изменения не пропадают
Что дало?
- Заявки из мессенджей восстановлены (20-30% мобильного трафика вернулись)
- Мгновенные отклики через Макс вместо WA
- 0 рублей риска — не трогаем ядро шаблона