Документация к плагину "Отложенная загрузка контента"

Настройки плагина (точь-в-точь как в админке)

Настройки плагина представлены исключительно для демонстрации. Протестировать работу плагина можно только после покупки. Предупреждаем, что отображение настроек плагина плохо адаптировано под мобильные устройства (также как и на странице настроек плагина в админке).

upd. 19.04.2022. Некоторые используемые скрипты из настроек плагина не адаптированы для их корректной демонстрации в документации (размер иконок, сворачивание кратких описаний каждой настройки, маски для некоторых полей, итп). Скоро эта проблема будет решена. Извините за неудобства. В настройках плагина все отображается корректно!

Также представленные в документации настройки некоторых плагинов могут быть неактуальными.

  • (1) откл
  • (2) откл
  • (3) откл
  • (4) откл
  • (5) откл
  • (6) откл
  • (7) откл
  • (8) откл
  • (9) откл
  • (10) откл
  • (11) откл
  • (12) откл
  • (13) откл
  • (14) откл
  • (15) откл
  • (16) откл
  • (17) откл
  • (18) откл
  • (19) откл
  • (20) откл

(1) откл


{if $wa->shop}{shopDelayPlugin::getDelayContent(1)}{/if} - хелпер без передачи доп. параметров

{if $wa->shop}{shopDelayPlugin::getDelayContent(1,["param_name"=>"product","param"=>$product])}{/if} - Хелпер с передачей параметра $product

Разместите хелпер в нужном месте темы дизайна Хелпер работает на всех страницах приложений "Магазин" и "Блог", но по техническим причинам не работает на страницах приложений "Сайт" и "Фото". Со страницами других платных приложений ("Отзывы", "Хаб", "Документация", итп) плагин не тестировался и его корректная работа не гарантируется.









Сгенерировать документацию
Инструкция по настройке отложенной загрузки фрагмента темы дизайна (на примере формы регистрации)
  1. Установите плагин.
  2. Зайдите в шаблоны темы дизайна приложения Магазин (Магазин --> Витрина --> Шаблоны) и найдите файл, в котором содержится контент, который вы хотите загружать отложенно. Код формы регистрации обычно содержится в файле signup.html. Если данного файла вы не видите, попробуйте найти его в шаблонах темы дизайна приложения Сайт (Сайт --> Дизайн --> Шаблоны).
  3. В файле найдите тот контент, который вы хотите загружать отложенно, и закомментируйте его вывод - например: оберните его конструкцией {if false} ... {/if}: {if false} - перед нужным фрагментом кода, {/if} - после нужного фрагмента кода. Сразу после того как вы закомментировали код откройте страницу сайта и убедитесь, что нужный фрагмент кода больше не выводится. В разных темах дизайна код, который выводит форму регистрации в шаблоне signup.html, - отличается. Попытайтесь самостоятельно определить где он начинается и где заканчивается и какую часть страницы нужно закомментировать. Ниже представлен пример изменений на теме дизайна Default.

    Проверяем страницу регистрации на сайте (https://site.ru/signup/) до изменений (в режиме инкогнито, разумеется, будучи незалогиненным на сайте, - иначе вас просто переадресует вас на главную страницу сайта): Вносим изменения в код: Проверяем страницу регистрации после изменений: Отлично! Нужный фрагмент кода (код, который выводит конкретно форму регистрации) закомментирован - форма регистрации на странице больше не выводится.
  4. Скопируйте тот фрагмент шаблона, который вы только что закомментировали.
  5. Создайте новый блок сайта (Сайт --> Блоки --> Новый блок) и присвойте ему любой интуитивно понятный ID. Для формы регистрации можно создать блок сайта с ID delay__signup. Но вы можете присвоить любой ID блоку сайта - это не принципиально.
  6. Вставьте в блок сайта фрагмент шаблона, который ранее скопировали.
  7. Скопируйте ID блока сайта. В нашем случае это: delay__signup.
  8. Зайдите в настройки плагина Отложенная загрузка контента (Магазин --> Плагины --> Отложенная загрузка контента).
  9. Выберите блок, в котором будете загружать форму регистрации, и переименуйте его - для наглядности (название фигурирует только в настройках плагина). Например, выберите первый блок из списка и назовите его: (1) Форма регистрации.
  10. В настройке ID блока сайта, который необходимо загружать отложенно укажите ID блока сайта, который вы ранее скопировали. В нашем случае это: delay__signup.
  11. В настройке Код хелпера скопируйте нужный хелпер. Поскольку форма регистрации не требует никаких массивов с данными, нам потребуется следующий скопировать хелпер: {if $wa->shop}{shopDelayPlugin::getDelayContent(1)}{/if}
  12. Вставьте скопированный хелпер в нужном месте темы дизайна - сразу после конструкции {/if}, которую вы ранее разместили, закомментировав часть кода шаблона. Размещаем хелпер:
  13. Проверьте выводится ли теперь контент на странице. Имейте в виду, что если в загруженном отложенно контенте имеется форма для отправки данных - может возникнуть ситуация, что на форме появятся ошибки "Заполните это поле". Выглядит примерно так: Это нормально. "Ошибки" можно убрать добавлением дополнительного скрипта в блоке сайта, подключаемого отложенно. Пример скрипта для скрытия ошибки на форме регистрации - смотрите ниже. Для других форм скрипт, возможно, потребуется видоизменить, но для этого потребуются навыки работы с JS (если не справитесь самостоятельно - обратитесь к специалисту: любой верстальщик разберется за пару минут).

    Итак, в конце блока сайта, подключаемого отложенно, размещаем дополнительный скрипт. Скрипт для скрытия ошибок на форме регистрации: {* form fix *} <script> $( document ).ready(function() { $(".wa-error").each(function() { $(this).removeClass("wa-error"); }); $(".wa-error-msg").each(function() { $(this).remove(); }); }); </script> Блок сайта теперь выглядит примерно так: Разместили дополнительный скрипт, сохранили, проверяем: Готово! Форма регистрации теперь отображается корректно. На странице она отображается отложенно, согласно настройкам плагина. Теперь форма регистрации выводится с помощью JS и большинство ботов не смогут ее заполнить (в исходном коде страницы нет даже намека на наличие данной формы). В принципе, по желанию, можно даже отключить капчу, чтобы она не мешалась пользователям (Сайт --> Личный кабинет --> Форма регистрации --> Настройки --> Капча).
Инструкция по настройке отложенной загрузки хелпера плагина на странице товара (на примере плагина "Информация о доставке и оплате")
Если в ходе чтения данной инструкции некоторые действия покажутся вам непонятными - попробуйте ознакомиться с "Инструкцией по настройке отложенной загрузки фрагмента темы дизайна (на примере формы регистрации)": там инструкция более подробная и со скриншотами.
  1. Установите плагин.
  2. Зайдите в настройки плагина, добавляемый контент которого вы хотите загружать отложенно.
  3. Если в настройках этого плагина имеется несколько возможных вариантов вывода контент (через "хук" или через "хелпер") - то обязательно настройте, чтобы контент выводился именно через хелпер. Скопируйте нужный хелпер (он должен быть в настройках плагина или в документации к плагину или в описании к плагину в маркете WA; если не найдете - обратитесь за помощью к разработчику плагина с вопросом: "Как выводить *вот ЭТО* через хелпер?"). В настройках плагина Информация о доставке и оплате во вкладке Общие в группе настроек Информация о доставке в карточке товара у настройки Использовать стандартные хуки для вывода выберите значение: Нет. И скопируйте хелпер ниже - {shopDpPluginHelper::product($product)}. Также в настройках плагина Информация о доставке и оплате во вкладке Общие у настройки Кешировать результаты расчетов выберите значение: Не кешировать. Это важно, чтобы покупатель всегда видел актуальные сроки доставки (иначе в плагине нет никакого смысла). А у настройки Подключение скриптов и стилей выберите значение: Асинхронно, инициализация через хук frontend_head. Иначе плагин будет работать некорректно при использовании отложенной загрузки.
  4. Создайте новый блок сайта (Сайт --> Блоки --> Новый блок) и присвойте ему любой интуитивно понятный ID. Для хелпера {shopDpPluginHelper::product($product)} можно создать блок сайта с ID delay__dp_product. Но вы можете присвоить любой ID блоку сайта - это не принципиально.
  5. Вставьте в блок сайта хелпер плагина, который ранее скопировали.
  6. Скопируйте ID блока сайта. В нашем случае это: delay__dp_product.
  7. Зайдите в настройки плагина Отложенная загрузка контента (Магазин --> Плагины --> Отложенная загрузка контента).
  8. Выберите блок, в котором будете загружать хелпер плагина, и переименуйте его - для наглядности (название фигурирует только в настройках плагина). Например, выберите второй блок из списка и назовите его: (2) Информация о доставке и оплате - хелпер на странице товара.
  9. В настройке ID блока сайта, который необходимо загружать отложенно укажите ID блока сайта, который вы ранее скопировали. В нашем случае это: delay__dp_product.
  10. В настройке Код хелпера скопируйте нужный хелпер. Поскольку хелпер плагина Информация о доставке и оплате в качестве дополнительного параметра использует массив $product, нам потребуется следующий скопировать хелпер: {if $wa->shop}{shopDelayPlugin::getDelayContent(2,["param_name"=>"product","param"=>$product])}{/if}
  11. Вставьте скопированный хелпер в нужном месте темы дизайна.
    • Если вы уже ранее выводили хелпер "долгого" плагина - то просто найдите и замените его на хелпер данного плагина, который вы только что скопировали.
    • Если вы подключаете "долгий" плагин впервые (или ранее использовали вывод через хук) - то смотрите рекомендацию по подключению "долгого" плагина через хелпер в его настройках/описании и на том месте где "долгий" плагин рекомендует выводить свой хелпер - выводите хелпер данного плагина, который вы только что скопировали.
    Блок плагина Информация о доставке и оплате мы хотим вывести на странице товара. Поэтому открываем настройки редактирования темы дизайна (Магазин --> Витрина --> Шаблоны и далее либо файл product.html, либо файл product.cart.html - зависит от того в каком именно месте темы дизайна требуется вывести контент). Находим нужную строчку в коде темы дизайна и выводим хелпер. Если вы плохо ориентируетесь в коде вашей темы дизайна - обратитесь за помощью к разработчику темы дизайна или к другому специалисту за платной помощью. Также можете попытаться разобраться самостоятельно - ищите нужную информацию на этой странице: просто напишите вопрос "Как разместить хелпер в теме дизайна?" и поизучайте ответы на форуме поддержки.
  12. Откройте страницу сайта и убедитесь, что теперь блок сайта загружается отложенно, а не во время загрузки страницы.
  13. Теперь вы можете оформить блок таким образом, чтобы визуально покупателям сразу было видно, что данная часть страницы находится в процессе загрузки и задать фиксированные высоту и ширину родительского блока, чтобы после загрузки отложенного контента элементы страницы не "прыгали". Для этого изучите дополнительные настройки плагина Отложенная загрузка контента. У каждой дополнительной настройки там имеется подробное описание: можно настроить и анимацию загрузки отложенного контента; и указать для каких посетителей сайта нужного грузить выбранный контент сразу, а для каких - отложенно; и задать дополнительное время на загрузку контента; и много чего еще. Все настройки должны быть интуитивно понятными. Конкретно для блока плагина Информация о доставке и оплате выводимого в карточке товара можно задать фиксированную высоту 400, фиксированную ширину 1000, включить анимацию загрузки, а остальные настройки оставить по умолчанию.
  14. Готово! Теперь контент плагина на странице товара загружается отложенно и страницы товаров грузятся быстрее! Если вы настраивали отложенный вывод плагина "Информация о доставке и оплате" согласно данной инструкции, то страница товаров должна отображаться примерно так:
Инструкция по настройке отложенной загрузки хелпера плагина на информационной странице сайта (на примере плагина "Информация о доставке и оплате")
Если в ходе чтения данной инструкции некоторые действия покажутся вам непонятными - попробуйте ознакомиться с "Инструкцией по настройке отложенной загрузки фрагмента темы дизайна (на примере формы регистрации)": там инструкция более подробная и со скриншотами.
  1. Установите плагин.
  2. Зайдите в настройки плагина, добавляемый контент которого вы хотите загружать отложенно.
  3. Скопируйте нужный хелпер (он должен быть в настройках плагина или в документации к плагину или в описании к плагину в маркете WA; если не найдете - обратитесь за помощью к разработчику плагина с вопросом: "Как выводить *вот ЭТО* через хелпер?"). В настройках плагина Информация о доставке и оплате во вкладке Общие в группе настроек Информационная страница «Доставка и оплата» скопируйте хелпер ниже - {shopDpPluginHelper::page()}. Также в настройках плагина Информация о доставке и оплате во вкладке Общие у настройки Кешировать результаты расчетов выберите значение: Не кешировать. Это важно, чтобы покупатель всегда видел актуальные сроки доставки (иначе в плагине нет никакого смысла). А у настройки Подключение скриптов и стилей выберите значение: Асинхронно, инициализация через хук frontend_head. Иначе плагин будет работать некорректно при использовании отложенной загрузки.
  4. Создайте новый блок сайта (Сайт --> Блоки --> Новый блок) и присвойте ему любой интуитивно понятный ID. Для хелпера {shopDpPluginHelper::page()} можно создать блок сайта с ID delay__dp_infopage. Но вы можете присвоить любой ID блоку сайта - это не принципиально.
  5. Вставьте в блок сайта хелпер плагина, который ранее скопировали.
  6. Скопируйте ID блока сайта. В нашем случае это: delay__dp_infopage.
  7. Зайдите в настройки плагина Отложенная загрузка контента (Магазин --> Плагины --> Отложенная загрузка контента).
  8. Выберите блок, в котором будете загружать хелпер плагина, и переименуйте его - для наглядности (название фигурирует только в настройках плагина). Например, выберите третий блок из списка и назовите его: (3) Информация о доставке и оплате - хелпер на инфостранице.
  9. В настройке ID блока сайта, который необходимо загружать отложенно укажите ID блока сайта, который вы ранее скопировали. В нашем случае это: delay__dp_infopage.
  10. В настройке Код хелпера скопируйте нужный хелпер. Поскольку хелпер плагина Информация о доставке и оплате не использует дополнительные параметры, нам потребуется следующий скопировать хелпер: {if $wa->shop}{shopDelayPlugin::getDelayContent(3)}{/if}
  11. Вставьте скопированный хелпер в контенте нужной информационной страницы сайта
    • Если вы уже ранее выводили хелпер "долгого" плагина - то просто найдите и замените его на хелпер данного плагина, который вы только что скопировали.
    • Если вы подключаете "долгий" плагин впервые - то смотрите рекомендацию по подключению "долгого" плагина через хелпер в его настройках/описании и на том месте где "долгий" плагин рекомендует выводить свой хелпер - выводите хелпер данного плагина, который вы только что скопировали.
    Блок плагина Информация о доставке и оплате мы хотим вывести на странице "Доставка и оплата". Поэтому открываем настройки редактирования страницы (Магазин --> Витрина --> Страницы. Находим страницу, переключаемся в HTML-редактор, выбираем нужное место и выводим хелпер.
  12. Откройте страницу сайта и убедитесь, что теперь блок сайта загружается отложенно, а не во время загрузки страницы.
  13. Теперь вы можете оформить блок таким образом, чтобы визуально покупателям сразу было видно, что данная часть страницы находится в процессе загрузки и задать фиксированные высоту и ширину родительского блока, чтобы после загрузки отложенного контента элементы страницы не "прыгали". Для этого изучите дополнительные настройки плагина Отложенная загрузка контента. У каждой дополнительной настройки там имеется подробное описание: можно настроить и анимацию загрузки отложенного контента; и указать для каких посетителей сайта нужного грузить выбранный контент сразу, а для каких - отложенно; и задать дополнительное время на загрузку контента; и много чего еще. Все настройки должны быть интуитивно понятными. Конкретно для блока плагина Информация о доставке и оплате выводимого на странице товара можно задать фиксированную высоту 600, фиксированную ширину 1000, включить анимацию загрузки, а остальные настройки оставить по умолчанию.
  14. Готово! Теперь контент плагина на инфостранице загружается отложенно и инфостраница грузится быстрее!
Инструкция по настройке отложенной загрузки скрипта для подключения внешнего сервиса (на примере сервиса "Яндекс.Метрика")
Если в ходе чтения данной инструкции некоторые действия покажутся вам непонятными - попробуйте ознакомиться с "Инструкцией по настройке отложенной загрузки фрагмента темы дизайна (на примере формы регистрации)": там инструкция более подробная и со скриншотами.
  1. Установите плагин.
  2. Авторизуйтесь в сервисе, который хотите подключить на сайт, и скопируйте скрипт, который необходим для его подключения на сайте.
  3. Создайте новый блок сайта (Сайт --> Блоки --> Новый блок) и присвойте ему любой интуитивно понятный ID. Для Яндекс.Метрики можно создать блок сайта с ID delay__metrika. Но вы можете присвоить любой ID блоку сайта - это не принципиально.
  4. Вставьте в блок сайта скрипт, который вы ранее скопировали и обязательно оберните его конструкцией {literal} ... {/literal}: {literal} - перед нужным фрагментом кода, {/literal} - после нужного фрагмента кода. Должно получиться примерно так:
  5. Скопируйте ID блока сайта. В нашем случае это: delay__metrika.
  6. Зайдите в настройки плагина Отложенная загрузка контента (Магазин --> Плагины --> Отложенная загрузка контента).
  7. Выберите блок, в котором будете загружать хелпер плагина, и переименуйте его - для наглядности (название фигурирует только в настройках плагина). Например, выберите четвертый блок из списка и назовите его: (4) Яндекс Метрика.
  8. В настройке ID блока сайта, который необходимо загружать отложенно укажите ID блока сайта, который вы ранее скопировали. В нашем случае это: delay__metrika.
  9. В настройке Код хелпера скопируйте нужный хелпер. Нам потребуется следующий скопировать хелпер: {if $wa->shop}{shopDelayPlugin::getDelayContent(4)}{/if}
  10. Вставьте скопированный хелпер в нужном месте темы дизайна. Счетчик Яндекс.Метрики мы хотим вывести на всех страницах сайта. Поэтому открываем настройки редактирования темы дизайна (Сайт --> Витрина --> Шаблоны и далее файл index.html, либо тот же файл, но в разделе Магазин --> Витрина --> Шаблоны - если в приложении Сайт файл index.html вы не найдете). Находим закрывающий тег </body> и размещаем хелпер сразу над ним. Должно получиться примерно так: Если вы плохо ориентируетесь в коде вашей темы дизайна - обратитесь за помощью к разработчику темы дизайна или к другому специалисту за платной помощью. Также можете попытаться разобраться самостоятельно - ищите нужную информацию на этой странице: просто напишите вопрос "Как разместить хелпер в теме дизайна?" и поизучайте ответы на форуме поддержки. Если ранее вы уже подключали Яндекс.Метрику иным способом - не забудьте удалить подключение счетчика тем способом, который он был подключен ранее. Обычно это делается через файл index.html или через Дополнительный JavaScript-код для вставки перед закрывающим тегом </head> (Сайт --> Настройки сайта --> Пользовательский JavaScript-код внутри <head>)
  11. Готово! Теперь скрипт для подключения внешнего сервиса на каждой странице сайта загружается только после того, как страница полностью загрузится!
FAQ
Вопрос. Я не знаю какой плагин нужно загружать отложенно, а какой - нет. Я не знаю какой плагин грузит мой сайт. Можете помочь?

В рамках бесплатной ТП плагина помочь вам не сможем. Но вы можете заказать у нас диагностику скорости загрузки сайта, оценим и выполним работу под ключ в рамках отдельной услуги.

Хочу скидку на плагин! Дадите?

На все наши продукты действует скидка 50% на повторные лицензии. На покупку первой лицензии скидок нет.

Мы не любим попрошайничество. Пожалуйста, не обращайтесь к нам в поддержку с просьбой дать вам скидку. Также не ждите больших акций: мы их не устраиваем (символические промоакции по 5% и участие в распродажах, устраиваемых компанией Webasyst - исключения).

Хочу скидку на услуги! Дадите?

Нет. Если для вас приоритетным критерием по выбору подрядчика для проведения работ на сайте является низкая цена - рекомендуем вам поискать других исполнителей. Мы работаем в среднем ценовом диапазоне, делаем упор на самый качественный сервис и высокое качество оказываемых услуг.

Хочу настройку плагина бесплатно! Сделаете?

Нет. Мы не осуществляем настройку плагинов на бесплатной основе. К каждому плагину прилагается подробная документация и мы прилагаем максимум усилий для того, чтобы разобраться с каждым плагином мог даже неопатный пользователь.

Если вы не можете или не хотите самостоятельно настраивать плагин - вы можете обратиться за помощью к стороннему специалисту, либо заказать у нас платные услуги.

Хочу настройку плагина платно! Сделаете?

Зависит от текущей загрузки. Свяжитесь с нами любым удобным образом и уточните детали.

Обычно мы настраиваем плагины в рамках комплексных услуг. Например, настраиваем плагины "SEO Link Canonical" и "SEO Meta Robots" в рамках услуги Оптимизация сайта с внедрением региональных поддоменов (SEO), а плагин "Доработки оформления заказа в корзине" в рамках услуги Продвинутая настройка оформления заказа в корзине.

Рекомендуем ознакомиться со всеми нашими комлпексными услугами.

Техническая поддержка
  • Техническая поддержка осуществляется только через личный кабинет. Инструкция по созданию заявки здесь. Пожалуйста, не пишите на электронную почту и в мессенджеры.
  • Техническая поддержка обычно осуществляется в рабочее время: Пн-Сб 08:00-17:00 (мск).
  • Среднее время реакции на обращения: 2-3 часа
  • Максимальное время реакции на обращения: 2-3 рабочих дня