Асинхронизатор: асинхронная загрузка компонентов
15000
Модуль позволяет производить отложенную загрузку компонентов, тем самым ускоряя загрузку страницы. Демонстрация работы в видео в конце страницы!
Логика работы:
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/
Цена действительна только для интернет-магазина и может отличаться от цен в розничных магазинах
Асинхронизатор: асинхронная загрузка компонентов
15000
#PROP_TITLE#
—
#PROP_VALUE#
Требуется стандартная установка модуля.
Для переключения компонента в режим асинхронной загрузки нужно:
Было:
$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/
По вопросам техподдержки и расширения функциональности модуля обращайтесь на почту info@conversite.ru
При обращении за технической поддержкой обязательно указывайте ссылку на сайт и доступы в админку и FTP!
Для переключения компонента в режим асинхронной загрузки нужно:
- Добавить параметры компонента:
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/
По вопросам техподдержки и расширения функциональности модуля обращайтесь на почту info@conversite.ru
При обращении за технической поддержкой обязательно указывайте ссылку на сайт и доступы в админку и FTP!
Закажите любой модуль у нас на сайте с бесплатной установкой и гарантией 14 дней
Мы работаем с физическими и юридическими лицами. И предоставляем сразу два варианта оплаты.
- Наличные. Вы подписываете товаросопроводительные документы, расплачиваетесь денежными средствами, получаете товар и чек.
- Безналичный расчет. Принимаем карты Visa и MasterCard. Доступен при курьерской доставке.
Ваш заказ можем доставить собственными ресурсами, при условии вашего нахождения в городе. Либо через 4 варианта доставки:
- Курьерская доставка. Курьерская доставка работает с 9:00 до 19:00. Когда товар поступит на склад, курьерская служба свяжется для уточнения деталей. Специалист предложит выбрать удобное время доставки и уточнит адрес.
- Самовывоз из магазина. Для получения заказа обратитесь к сотруднику в кассовой зоне и назовите номер.
- Сотрудничаем с постаматами. Срок хранения — 3 дня.
- Предоставляем почтовую доставку через почту России. Когда заказ придет в отделение, на ваш адрес придет извещение о посылке. Вскрывать коробку самостоятельно вы можете только после оплаты заказа.
Дополнительная вкладка для размещения информации о товарах, доставке или любого другого важного контента. Поможет вам ответить на интересующие покупателя вопросы и развеять его сомнения в покупке. Используйте её по своему усмотрению.
Вы можете убрать её или вернуть обратно, изменив одну галочку в настройках компонента. Очень удобно.
- Комментарии
- ВКонтакте
Загрузка комментариев...
