Модуль позволяет производить отложенную загрузку компонентов, тем самым ускоряя загрузку страницы. Демонстрация работы в видео в конце страницы!
Логика работы:
1. Вместо HTML исходного компонента выводится заглушка.
Заглушка может быть какая угодно - для каждого шаблона исходного компонента можно сделать свой шаблон заглушки. Важно, чтобы у контейнера этой заглушки, был определенный набор data-атрибутов (их можно найти в шаблоне .default).
2. Вместе с заглушкой выводится JS-код с функцией асинхронной загрузки исходного компонента.
Формирование этого JS-кода было убрано внутрь компонента, чтобы не дублировать его от шаблона к шаблону.
3. JS-функция асинхронной загрузки вызывается в соответствии с выбранным режимом работы.
Доступные режимы: сразу (NOW), после загрузки DOM (ONDOMLOAD), LazyLoad (LAZYLOAD)
4. В результате исполнения JS-функции асинхронной загрузки, HTML-заглушка заменяется на HTML-код компонента, полученный по AJAX.
5. После замены заглушки на актуальный код вызывается JS-событие:
document.dispatchEvent(new CustomEvent('asynchronizer.afterLoad', {
detail: {
component: component,
template: template,
params: response.data.PARAMS
}));
Демонстрация работы модуля:
https://rutube.ru/video/717c8c553e45e5a9c2e35d3a53d01d64/
Логика работы:
1. Вместо HTML исходного компонента выводится заглушка.
Заглушка может быть какая угодно - для каждого шаблона исходного компонента можно сделать свой шаблон заглушки. Важно, чтобы у контейнера этой заглушки, был определенный набор data-атрибутов (их можно найти в шаблоне .default).
2. Вместе с заглушкой выводится JS-код с функцией асинхронной загрузки исходного компонента.
Формирование этого JS-кода было убрано внутрь компонента, чтобы не дублировать его от шаблона к шаблону.
3. JS-функция асинхронной загрузки вызывается в соответствии с выбранным режимом работы.
Доступные режимы: сразу (NOW), после загрузки DOM (ONDOMLOAD), LazyLoad (LAZYLOAD)
4. В результате исполнения JS-функции асинхронной загрузки, HTML-заглушка заменяется на HTML-код компонента, полученный по AJAX.
5. После замены заглушки на актуальный код вызывается JS-событие:
document.dispatchEvent(new CustomEvent('asynchronizer.afterLoad', {
detail: {
component: component,
template: template,
params: response.data.PARAMS
}));
Демонстрация работы модуля:
https://rutube.ru/video/717c8c553e45e5a9c2e35d3a53d01d64/
Отзывы
Оставить отзыв
Загрузка отзывов...
Требуется стандартная установка модуля.
Для переключения компонента в режим асинхронной загрузки нужно:
Было:
$APPLICATION->IncludeComponent(
"bitrix:catalog.section",
"viewed",
[
"ADD_PROPERTIES_TO_BASKET" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"AJAX_MODE" => "N",
...
"USE_PRODUCT_QUANTITY" => "N"
],
false
);
Стало:
$APPLICATION->IncludeComponent(
"delight:asynchronizer",
".default",
[
// Async params
"ASYNCHRONIZER_COMPONENT" => "bitrix:catalog.section",
"ASYNCHRONIZER_COMPONENT_TEMPLATE" => "viewed",
"ASYNCHRONIZER_COMPONENT_MODE" => "NOW",
"ADD_PROPERTIES_TO_BASKET" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"AJAX_MODE" => "N",
...
"USE_PRODUCT_QUANTITY" => "N"
],
false
);
Пример подключения также есть в видео
Youtube: https://www.youtube.com/embed/BFGM20rNKis?si=QiNV67ZBtgOWrdsn
Rutube: https://rutube.ru/video/717c8c553e45e5a9c2e35d3a53d01d64/
Для переключения компонента в режим асинхронной загрузки нужно:
- Добавить параметры компонента:
ASYNCHRONIZER_COMPONENT - имя исходного компонента
ASYNCHRONIZER_COMPONENT_TEMPLATE - шаблон исходного компонента
ASYNCHRONIZER_COMPONENT_MODE - режим загрузки:
- NOW - сразу [базовый режим]
- ONDOMLOAD - после загрузки дерева элементов DOM
- LAZYLOAD - загрузка начнётся при скроллинге за 1 экран до компонента - Заменить имя компонента на delight:asynchronizer
- Заменить шаблон компонента на '.default' или собственный
Было:
$APPLICATION->IncludeComponent(
"bitrix:catalog.section",
"viewed",
[
"ADD_PROPERTIES_TO_BASKET" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"AJAX_MODE" => "N",
...
"USE_PRODUCT_QUANTITY" => "N"
],
false
);
Стало:
$APPLICATION->IncludeComponent(
"delight:asynchronizer",
".default",
[
// Async params
"ASYNCHRONIZER_COMPONENT" => "bitrix:catalog.section",
"ASYNCHRONIZER_COMPONENT_TEMPLATE" => "viewed",
"ASYNCHRONIZER_COMPONENT_MODE" => "NOW",
"ADD_PROPERTIES_TO_BASKET" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"AJAX_MODE" => "N",
...
"USE_PRODUCT_QUANTITY" => "N"
],
false
);
Пример подключения также есть в видео
Youtube: https://www.youtube.com/embed/BFGM20rNKis?si=QiNV67ZBtgOWrdsn
Rutube: https://rutube.ru/video/717c8c553e45e5a9c2e35d3a53d01d64/
По вопросам техподдержки и расширения функциональности модуля обращайтесь на почту dronazzz@mail.ru
При обращении за технической поддержкой обязательно указывайте ссылку на сайт и доступы в админку и FTP!
При обращении за технической поддержкой обязательно указывайте ссылку на сайт и доступы в админку и FTP!
Код модуля
delight.async
Название компании-партнера
Адаптивность
Поддержка композита
Подходящие редакции 1С-Битрикс
Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Бизнес, Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Малый бизнес, Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Стандарт, Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Старт, Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Первый сайт (продление), Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Эксперт (продление), Программа для ЭВМ "1С-Битрикс24". Лицензия Интернет-магазин + CRM (12 мес.)
Число установок
Менее 50 раз
Последняя версия
1.0.0
Дата публикации
29.07.2024
Наличие демо-режима
Продолжительность демо-периода
Наличие
Для покупки товара в нашем интернет-магазине выберите понравившийся товар и добавьте его в корзину. Далее перейдите в Корзину и нажмите на «Оформить заказ» или «Быстрый заказ».
Если оформляете быстрый заказ: напишите ФИО, телефон и e-mail. Вам перезвонит менеджер и уточнит условия заказа. По результатам разговора вам придет подтверждение оформления товара на почту или через СМС. Теперь останется только ждать доставки и радоваться новой покупке.
Оформление заказа в стандартном режиме выглядит следующим образом. Заполняете полностью форму по последовательным этапам: адрес, способ доставки, оплаты, данные о себе. Советуем в комментарии к заказу написать информацию, которая поможет курьеру вас найти. Нажмите кнопку «Оформить заказ».
Оплачивайте покупки удобным способом. В интернет-магазине доступно 3 варианта оплаты:
- Наличные при самовывозе или доставке курьером. Специалист свяжется с вами в день доставки, чтобы уточнить время и заранее подготовить сдачу с любой купюры. Вы подписываете товаросопроводительные документы, вносите денежные средства, получаете товар и чек.
- Безналичный расчет при самовывозе или оформлении в интернет-магазине: карты МИР. Чтобы оплатить покупку на сайте, система перенаправит вас на сервер платежной системы. Здесь нужно ввести номер карты, срок действия и имя держателя.
- Электронные системы при онлайн-заказе: ЮMoney. Для совершения покупки система перенаправит вас на страницу платежного сервиса. Здесь необходимо заполнить форму по инструкции.
- Безналичная оплата на наш расчетный счет по выставленному счету.
Экономьте время на получении заказа. В интернет-магазине доступно 4 варианта доставки:
- Электронная поставка - все необходимые сведения о лицензии, праве пользования, кодах, ключах и др. высылаются покупателю на его e-mail.
- Курьерская доставка. Когда товар будет отправлен с нашего склада, Вам придет уведомление. В день доставки с Вами заблаговременно свяжется курьер для уточнения времени и деталей доставки. Доставка производится "до двери". Осмотрите упаковку на целостность и соответствие указанной комплектации.
- Постамат. Когда заказ поступит на точку, на Ваш телефон или e-mail придет уникальный код. Заказ нужно оплатить в терминале постамата. Срок хранения — 3 дня.
- Доставка Почтой России. Когда заказ придет в отделение, на Ваш адрес придет извещение о посылке. Перед оплатой Вы можете оценить состояние коробки: вес, целостность. Вскрывать коробку самостоятельно Вы можете только после оплаты заказа. Один заказ может содержать не больше 10 позиций и его стоимость не должна превышать 100 000 р.
Дополнительная информация.
Новости
