Как мы сделали стильную кнопку «Поделиться» для сайта на MODX без лишнего мусора
Часто бывает, что стандартные виджеты для соцсетей «тяжелые», выглядят чужеродно, а иногда и вовсе замедляют загрузку сайта. В новом проекте на MODX мы решили отказаться от готовых плагинов в пользу минималистичного, полностью кастомного решения в стиле Ozon.
В чем была проблема?
Клиент хотел, чтобы кнопка «Поделиться» была аккуратной, не занимала много места в дизайне карточки товара и при этом была удобной. Стандартные решения либо выглядели «из 2010-х», либо требовали подключения тяжелых внешних скриптов, которые тормозили страницы.
Что мы сделали:
- Чистый код и легкость. Мы реализовали функционал на нативном HTML, CSS и минимальном JavaScript. Никаких сторонних API, которые увеличивают время загрузки.
- Адаптивность «под ключ». На десктопе — это элегантное выпадающее меню. На мобильных — удобная «шторка», которая плавно выезжает снизу. Это гораздо удобнее для управления пальцем, чем мелкие кнопки в углу экрана.
- Функция «Копировать ссылку». Добавили кнопку копирования с мгновенным уведомлением для пользователя. Это повышает доходимость контента: если человек не хочет делиться в соцсети, он сохранит ссылку себе в заметки.
Почему это круто?
- Минимализм: Виджет выглядит как естественная часть вашего сайта.
- Скорость: Сайт работает так же быстро, как и до установки виджета.
- Удобство: Пользователь не путается в куче иконок, а получает компактный и понятный интерфейс.
Резюме
Иногда сложные задачи решаются простыми инструментами. Если вы задумываетесь об оптимизации интерфейса своего сайта на MODX, не всегда стоит искать готовый модуль в репозитории — зачастую кастомное решение работает быстрее, гибче и выглядит гораздо лучше.
А какие элементы интерфейса вы считаете перегруженными на своем сайте? Пишите в комментариях, давайте разберем, как их можно упростить!
