Евгений Сивоконь. Блог

RadicalMart - исправляем некорректное отображение числа объектов в кнопках Избранное, Сравнение и Корзина 🛒 ⚙️ Типовой суповой набор хорошего Интернет-магазина, помимо стандартной корзины, включает в себя функционал избранного и сравнения с индикаторами кол-ва. При подключении такого функционала под RadicalMart, возникает необходимость в выводе кнопок в шапке. И ввиду особенностей архитектуры при изменении кол-ва, цифра в индикаторе скачет вверх. При перезагрузке страницы становится нормальной. Это баг, который бросается в глаза из-за добавления inline. Также нужно не отображать красный кружок badge в случае, если кол-во равно нулю. Вот такой js костыль решает вопрос с вертикальным позиционированием: // middle quantity centering for favorites button icon document.addEventListener('DOMContentLoaded', function() { const counters = document.querySelectorAll( '[radicalmart-favorites="module"], [radicalmart-compare="module"]' ); counters.forEach(function(counter) { const updateCounter = function() { if (counter.hasAttribute('style')) { counter.removeAttribute('style'); } const isEmpty = counter.textContent.trim() === '0' || counter.textContent.trim() === ''; counter.classList.toggle('is-empty', isEmpty); }; const observer = new MutationObserver(updateCounter); observer.observe(counter, { childList: true, subtree: true }); updateCounter(); }); }); // end of quantity middle centering а вот css правила: .radicalmart-icon .quantity:empty, .quantity.is-empty {display: none!important} .uk-button-quantity { background-color: #fff; color: #28333e; border: #e5e5e7 1px solid; } .uk-button-quantity:hover { background-color: #588157; color: #fff; border: #588157 1px solid; } Итого кол-во меняется корректно и не прыгает при изменении. #radicalmart

Аддон монетизации конкурсов и голосований 💵 NorrCompetition — детище, работу над которым мы начали еще в далеком 2012 году. Продукт прикольный и нишевый, добавляющий web2.0 элементы на сайт. 📝 Но он также ценнен тем, что имеет историю и повидал вехи развития Joomla, неспешно видоизменяясь и улучшаясь с каждым годом. 💰 Можно ли зарабатывать на конкурсах? До недавнего времени это можно было сделать через пользовательские группы и компонент подписок (полные действия на указанный период времени) и через баллы AUP (AltaUserPoints) — который заброшен автором🧾 Теперь этот вопрос решен 🔆 Мы написали систему баллов специально под NorrCompetition, а также интеграции с популярными компонентами Интернет-магазинов под Joomla. Ставьте любимый компонент, настраивайте предпочитаемый сервис оплаты и связывайте с NorrCompetition. Итого пользователь оплачивает покупку сертификата с баллами и тратит баллы на действия в рамках голосований. Аддон превращает конкурсы в дополнительный инструмент заработка. Подробнее

RadicalMart - оформление заказа. Выводим блок авторизации гостю ☎️ Итак, пользователь заходит на сайт Интернет-магазина гостем и накидывает товары в корзину. На странице оформления заказа ему приходится или делать гостевое оформление заказа и заполнять все поля или уходить на другую страницу и авторизовываться там и возвращаться обратно. Это неудобно. Я комбинирую решение - авторизация по коду и вывод текстового блока для гостя. Макет оформления заказа: templates/yootheme_mytemplate/html/com_radicalmart/checkout/default.php Вставить в начале макета: use Joomla\CMS\Factory; use Joomla\CMS\Layout\LayoutHelper; $user = Factory::getUser(); // блок для авторизации по коду $app = Factory::getApplication(); $app->getLanguage()->load('com_radicalmart', JPATH_ROOT); $app->getDocument()->getWebAssetManager() ->useScript('field.passwordview'); Вот сам вывод блока: <?php if ($user->guest) : ?> <div class="uk-margin-bottom"> <?php echo Text::_('CUSTOM_RM_USER_GUEST_TEXT'); ?> <a href="#" radicalmart-login="display_form"> <?php echo Text::_('CUSTOM_RM_USER_GUEST_ICON'); ?> </a> </div> <?php else : ?> <?php endif; ?> Языковые константы: CUSTOM_RM_USER_GUEST_TEXT="У вас уже есть аккаунт?" CUSTOM_RM_USER_GUEST_ICON="Войти на сайт" Если не нужна авторизация по коду, то всё можно упростить и уводить на страницу авторизации. Результат - более удобное UX сайта. #radicalmart

👩‍💻 Фильтр расширений Joomla: основное (ядро) и стороннее. В полном списке расширений (раздел Система -> Расширения -> Управление) был замечен фильтр расширений: "основное - сторонее". Этот фильтр позволяет быстро посмотреть какие сторонние расширения числятся в Joomla, что особенно полезно в свете участившихся в последнее время проверок на прочность Joomla-сайтов. @joomlafeed #joomla

Выпущен плагин отправки уведомлений в WhatsApp* для RadicalMart 📌 Интеграция RadicalMart с сервисом Wappi, который осуществляет прием и отправку сообщений через HTTP-запросы. Это позволяет обеспечить отправку уведомлений о новом заказе/смене статуса заказа в WhatsApp аккаунт администратора или мененджера магазина. 🎉 Плагин нативно написан под Joomla 6 и RadicalMart 3. 📎 Страница плагина Примечание: 🚨 * Мессенджер WhatsApp принадлежит организации Meta, признанной экстремистсткой в России и запрещенной на территории РФ и попадает в список ПО из недружественных стран. В дружественных России странах WhatsApp под запретом не находится. Проект RadicalMart нацелен как на российский рынок, так и на рынки соседних дружественных стран.

🚫 Запрет на использование иностранных сервисов электронной почты при регистрации на российских сайтах. Черный список доменов 🤚 Федеральный закон от 31.07.2023 № 406‑ФЗ установил запрет на использование иностранных сервисов для идентификации и аутентификации при регистрации на российских сайтах. За нарушение предусмотрены значительные штрафы. Бытует мнение, что использование иностранного email‑адреса в качестве логина при ручном вводе данных не является прямым нарушением. Однако если у нас авторизацию по одноразовому коду, который приходит на почту? Тогда иностранный email является сервисом-посредником для авторизации. 👀 Лучше не рисковать и запретить регистрацию 📛 В Joomla из коробки можно запретить указанные домены. Это не волшебная таблетка, но хотя бы можно указать самые распространенные почтовые сервисы и значительно снизить риски. Этим и воспользуемся. Я подготовил подоборку популярных сервисов, которые используются в странах со значительным присутствием граждан, использующих русский язык или просто домены крупных стран. 📬 🚨 Международные домены: gmail.com yahoo.com hotmail.com outlook.com icloud.com aol.com live.com msn.com proton.me protonmail.com mail.com zoho.com 🇩🇪 Германия: gmx.com gmx.de gmx.net web.de ⚠️ Украина: ukr.net i.ua meta.ua online.ua bigmir.net 🇵🇱 Польша: wp.pl o2.pl interia.pl onet.pl 🇨🇿 Чехия: seznam.cz centrum.cz volny.cz email.cz szn.cz 🇱🇻🇱🇹🇪🇪 Страны Балтии: inbox.lv inbox.eu apollo.lv tvnet.lv inbox.lt one.lt takas.lt mail.lt mail.ee hot.ee 🇫🇮🇸🇪🇩🇰 Скандинавия: (особенно Финляндия) FI: luukku.com kolumbus.fi elisanet.fi pp.inet.fi SE: spray.se telia.com bredband.net comhem.se NO: online.no start.no c2i.net DK: mail.dk ofir.dk post.tele.dk 🇫🇷 Франция: laposte.net free.fr wanadoo.fr 🇮🇹 Италия: libero.it virgilio.it alice.it tin.it tim.it tiscali.it fastwebnet.it poste.it 🇭🇺 Румыния: k.ro xnet.ro rdslink.ro 🇪🇸 Испания: yahoo.es telefonica.net terra.es wanadoo.es ono.com ya.com mixmail.com 🇵🇹 Португалия: sapo.pt clix.pt iol.pt netcabo.pt telepac.pt 🇳🇱🇧🇪 Нидерланды/Бельгия: NL: odido.nl kpnmail.nl meMail.nl mailbox.nl BE: telenet.be billit.eu mailfence.com proximus.be 🇷🇸 Сербия: eunet.rs beotel.net ptt.rs open.telekom.rs 🇭🇺 Венгрия: freemail.hu intermail.hu egon.hu 🇸🇰 Словакия: zoznam.sk post.sk centrum.sk 📛 Другие страны: yandex.com.tr walla.co.il mail.az mail.md posta.ge mail.bg easy.gr everyday.com.kh (Камбоджа) ⭐️ Дружественные страны: Насчет дружественных стран пока не знаю, нужно ли запрещать. Я не запрещаю: tut.by yandex.by yandex.kz mail.kz umail.uz mail.uz mail.kg mail.tj mail.am TH: chaiyomail.com poppymail.com thai.com В идеале нужен плагин, но пока можно обойтись этим списком. 🗂

Обновление плагинов оплаты ЮKassa для RadicalMart и Phoca Cart 💳 Выпущены версии плагинов, обеспечивающих совместимость с актуальным ПО и свежими версиями Интернет-магазинов для Joomla. 📌 ЮKassa для RadicalMart 2.2.0 — Обеспечение совместимости с Joomla 6 Страница плагина 📌 ЮKassa для Phoca Cart 2.0.3 — Исправление ошибки округления цены со скидкой — Обеспечение совместимости с Joomla 6 Страница плагина ЮKassa (ранее Яндекс Касса) — один из самых популярных в России сервисов для приема платежей в интернет-магазинах и онлайн-школах. Предлагается Сбером в качестве Интернет-эквайринга для сайтов. Новые клиенты могут получить премиум тариф со ставками 2,8% по методам: банковские карты, SberPay, кошелек ЮMoney, Alfa Pay и «Покупки в кредит» от СберБанка без ограничений по сроку. Ну что же, гештальт закрыт ☀️

Домен t.me заблокирован, ссылки Telegram перестали работать. Решение Делегирование домена t.me приостановлено непосредственно на уровне реестра доменной зоны .me (национальный домен Черногории). Источник В следствие чего если на вашем сайте есть ссылки на Телеграм (соц.иконка, ссылки в статьях), то они перестали работать. Что делать? Telegram формата t.me в браузерах мессенджер перешёл на telegram.me. Теперь при копировании ссылок на публикации или сообщения вместо t.me указывается telegram.me. Лично у меня это не вызывает доверия. Если старый домен по какой-то причине был разделегирован, значит сия участь может постичь и этот домен. Но есть другое решение. Использование команды для запуска Телеграм. Вот табличка: Профиль: https://t.me/имя_пользователя → tg://resolve?domain=имя_пользователя Канал, группа или бот: https://t.me/название → tg://resolve?domain=название Заметка в канале или группе: https://t.me/название/номер → tg://resolve?domain=название&post=номер Плюс в том, что будет соблюдено авторское право (ссылка на источник) и не будет внешних ссылок.

📬 Бесплатная SMTP авторизация от mail.ru всё. Решение 📝 Довольно продолжительное время сайты в рамках нашего стека, которые хостятся на сервере под управлением RISH, использовали SMTP авторизацию для рассылки системных писем с сайтов. Создаём ящик типа noreply@домен.ру и вперёд. Заявки с сайтов уходили, все работало отлично. Однако, по сути, это была милость компании Mail.ru, допускавшей такие фокусы под базовым тарифом, и мы за это не платили. Это должно было когда-то случиться и это время наступило. Mail.ru закрыли доступ к SMTP серверу и больше не работают почтовые программы. Нужно переходить на платный тариф. От 159 руб в мес. на домен. Для маленьких сайтов-визиток, коих всегда много, это становится критичным. 🙋‍♂️Что же делать? Благодаря изысканиям @radical_progreccor, найдено недорогое решение в виде SMTP сервиса. 1️⃣ Регистрируемся на сайте Selectel, заполняем анкету и привязываем номер телефона. 2️⃣ Добавляем проект. В рамках проекта доступно 3 домена. 3️⃣ Добавляем DNS записи домену согласно инструкциям сервиса. 4️⃣ Корпоративную почту от Mail.ru можно оставить! Тогда SPF запись должна быть такой: (отличается от рекомендованной от Selectel) v=spf1 include:_spf.mail.ru include:spf.mail.selcloud.ru ~all 5️⃣ Отправляем тестовое письмо и радуемся. ❗️Важно помнить! • Selectel предоставляет первые 1000 отправлений бесплатно. • Все последующие 1000 заявок по цене 40 руб. • Минимальное пополнение баланса: 200 руб. Переводите сайты на новый SMTP и следите за уведомлениями, чтобы баланс не уходил в минус.

Оформляем документацию в Yootheme. Подсветка синтаксиса кода и кнопка копирования. Часть 2 📖 2. Вставляем следующий код в custom.js: // copy code button document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('pre:not(.nocopy) > code').forEach(codeBlock => { const pre = codeBlock.parentElement; const button = document.createElement('button'); button.className = 'copy-button'; button.textContent = 'Copy'; button.addEventListener('click', function () { const textToCopy = codeBlock.textContent; const tempTextarea = document.createElement('textarea'); tempTextarea.value = textToCopy; document.body.appendChild(tempTextarea); tempTextarea.select(); document.execCommand('copy'); document.body.removeChild(tempTextarea); this.textContent = 'Copied'; setTimeout(() => { this.textContent = 'Copy'; }, 3000); }); pre.appendChild(button); }); }); // end of copy code button 4. Добавляем css правила: .copy-button { position: absolute; top: 9px; right: 8px; background-color: #007bff; color: white; border: none; padding: 5px 10px; font-size: 11px; cursor: pointer; border-radius: 3px; transition: .12s ease-in-out; border: 1px solid transparent; } .copy-button:hover { transition: .12s ease-in-out; border: 1px solid wheat; } pre { position: relative; padding-right: 60px; /* for padding under button */ } pre { font: 14px / 1.5 Consolas, monaco, monospace; color: #FFF; -moz-tab-size: 4; tab-size: 4; overflow: auto; padding: 11px; padding-right: 30px; background: #121216; border-radius: 4px; } 5. На странице выводим элемент Code и вставляем в него нужный для подстветки код. Библиотека hljs автоматически попытается распознать язык. Если визуально подсветка распознана неверно - язык можно указать в классе css элемента. Например, php или html или css. Готово. Данным решением поделился Владимир Елисеев (@radical_progreccor), за что ему большое спасибо. Посмотреть как это работет можно на rish.su.

Оформляем документацию в Yootheme. Подсветка синтаксиса кода и кнопка копирования. Часть 1 📝 Подсветкой кода в документации никого не удивишь. Однако добавление аккуратной кнопочки Copy делает интерфейс более дружественным. Вот решение: 1. Идём в Settings > Advanced > Syntax Highlighting и выбираем Monokai (dark). К слову говоря, для подсветки кода в YOOtheme Pro используется библиотека hljs.

Вышел RISH 2.6.1 Последние недели для Linux-серверов выдались очень напряжёнными: одна за другой начали появляться серьёзные уязвимости ядра Linux и nginx. Всё это снова показало, насколько важно регулярно обновлять сервер и при этом не ломать собственную конфигурацию. Именно этому посвящён RISH 2.6.1. Главное нововведение — новый механизм проверки и восстановления настроек сервера после обновлений Apache, PHP и ядра Linux. Что появилось в новой версии: • проверка и восстановление настроек RISH после обновлений; • контроль прав папок /var/www и конфигурации Apache; • проверка пользовательских PHP-FPM pool; • контроль текущего и последнего установленного ядра Linux; • возможность выбрать последнее ядро для следующей загрузки; • автоматический перезапуск PHP-FPM после аварийного завершения; • обновление PHP и Apache прямо из меню RISH; • улучшения меню PHP-FPM и диагностики сервисов; • более гибкие сценарии резервного копирования; • улучшенная установка phpMyAdmin с поддержкой offline-сценариев; • скрытие служебных HTTP-заголовков Apache и PHP. Теперь после обновления сервера RISH помогает быстро проверить конфигурацию и вернуть стандартные настройки проекта, если они были изменены пакетами системы. Подробно о новой версии: https://rish.su/blog/vypusk-rish-2-6-1-obnovlenie

Как подружить TinyMCE и атрибуты Uikit 📝 Скриншоты к статье

Как подружить TinyMCE и атрибуты Uikit 📝 Типичная ситуация: работаешь с контентом Joomla в редакторе и внезапно нужно вставить в код небольшой блок с версткой. Простая вёрстка: сетка в 3 колонки и кнопки во всю ширину. так кнопочки будут смотеться гармонично - с единой шириной и в одну строку. ⚠️Наши действия? Правильно. Переключаемся в TinyMCE в режим «Выключить редактор» и быстро верстаем grid. Но неприятный сюрприз в том, что нестандартные атрибуты редактор просто очищает, достаточно только выйти из режима кода и включить WYSIWYG режим обратно. И брюки, то есть <div uk-grid> превращаются…. превращаются в элегантные шорты <div>… И что же в такой ситуации делать? ⛔️ Создавать шорткод через Revars не всегда удобно, особенно если это разовая верстка. В условиях быстрой работы над контентом, переключаться туда-сюда очень неудобно. ⛔️ Ставить специальное расширение типа Sourcerer для вставки кода — это поставить большое расширение и следить за его обновлением, что избыточно. К тому же, это подвергнет сайт риску в плане безопасности из-за использования стороннего решения (меньше лишних расширений — спишь лучше). Расширения Regular Labs следует избегать. ⛔️ Сменить редактор на CodeMirror и поставить быструю переключалку редакторов, а в пометке к статье написать предупреждение, что внутри код? Рано или поздно, вы ошибетёсь, особенно при быстрой работе и вёрстка сломается. ⛔️ Вставлять модуль внутрь статьи с маленьким кусочком кода? Это настолько громоздкое решение, что даже говорить неудобно. ❇️ Но есть одно простое и эффективное решение 🔑 Идём в Система > Плагины > Редактор - TinyMCE Первая вкладка, ниже середины находим параметр Расширенные валидные элементы. Он пустой по-умолчанию. Дописываем div[*] ⚠️ Расширенные валидные элементы: div[*] В итоге наслаждаемся возможностью верстать небольшие кусочки кода внутри статьи без очистки атрибутов. Лесенки из кода сделать не получится, но, хотя бы, код будет правильным и работать как нужно 🎀 ☑️ Если нужно для других тегов добавить такое — делаем аналогично (напишите в комментариях, какие еще теги нужны. Дополним статью) #tinymce #uikit #yootheme

📦 RadicalForm. Как отцентрировать модальный alert на UIkit 3 даже после повторного вызова. Часть 2 Однако представьте: ваше всплывающее окошко с формой было отцентрировано по вертикали, а после закрытия сообщение об успешной отправке выводится вверху (alert). Легкий диссонанс в плане UX. Владимир Елисеев aka Progreccor написал полезный очерк под названием «Как отцентрировать модальный alert на UIkit 3». Согласно статье, добавляем правила в custom.css: .vertical-centered .uk-modal-dialog { top: 50% !important; transform: translateY(-50%) !important; margin: 0 auto !important; position: relative !important; } После отправки формы закрывается модальное окно и выводится алерт также центрируясь по вертикали. Однако так происходит первый раз. Если вы повторно попробуете вызвать модальное окно, оно уедет вниз из-за css правил. Перезагрузка страницы помогает, но пользователь об этом не знает. Вот этот js код решает проблему: // fix down positioning of .uk-modal after 2nd submission if (!window.centeredModalFixed) { UIkit.util.on(document, 'beforeshow', '.uk-modal', function(event) { event.target.classList.add('vertical-centered'); const modalDialog = event.target.querySelector('.uk-modal-dialog'); if (modalDialog) { modalDialog.style.top = ''; } }); UIkit.util.on(document, 'shown', '.uk-modal', function(event) { const dialog = event.target.querySelector('.uk-modal-dialog'); if (dialog && !event.target.classList.contains('vertical-centered')) { event.target.classList.add('vertical-centered'); } }); window.centeredModalFixed = true; } // end of fix down Теперь алерт всегда будет центироваться по вертикали даже после множественных отправок. ‼️Внимание! Следует понимать, что приведенные в данной заметке решения являются костылями, временным подспорьем. Возможно, в будущем разберем другой подход. #radicalform #joomla

📦 RadicalForm. Закрываем модальное окно с формой после отправки. Часть 1 Зачастую на сайтах мы применяем формы, отображающиеся в модальных окнах. Пользователь нажал на кнопку - появилась модалка, он заполнил форму и отправил ее. И поверх уже открытой формы отображается модальное окно об успешной отправке. Решение этой проблемы описано в документации плагина RadicalForm. Код JS1: UIkit.modal(document.querySelector("#callback")).hide(); UIkit.modal(document.querySelector("#zakazat")).hide(); или, еще лучше, вообще закрывать все модалки: const openModal = document.querySelector('.uk-modal.uk-open'); if (openModal) { UIkit.modal(openModal).hide(); } Код JS2: if (!window.isModalListenerSet) { UIkit.util.on(document, 'beforeshow', '.uk-modal', function(event) { event.target.classList.add('vertical-centered'); }); window.isModalListenerSet = true; } UIkit.modal.alert(rfMessage); форма с вертикальным центрированием и иконкой закрытия: <div id="zakazat" class="uk-flex-top rf-form uk-modal-container" uk-modal> <div class="uk-modal-dialog uk-border-rounded uk-modal-body uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> / код формы / </div> </div> а в кнопке отправки добавляем атрибут data-rf-call: <button class="rf-button-send uk-width-1-1 uk-button uk-button-primary" data-rf-call="12"> Теперь после отправки формы запускаются js2, js2 скрипты. Форма закрывается и выводится сообщение об успешной отправке.

RadicalMart и YOOtheme Pro. Увеличиваем ширину контейнера и убираем лишний отступ - часть 2 2. Второй способ убрать верхний отступ (более гибкий) Если нужен точечный подход, то можно пойти другим путем. В пунктах меню магазина пишем класс shop и добавляем правила в less: .shop .uk-container { &:extend(.uk-container-xlarge all); } .tm-main:has(#RadicalMart) { padding-top: 0; padding-bottom: 0; } это более гибкий способ. Однако нужно контролировать проект - если добавите новый пункт меню (на категорию в выпадающем меню), нужно не забыть прописать класс в настройках. 3й способ самый правильный: Расширять контейнер на уровне верстки макетов страниц. Останется только убрать отступ: .tm-main:has(#RadicalMart) { padding-top: 0; padding-bottom: 0; } Так можно создавать новые пункты меню и не переживать по поводу класса shop. #radicalmart #yootheme

RadicalMart и YOOtheme Pro. Увеличиваем ширину контейнера и убираем лишний отступ. Первая часть Как известно, билдер YOOtheme Pro не имеет общей опции выставления ширины секции для любых компонентов. Мы можем собирать страницу как угодно при наличии источника, но если у нас выводится макет, с которым не нужно работать в билдере и ширина должна отличаться от default, возникает проблема, как на скриншоте: 🚫 Область контента имеет ширину default, а нужна xlarge (на скриншоте меню «уехало» влево) 🚫 Вверху у секции большой отступ. Решение изящное и простое. Давайте уберём лишние отступы и увеличим ширину контейнера. 1-й Способ (простой) .uk-container { &:extend(.uk-container-xlarge all); } .tm-main:has(#RadicalMart) { padding-top: 0; padding-bottom: 0; } Первое правило - глобальное. Оно расширит ширину всем контейнерам на любых страницах. Если у вас в дизайне есть «зауженные» места, это правило принудительно расширит блоки.

RadicalMart. Уведомление о добавленном в коризну товаре В обнове Uikit шаблона при нажатии на кнопку «в корзину», теперь появляется уведомление снизу справа о добавленном заказе. А если нужно уведомление наверху справа? Кастомный код, меняющий позиционирование: // notification bar top right (function () { function patch() { if (!window.UIkit || typeof UIkit.notification !== 'function') return false; if (UIkit.notification.__rm_patched) return true; const original = UIkit.notification; UIkit.notification = function (options) { try { if (options && typeof options === 'object' && options.pos === 'bottom-right') { options = Object.assign({}, options, { pos: 'top-right' }); } } catch (e) {} return original.call(this, options); }; UIkit.notification.__rm_patched = true; return true; } if (!patch()) { window.addEventListener('load', function () { patch(); }); } })(); // end of notification bar #radicalmart