Нова функція у віджеті товарів — пагінація

Ми раді повідомити про додавання нової функції у віджет відображення товарів — посторінкова навігація (Pagination). Тепер ви можете керувати відображенням блоків товарів за допомогою точок, які показують поточну сторінку та дозволяють швидко переходити між сторінками.

Як це працює

• Якщо пагінація не вказана, точки вимкнені, а блок працює як раніше.
• Якщо вказано одне число або два через кому, пагінація увімкнена:
  • Перше число — кількість точок за замовчуванням;
  • Друге число — максимальна кількість точок, що додаються при підвантаженні товарів.

Приклад параметра

:scroll-768x8x64x3,3

• 768 — мінімальна ширина екрану, менше якої функція активується;
• 8 — кількість товарів, що підвантажуються за один раз;
• 64 — максимальна загальна кількість товарів (0 — без обмежень);
• 3 — кількість точок за замовчуванням у пагінації;
• 3 — максимальна кількість точок, що додаються при підвантаженні (можна залишити порожнім, якщо не потрібно).

Використання

1. Параметр можна вказати при створенні віджета з товарами.
2. Пагінація працює лише в режимі scroll.
3. Якщо вказані параметри :append або :carousel, пагінація не буде активна.
4. На мобільних пристроях функція зручно імітує Swipe і не займає зайвого місця.

Оновлено спосіб автозаміни при імпорті товарів

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

Що нового:

• Можна розділяти поля за типом для заміни.
• Підтримка кількох типів автозаміни одночасно.
• Проста інтеграція з існуючими налаштуваннями імпорту.
• Масове додавання значень (можна вставити з Excel).
• Оновлений інтерфейс для керування замінами в таблиці товарів.

Переваги:

• Зменшення часу на підготовку даних для імпорту.
• Менше помилок при масовому оновленні товарів.
• Гнучке налаштування автозаміни для різних категорій, виробників та атрибутів.

Оновлення вже доступне всім користувачам. Щоб скористатися новими можливостями, просто перейдіть у розділ імпорту товарів та налаштуйте автозаміну за новими правилами.

Розширена демонстрація «Віджету з товарами»

Ми раді повідомити, що тепер доступна розширена демонстрація роботи «Віджету з товарами»! Ви можете детально ознайомитися з можливостями віджета, подивитися різні варіанти відображення товарів та налаштувати блок під свої потреби.

Ознайомитися з демонстрацією можна за посиланням: Розширена демонстрація «Віджету з товарами»

Додано функцію Scroll у віджет товарів

Ми представляємо оновлений спосіб відображення товарів у віджетах магазину — тепер стандартний блок списку товарів можна замінити на блок з прокруткою з ефектом Swipe та автозавантаженням наступних товарів.

Як працює нова функція:

• Стандартний блок товарів замінюється на блок з прокруткою (імітація Swipe для мобільних пристроїв і зручна прокрутка мишею на десктопі).
• При досягненні передостаннього товару у списку наступні товари автоматично підвантажуються без перезавантаження сторінки.
• Функція економить місце на екрані та робить перегляд товарів більш плавним і зручним.

Налаштування блоку:

Блок товарів замінюється при вказаних параметрах, наприклад: :scroll-768x8x64, де:

• 768 — мінімальна ширина екрану, при якій активується функція;
• 8 — кількість товарів, що підвантажуються за один раз;
• 64 — максимальна кількість товарів у блоці (0 — без обмежень).

Рекомендації щодо використання:

• Увімкніть :auto_width — автоширина, щоб кількість відображуваних карток автоматично підлаштовувалася під ширину блоку.
• Увімкніть :swipe — ефект Swipe для зручної прокрутки пальцем або мишею.
• Увімкніть :scroll-768x8x64 — заміна стандартного відображення на блок з прокруткою на мобільних пристроях, щоб економити місце і прибрати кнопки навігації.
• Увімкніть :lazy-0 — прискорене завантаження зображень карток товарів для більш швидкої роботи сторінки.

Переваги для користувача:

• Економія місця на мобільних пристроях.
• Плавна прокрутка товарів з автозавантаженням.
• Можливість автоматично підлаштовувати кількість карток під ширину екрану.
• Сумісність із існуючими стилями та скриптами віджетів.

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

Додано ефект свайпу для блоків товарів та статей.

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

• Листайте товари свайпом пальцем на мобільних пристроях або мишею на десктопі.
• Плавна анімація прокрутки без “залипання” та випадкових спрацьовувань.
• Враховує кнопки корзини, обране, спіннери та посилання — свайп не заважає їх використанню.
• Під час свайпу вимикається виділення тексту та hover-ефекти для зручності користувачів.

Приклад:

templatedemo437544.hotlist.biz

Новий параметр: відображення списку дочірніх підкатегорій

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

Цей параметр можна встановити:

• 📂 У загальних налаштуваннях у вкладці «Параметри Магазин → Категорії»;
• 🛠️ Індивідуально для кожної категорії магазину.

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

Приклад: якщо вказати кількість 10, то на сторінці категорії буде показано лише 10 дочірніх підкатегорій, навіть якщо їх більше.

Використовуйте цей параметр, щоб оптимізувати відображення категорій та покращити навігацію по вашому магазину! 🌟

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

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

Додано 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 з’явилася нова сторінка зі списком країн виробників. Тепер відвідувачі ваших інтернет-магазинів зможуть швидко знаходити товари за країною їхнього виробництва.

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

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