Додано відображення зображення у різновидах

На сайті додано новий параметр відображення зображення для різновидів товарів. Тепер при виборі варіанту товару поруч з кожним пунктом автоматично показується відповідна мініатюра, що робить процес вибору більш наочним та зручним для користувачів.

Додано HTML-віжет: приклад блоку Mosaic з текстом та зображенням

Цей код дозволяє вставляти адаптивний блок із текстом та зображенням у будь-яку частину сайту. Якщо розмістити кілька таких блоків підряд, вони автоматично будуть розташовуватися у шаховому порядку, створюючи ефект мозаїки.

Нова функція: розділення блоку товарів на дві частини (при перегляді списку товарів).

Ми додали можливість відображати блок товарів у списку у вигляді двох колонок: зображення з одного боку, а текст і дані – з іншого. Такий формат дозволяє створювати стиль відображення «Mosaic».

Доступні параметри:

• 0 – Вимкнено
• 1 – Увімкнено
• 2 – Увімкнено + Заголовок над зображенням
• 3 – Увімкнено + Заголовок над зображенням + Іконки над зображенням
• 4 – Увімкнено + Іконки над зображенням

Для відображення товарів у шаховому порядку (Mosaic) додайте у редактор дизайну, у вкладку «CSS стилі», наступний код:

.hotengine-shop-products-mosaic-sides .hotengine-shop-product-list-block:nth-child(even) {
  flex-direction: row-reverse;
}

Ця новинка дозволить більш гнучко налаштовувати зовнішній вигляд блоків з товарами та покращити візуальну презентацію каталогу.

Нова функція: вибір типу сторінки для Schema.org

У панелі адміністратора з’явився новий параметр, який дозволяє вибрати тип сторінки для Schema.org. Параметр доступний лише для сторінок і статей.

Це допоможе пошуковим системам краще розпізнавати структуру сайту та правильно індексувати контент.

Доступні типи сторінок:

• WebPage – Загальна сторінка. Використовується для будь-якої сторінки без специфічного контенту.
• Article – Стаття. Для публікацій, новин, блог-постів.
• BlogPosting – Блог-пост. Для сторінок із публікаціями блогу.
• NewsArticle – Новинна стаття. Для новинних публікацій.
• AboutPage* – Сторінка «Про нас». Потрібно вручну заповнити поля headline, author, можливо image.
• ContactPage* – Сторінка контактів. Бажано додати headline і author.
• CollectionPage* – Сторінка колекції товарів або контенту. Потрібно вказати headline і author.
• ProfilePage* – Сторінка профілю користувача/автора. Потрібно headline і author.

Приклад використання в HTML-коді:

<div id="page_content" itemscope itemtype="https://schema.org/WebPage">...</div>

Параметр можна вказати під час створення або редагування сторінки чи статті.

Тепер у спливаючих вікнах доступний новий функціонал:

• Атрибут data-dialog-callback дозволяє викликати будь-яку користувацьку функцію одразу після відкриття вікна.
• Атрибут data-dialog-button-callback дає можливість додавати кілька кнопок і призначати для кожної окрему функцію.

Детальніше — на сторінці генерації спливаючих вікон.

Ми раді представити нову функціональність для магазинів. Тепер ви можете легко додавати додаткову суму до підсумкової вартості замовлення в кошику.

За допомогою прихованого поля «form_price_append» можна враховувати різні надбавки:

• чайові;
• додаткові послуги;
• ексклюзивні товари;
• будь-які інші важливі елементи, які потрібно додати до підсумкової ціни.

Поле можна створити двома способами:

1. Через редактор форми в налаштуваннях магазину на вкладці «Оформлення замовлення», у розділі «Додати поля до форми замовлення».
2. Програмно за допомогою скриптів, які динамічно змінюють його значення (рекомендовано).

Це спрощує процес управління додатковими сумами та гарантує правильне відображення підсумкової вартості для користувача.

Приклад скрипта для додавання суми до підсумкової вартості замовлення

В API Commerce додано повне керування категоріями, виробниками та колекціями. Тепер ви можете створювати, оновлювати та видаляти ці сутності через захищені запити.

Докладніше в інструкції: https://hotlist.biz/ua/user_guide.html#hotengine-CommerceAPI

Додано можливість відображення сусідніх категорій того ж рівня

• Опцію можна включити індивідуально для кожної категорії або в загальних налаштуваннях сайту.
• Для зміни перейдіть у розділ: Налаштування → Магазин → Категорії.
• При включенні опції елемент списку категорій буде з класом «hotengine-categories-sibling-list».

• Налаштування можна задати індивідуально для кожної категорії або в загальних налаштуваннях сайту.
• Для зміни перейдіть у розділ: Налаштування → Магазин → Категорії.
• При зміні опції відображення для головного елемента списку категорій «hotengine-categories-list» додається клас «hotengine-categories-list-style-X», де «X» відповідає обраному стилю відображення.
• Список доступних стилів відображення:
  • «Як у загальних налаштуваннях сайту»
  • «Стандартний (блоки з назвою та зображенням)»
  • «Скорочений (зображення) [якщо є товари в категорії]»
  • «Скорочений (тільки заголовок) [якщо є товари в категорії]»
  • «Скорочений (зображення)»
  • «Скорочений (тільки заголовок)»

Додана нова функція, яка дозволяє використовувати кілька варіантів одночасно та комбінувати їх в один із автоматичним перерахунком остаточної ціни.

Комбінація формується з вибраних компонентів: заголовок та артикул об’єднуються через «+», а ціна розраховується на льоту з актуальних цін обраних варіантів.
Якщо серед компонентів є фіксована ціна, вона береться за основу, до неї додаються або віднімаються дельти («+» або «-»).
Приклади:
— =100 та +20 → остаточна ціна =120.
— +10 та +15 → результат +25 до основної вартості товару.
— =200, =150, +20 → результат =220 - береться найбільша вартість варіанту.


Обмеження у відображенні та поведінці:

• При множинних групах деякі способи відображення варіантів можуть бути обмежені.
• Кожен підваріант не може мати власну кнопку «Додати в кошик».

Комбінований варіант розглядається як єдиний для кошика та при збереженні замовлення.

Ця функція дозволяє створювати більш складну та розширену ієрархію товару, об’єднуючи одночасний вибір кольору, ваги, розміру та інших параметрів. Покупець може зручно комбінувати кілька характеристик в одному варіанті, а система автоматично перераховує остаточну ціну на основі актуальних значень вибраних варіантів.

Для одного товару можна створювати до 50 різних комбінацій, що забезпечує гнучкість вибору без перевантаження інтерфейсу.

Неможливе можливе: як ми досягли майже 100% у Google PageSpeed

У сучасному веб-світі швидкість завантаження сайту — один із ключових факторів успіху. Нещодавно нам вдалося зробити справжній прорив і підняти показники Google PageSpeed до практично 100% за всіма найважливішими метриками! Це результат комплексної і ретельної оптимізації, у яку ми вклали максимум знань та досвіду.

https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fhotlist.biz%2Fru%2F

Що допомогло досягти такого результату?

1. Оптимізація завантаження скриптів і стилів
Ми впровадили відкладене завантаження JavaScript і CSS, щоб критично важливі для відображення сторінки ресурси завантажувалися першими, а всі інші — асинхронно і лише за потреби. Більшість скриптів на платформі завантажується безпосередньо під час взаємодії з користувачем. Завдяки цьому користувачі бачать контент миттєво, а браузер не блокується зайвими викликами.

2. Стиск і мінімізація даних
Всі скрипти, стилі та зображення були максимально стиснуті і оптимізовані. Використання сучасних форматів зображень WebP/SVG, а також мініфікація CSS і JavaScript значно зменшили загальний обсяг завантажуваних даних.

3. Ефективне кешування та CDN
Ми налаштували кешування на сервері та використали мережу доставки контенту (CDN), що дозволило доставляти файли ближче до користувачів і зменшувати час відповіді сервера.

4. Розумна робота із зображеннями
Для всіх картинок реалізовано адаптивне завантаження — різні розміри і формати для різних пристроїв та роздільних здатностей. Використовуються техніки lazy loading, що дозволяє не завантажувати зображення, поки користувач до них не дійде.

5. Оптимізація шрифтів
Підключення шрифтів виконано з параметром font-display: swap, що знижує час відображення тексту без затримок через завантаження шрифтів.

6. Покращення рендерингу та DOM
Ми зменшили кількість зайвих елементів, оптимізували структуру HTML, прибрали непотрібні перерисовки та повторні обчислення стилів, що дозволило пришвидшити перше відображення і зробити інтерфейс чуйним.

Усі ці заходи дозволили нам практично досягти максимальних значень у Google PageSpeed Insights — а отже, сайт завантажується швидко, плавно та зручно на будь-яких пристроях і мережах.

Неможливе стало можливим завдяки увазі до деталей і комплексному підходу до оптимізації. Це відкриває нові горизонти для покращення користувацького досвіду і підвищення конверсії.

Всі ці переваги ви отримаєте, якщо оберете платформу Hotlist.biz для створення сайтів та інтернет-магазинів.

Додано сторінки виробників за країнами

На платформі Hotlist.biz з’явилася нова сторінка зі списком країн виробників. Тепер відвідувачі ваших інтернет-магазинів зможуть швидко знаходити товари за країною їхнього виробництва.

Крім того, у картці товару назва країни виробника стала активним посиланням. Натиснувши на нього, ви потрапите на сторінку з усіма товарами з тієї ж країни, що й вибраний товар.

Це оновлення зробить пошук і вибір товарів ще зручнішим і допоможе швидше знаходити продукцію потрібного походження.

На платформу Hotlist.biz додано Price Range Swiper — слайдер вибору діапазону цін у пошуковому фільтрі. Тепер користувачі можуть зручно встановлювати мінімальну та максимальну ціну за допомогою повзунків «Від» та «До», які відображаються зверху форми пошуку. Це покращує зручність і точність підбору товарів за ціною.

Для встановлення цього коду виконайте наступні кроки:

1. Перейдіть у розділ «Сторінки» → «Віджети HTML».
2. У пункті «Price range swiper - Слайдер вибору діапазону цін у пошуковому фільтрі» скопіюйте код JavaScript.
3. Створіть блок меню та вставте в нього скопійований код.
4. Встановіть позначку «JavaScript / CSS style».
5. У появленому полі з параметрами оберіть «Javascript - async».

Для підключення стилів:

1. Скопіюйте CSS стиль зі сторінки інструкцій зі створення «Price Range Swiper».
2. Вставте його в редактор дизайну у вкладці «CSS стилі».

Код доступний за посиланням: #Price_range_swiper

Оновлення продуктивності сайту: оптимізація JavaScript та відкладене завантаження

Ми провели масштабну оптимізацію JavaScript на сайті для підвищення швидкості завантаження та покращення користувацького досвіду. Тепер більшість бібліотек завантажуються відкладено — лише тоді, коли це справді необхідно.

Всі скрипти винесені в окремі файли і підвантажуються виключно на тих сторінках, де вони використовуються, або коли користувач взаємодіє з відповідними елементами.

В результаті покращена робота наступних функцій:

• Перемотування товарів та статей
• Зміна кількості товарів при додаванні до кошика
• Взаємодія з різновидами товарів
• Додавання товарів до обраного
• Відображення та приховування заповнених значень у пошуковому фільтрі
• Мобільне меню
• Скрипт слайд-меню
• І інші...

Це оновлення значно пришвидшує завантаження сторінок і робить роботу сайту більш плавною та комфортною. Дякуємо, що обираєте нас!

Додано підтримку CSS-файлів у блоках/меню.
Тепер на Hotlist.biz ви можете створювати не лише кешовані JavaScript-файли, а й CSS-файли стилів — прямо в тексті блоків/меню.

Що це дає:

• 🔧 Можливість підключення кастомних стилів лише на потрібних сторінках;
• 📁 Стилі зберігаються в окремому кешованому файлі, а не на самій сторінці;
• ⚡ Забезпечується чисте та швидке завантаження сторінок без вбудованого CSS.

Як використовувати:
Для створення CSS-файлу вкажіть у параметрах блоку/меню — CSS.
Вставте в текст Блоку/Меню свій CSS-стиль і вкажіть сторінки, на яких його відображати.

У систему додано оновлені сигнали та події для Google Tag Manager і Google Analytics 4 (GA4).
Налаштування виконано з урахуванням вимог GA4 — для максимальної сумісності з новими звітами та автоматичного відстеження конверсій. Підтримку застарілої версії Google Analytics Universal повністю скасовано.

Додано спеціальний CSS-стиль для покращеного відображення таблиці товарів у кошику на мобільних пристроях та екранах шириною менше 450 пікселів. Стиль завантажується лише на сторінці перегляду кошика і не впливає на інші розділи сайту. Тепер оформлення кошика стало зручнішим та зрозумілішим на смартфонах і маленьких екранах.

Тепер на Hotlist.biz реалізована можливість асинхронного імпорту товарів — це означає, що ви можете завантажувати великі обсяги даних без оновлення сторінки та без тимчасового відключення сайту для вас.
🔹 Раніше: під час імпорту сайт ставав тимчасово недоступним для адміністратора, доки не завершиться весь процес. Це було незручно — особливо при великій кількості товарів.
🔹 Тепер: ви можете продовжувати роботу з сайтом, у той час як імпорт проходить у фоні. Процес імпорту більше не блокує інтерфейс, а рядки з файлу обробляються та відображаються в реальному часі прямо на екрані.
💡 Наприклад, при завантаженні 5000 товарів, що містять десятки зображень кожен, час обробки може займати десятки хвилин. Асинхронний імпорт повністю вирішує цю проблему — сайт залишається доступним, а ви бачите хід виконання.