1с битрикс — Ajax bitriz не работает идет бесконечная загрузка


Применение технологии AJAX в компоненте Битрикс

Говоря языком Википедии — AJAX, Ajax (?e?d??ks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.

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

Постановка задачи

В качестве примера попробуем сделать компонент, который выводит текущее время и ссылку Обновить, при клике на которую происходит обновление области компонента и появляется обновленное текущее время. Текущее время будем выводить с секундами для удобства тестирования.

Делаем простой компонент

Сначала сделаем компонент, который бы просто выводил дату. Свойства у такого компонента будут отсутствовать, а описание для компонента для простоты опустим.

Получаем такой список файлов:

component.php

templates/.default/template.php

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

AJAX-компонент

Теперь сделаем так, чтобы компонент заработал как аякс-компонент. Для этого нужно создать файл .parameters.php , дополнить шаблон ссылкой на обновление. Вы убедитесь, что все это очень просто.

.parameters.php

templates/.default/template.php

Вызывать компонент необходимо обязательно с параметром ‘AJAX_MODE’ => ‘Y’ , иначе включение AJAX-режима не произойдет.

Немного объяснений

Фактически, при установке в компоненте параметра AJAX_MODE равным Y, мы даем инструкцию Битрикс, что мы хотим, чтобы данный компонент обрабатывался как аякс-компонент.


При этом все ссылки в шаблоне компонента из формы:

преобразуются в форму:

Комментариев: 5

Получается в ajax-компоненте все ссылки преобразуются к специальному виду? Но ведь бывают просто внешние ссылки на какие-то сайты, например. Или, что еще чаще, в href может быть # а сама ссылка при нажатии показывает всплывающее окошко (js). Как с этим быть?

Внешние ссылки не преобразуются в ajax-компоненте, преобразуются только внутренние.

А по поводу второго вопросы — вы пишите сейчас о инструментарии наподобие thickbox в jquery, для этого не требуется использовать ajax-компоненты.

Спасибо за ответ.
Но по второму вопросу не согласен) Бывает нужно, например, чтобы данные сохранялись при нажатии на кнопку без перезагрузки страницы, т.е. ajax, а в других ситуациях возникают всплывающие окна и нужно чтобы это было оформлено как компонент.

> Бывает нужно, например, чтобы данные сохранялись при нажатии на кнопку без перезагрузки страницы

Это без проблем можно реализовать с помощью ajax-компонента битрикса.

> а в других ситуациях возникают всплывающие окна и нужно чтобы это было оформлено как компонент.

Вы можете оформить как компонент в принципе любой код. Причем можно не использовать ajax-технологии битрикс, и при этом работать с ajax при помощи возможностей jquery. Все зависит от конкретной задачи.

Для тех кому интересно как этот механизм работает в деталях, вот наткнулся на отличное описание — https://yunaliev.ru/file/bitrix_ajax_api.pdf — жаль, что этого нет в официальной документации.

Лично мне это помогло понять, почему форма в компоненте не становилась ajax-овой — атрибут action должен вести на текущую страницу.

Сайт на 1С-Битрикс тормозит? Найти проблему помогает Xdebug

Все началось с того, что один из сайтов, находящихся у нас на сопровождении, начал жестоко тормозить. Выделенный сервер, средненькая нагрузка — и минимум 8 секунд на каждую страницу.

Нужно срочно найти проблемное место — страдает бизнес.

сайт на 1С-Битрикс (проверка сайта проходит без проблем, настройки битрикса в панели производительности — оптимальны);


без композита, но с каким-то хитрым кастомным кешем;

торговый каталог с

10 тысячами товаров и множеством различных ценовых политик;

несколько нестандартных классов, расположенных в разных папках и вызываемых из разных мест.

Сайт программировали неизвестные нам герои, и потому проблема может быть в любом месте. Начинаем искать.

Что показывает стандартная отладка в 1C-Битриксе?

Это статистика некешированной страницы. С кешем – на 5 секунд и на 200 запросов меньше.

В подробной статистике эти 5 секунд уходят на catalog.section. Но на что именно – не понятно. Статистика даёт информацию о скорости и количестве запросов к БД, но не о php-коде, который исполняется почти 8 секунд. Если кликнуть на «время создания страницы», открывается дерево компонентов (тех, что обводятся красной рамочкой на самой странице). Всё, что не входит в компонент, скрывается за названием PHP-код. Где этот код и что делает – непонятно.

Откуда берутся ещё 3 секунды при загрузке страницы из кеша?

Откуда эти полторы тысячи некешируемых запросов?

Можно ли оптимизировать каталог, чтобы его загрузка занимала меньше времени?

Стандартные средства 1С-Битрикс не дают ответа.

Помогают инструменты xdebug и модуль bitrix.xdebug. Первое – расширение для php, второе – модуль для Битрикса, работает на основе xdebug.

Кроме отладчика в xdebug есть профилировщик, который собирает информацию о времени выполнения php-функций и записывает эту информацию в трейс (специальный файл). Трейс хранит информацию о времени старта функций, но не времени выполнения. Для создания и анализа трейса воспользуемся модулем Bitrix.xDebug.

Цукерберг рекомендует:  Оптимизация вёрстки сайта

Что для этого нужно:

Поставить Bitrix.xDebug из маркетплейса (бесплатный, в списке модулей будет называться Отладчик).

Включить xdebug (нужно учитывать, что xdebug сильно грузит сервер, поэтому если сервер и “никуда не спешит” – лучше выключить xdebug сразу после снятия трейса).


Запустить создание трейса . Запуск можно сделать или в настройках модуля Отладчика (время лучше ставить хотя бы минут 5, потому что создание трейса значительно замедляет скорость загрузки страницы; путь нужно указывать абсолютный; в Параметрах xdebug руководствуйтесь следующей мыслью: “Чем больше информации вы будете собирать – тем больше времени и места будет занимать трейс”).

Без использования модуля битрикса – через xdebug_start_trace(); и xdebug_stop_trace(); в коде, если известно, в каком именно месте тормозит сайт. Но не забудьте в этом случае прописать правильные настройки для xdebug’а в .htaccess ( документация и флаги ).

4. Запустить профилировщик в Bitrix.xDebug для анализа трейса. Полный трейс может весить один-два гигабайта, при анализе он сжимается в несколько раз и записывается в базу. Поэтому если есть вероятность, что сайт из-за этого повиснет – можно скачать трейс и загрузить на локальный или тестовый сервер с уже установленным Bitrix.xDebug и запустить профилирование там.

5. В итоге работы появится табличка. Интегральное время – время работы самой функции плюс время работы всех функций внутри неё. Собственное – «чистое» время функции. Интегральное время может показывать некорректный результат, если функция вызывается рекурсивно – тогда получается сумма арифметической прогрессии.

Всё замечательно. Но вопрос – а что дальше-то делать?

Выбранный подход: начинаем сверху и идём «вглубь». То есть – выводим полный список функций и поиском по странице ищем, что же у нас вызывается непосредственно с index.php. Скорее всего, это будет или подключение компонента, или require/include. Выбираем самую долгую функцию. Нажимаем на название – видим, что она вызывала. Снова поиск по странице – на этого раз по названию компонента или файла, который подключала эта функция. И так через пару итераций доходим до наиболее «подозрительных» функций – интегральное время которых необоснованно велико и вызовы слишком частые. В первую очередь стоит обратить внимание на нестандартные функции, не входящие в ядро Битрикса.

После определения «слабых» мест, можно или переписать их заново, или оптимизировать, убрав лишние запросы к базе или вторичное подключение файлов.

На сайте из примера было выявлено несколько слабых мест.

Первое, которое сразу бросалось в глаза в трейсе — это функция создания меню каталога.

В шаблоне она вызывалась только один раз, поэтому без трейса на неё бы навряд ли стали смотреть. Оказалось, что это рекурсивная функция , с количеством итераций по количеству элементов, да ещё и на каждой итерации был GetList() с фильтром по единственному id и вызов ещё одной рекурсивной функции для построения ссылки для ЧПУ, в которой тоже был GetList(). Так что в сумме она давала несколько сотен запросов к базе данных. Заменилось за полчаса на стандартный компонент, после чего при кешировании страница стала грузится за полсекунды, с 50 запросами против тысячи раньше.

Второе — остался вопрос со скоростью загрузки страницы без кеша. Путём поиска по странице со списком функций в трейсе обнаружилось, что в шаблоне компонента списка товаров почему-то несколько раз подключается одни и тот же файлы (раз по 20 каждый), плюс ещё слишком большое количество GetList(), которые, как оказалось, вызывались в цикле по элементам (хотя их вполне можно было заменить одним). Вынесение загрузки файлов в одно место помогло снять значительную нагрузку с сервера.

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

Не работает ajax-запрос (Bitrix CMS)

Всем привет. Задача вот какая:

Есть страница https://aecsd.org/test/ На ней размещена форма с несколькими выпадающими полями. Ниже размещён компонент Битрикс: bitrix:news.list — это компонент который выводит список новостей. Я хочу сделать фильтрацию этого списка новостей например по Стране. Пользователь выбирает из выпадающего списка страну, и таблица оставляет только те строки, в которых страна совпадает с выбранным из списка значением.

Сейчас код вот так выглядит:

Но при выборе страны из выпадающего списка, в $_GET-параметр ничего не добавляется, а мне нужно, чтобы добавлялось PROPERTY_COUNTRY=Russia к примеру. Помогите пожалуйста, скажите, что я делаю не так?


Хотел сделать без перезагрузки страницы, поэтому и использовал ajax-запрос.

Добавление и удаление из сравнения на AJAX: Битрикс

Рецепт лежал у меня в закромах, почти о нем и забыл, но тут подвернулся под руку- решил опубликовать. Скажу сразу, данное решение найдено то ли на просторах интернета, то ли в официальных блогах на официальном сайте Битрикс. Но в оригинале допущен ряд критических ошибок и упущений.

Видимо автор рецепта спешил, или опустил очевидные для него моменты. Публикую метод с необходимыми исправлениями.

Не большое видео, что должно получиться

На оформление сильно не смотрим, стилизация в процессе. Главное функционал

Делаем AJAX добавление в сравнение

Идем в папку /local/ (если нет, создаем ее) в ней создаем папку ajax в которой создаем файл list_compare.php внутри которого размещаем код:

Это вызов стандартного компонента «Список сравниваемых элементов каталога». К этому файлу мы будем обращаться для AJAX запроса.

Далее, в нужном месте шаблона сайта выводим его еще раз. Например, в моем видео примере он размещен в footer.php хотя это не принципиально, просто в том месте, где список сравнения обозначен дизайном вашего сайта. Самое главное, вызываем тот же самый компонент, с тем же самым шаблоном что и в list_compare.php- лучше если они быть идентичными, хотя это на ваш вкус

Цукерберг рекомендует:  Законы программирования, о которых вы, возможно, не слышали

И обворачиваем вызов компонента в div

В шаблоне списка элементов catalog.section вашего каталога, в самом верху! размещаем скрипт, который будет отслеживать нажатия на input, отправляющий товар в сравнение и отправлять AJAX запрос к компоненту

И в том месте, где планируете вывести input для добавления/удаления в сравнение размещаем вот такой код

На этом в общем-то и все. Все должно работать- проверено.

Урок 12. AJAX запрос средствами JQuery в Bitrix

За вывод каталога в нашем интернет-магазине отвечает шаблон компонента bitrix:news.list. Файл находится по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php . В нем мы и будем работать. Точнее из него мы будем брать селекторы для JQuery. А работать мы будем в файле script.js, который необходимо расположить рядом с файлом template.php. В таком случае скрипт подключится автоматически.

Код совсем небольшой. В первой строке мы дожидаемся события полной загрузки страницы и после этого вешаем обработчик события нажатия на кнопки с классом .add-to-cart-btn . Это как раз кнопки Добавить в корзину. В переменной this у JavaScript хранится текущий объект над которым произведено действия и следующей строкой мы получаем ID этого объекта. Затем выполняется сам POST запрос.
$.post(‘url.php’, date, function(result)<>) первым параметром передается путь к файлу PHP, который будет обрабатывать вызов на сервере. Вторым параметром передаются произвольные данные. В нашем случае это значение параметров в виде объекта . Третьим параметром передается функция, которая будет обрабатывать ответ сервера в случае успешного исхода. В параметре этой функции в переменной result у нас будет хранится ответ PHP скрипта.
В предпоследней строке мы задаем текст для вывода в корзине. Количество подобранных товаров выводится в блоке с . А в последней показываем сообщение об успешной операции.


Теперь нужно внести небольшие правки в шаблоны, чтобы скрипт корректно заработал.
Первое нужно добавить > ]?>» .
Код:

А второе в шапке сайта в фале header.php нужно задать блока вывода корзины, чтобы точно его идентифицировать.

После этого наш скрипт уже будет работать.

И остается один момент, чтобы количество товаров в корзине отображалось на всех страницах сразу при открытии страницы. Для этого нужно с помощью PHP обратится к сессии BX_CART и получить сохраненное в ней значение. Это мы сделаем в том же файле header.php добавив PHP вызов в строку вывода количества в корзине.

Вот на этом точно все.
Скачать шаблон можно по следующей ссылке: ссылка на шаблон.

От автора:
В этом уроке мы рассмотрели реализацию корзина и AJAX запроса с помощью библиотеки JQuery. Работа с JQuery на мой взгляд проще чем с нативным JavaScript. Хотя чтобы понимать, как работает AJAX технология обязательно посмотрите Урок 11 на эту тему. В следующих планах у меня реализовать этот же AJAX запрос только с помощью Bitrix AJAX. Библиотеку Битрикс не жалуют разработчики, но познакомится с ней нужно. А также в моих планах досконально разобраться с кешированием в Битрикс и наверное это будет даже серия статей. Так что подписывайтесь, чтобы не пропустить следующие статьи. До новых встреч.

Bitrix AJAX загрузка новостей

Дата 12.05.2020 Автор Alex Рубрика Веб сайты, Интернет

Ajax особенно востребован для загрузки элементов в различные списки. К примеру, в список новостей. Отсутствие необходимости полной перезагрузки страницы выгодно отличает ajax от постраничной навигации через ссылки.

Загрузка контента ajax’ом считается признаком хорошего тона. Пользователю психологически легче воспользоваться интерактивной загрузкой контента, нежели смотреть на мигающую страницу браузера.

Загрузка новостей ajax’ом на bitrix

Рассмотрим способ загрузки новостей, при котором внизу списка находится кнопка «загрузить ещё новости». Пользователь нажимает на эту кнопку, и в конец списка будут добавляться новые элементы.

Программный код будет состоять из стандартного компонента списка новостей. И небольшого скрипта загрузки на JQuery. Для наглядности вся логика будет происходить в двух файлах:

  1. Страница сайта со списком новостей, которую загружает пользователь при переходе на страницу. К примеру /news/index.php
  2. Файл, который выводит только компонент списка новостей bitrix:news.list. В этом файле не будет подключаться шаблон сайта. Файл будет лежать по адресу: /_ajax/more_news.php

Ajax загрузка новостей в битрикс строится на логике стандартной пагинации. Если странице с компонентом bitrix:news.list передаётся GET[‘PAGEN_1’] = 2, то в списке новостей будет загружена страница 2.

Рассмотрим первый файл /news/index.php. В нём выводится шаблон сайта (хидер и футер), компонент bitrix:news.list и кнопка загрузки дополнительных элементов. Выглядит файл примерно так:


Вот и всё описание загрузки новостей ajax’ом в битрикс.

Сложная вёрстка

Зачастую в шаблоне компонента используется сложная вёрстка. При которой просто не получится добавить новости через

Приходится запрещать компоненту выводить некоторые детали вёрстки, чтобы получаемый список красиво добавился к существующему. Для этого передайте компоненту параметр, который будет отключать часть вёрстки. К примеру:

А внутри шаблона компонента поставьте условие на вывод обрамления компонента:

Анимация загрузки. Прелоадер ajax запроса Битрикс.

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

Все стандартные ajax запросы в битриксе сопровождаются лоадером:

Его и будем менять. Для этого необходимо переопределить js методы: BX.showWait, BX.closeWait

html, css код лоадера

Хотя как по мне, лучше избегать долгих операций, чем украшать их лоадерами :)

Bitrix AJAX загрузка новостей

Дата 12.05.2020 Автор Alex Рубрика Веб сайты, Интернет

Ajax особенно востребован для загрузки элементов в различные списки. К примеру, в список новостей. Отсутствие необходимости полной перезагрузки страницы выгодно отличает ajax от постраничной навигации через ссылки.

Загрузка контента ajax’ом считается признаком хорошего тона. Пользователю психологически легче воспользоваться интерактивной загрузкой контента, нежели смотреть на мигающую страницу браузера.

Загрузка новостей ajax’ом на bitrix

Рассмотрим способ загрузки новостей, при котором внизу списка находится кнопка «загрузить ещё новости». Пользователь нажимает на эту кнопку, и в конец списка будут добавляться новые элементы.

Цукерберг рекомендует:  Как стать программистом. Пошаговая инструкция по поиску работы


Программный код будет состоять из стандартного компонента списка новостей. И небольшого скрипта загрузки на JQuery. Для наглядности вся логика будет происходить в двух файлах:

  1. Страница сайта со списком новостей, которую загружает пользователь при переходе на страницу. К примеру /news/index.php
  2. Файл, который выводит только компонент списка новостей bitrix:news.list. В этом файле не будет подключаться шаблон сайта. Файл будет лежать по адресу: /_ajax/more_news.php

Ajax загрузка новостей в битрикс строится на логике стандартной пагинации. Если странице с компонентом bitrix:news.list передаётся GET[‘PAGEN_1’] = 2, то в списке новостей будет загружена страница 2.

Рассмотрим первый файл /news/index.php. В нём выводится шаблон сайта (хидер и футер), компонент bitrix:news.list и кнопка загрузки дополнительных элементов. Выглядит файл примерно так:

Вот и всё описание загрузки новостей ajax’ом в битрикс.

Сложная вёрстка

Зачастую в шаблоне компонента используется сложная вёрстка. При которой просто не получится добавить новости через

Приходится запрещать компоненту выводить некоторые детали вёрстки, чтобы получаемый список красиво добавился к существующему. Для этого передайте компоненту параметр, который будет отключать часть вёрстки. К примеру:

А внутри шаблона компонента поставьте условие на вывод обрамления компонента:

Битриксовед

Подписаться на этот блог

Follow by Email

Новый шаблон sale.order.ajax: кастомизация

  • Получить ссылку
  • Facebook

  • Twitter
  • Pinterest
  • Электронная почта
  • Другие приложения
  • Получить ссылку
  • Facebook
  • Twitter
  • Pinterest
  • Электронная почта
  • Другие приложения

Если при полной выгрузке из 1С в битрикс товары и разделы приходят неактивными

  • Получить ссылку
  • Facebook

  • Twitter
  • Pinterest
  • Электронная почта
  • Другие приложения

Есть такая беда. Москвичи и питерцы с ней, скорее всего, не сталкиваются :)

На разгадывание этой загадки у нас ушло 8,5 часов чистого рабочего времени.

Небольшой ликбез о том, что происходит при полной выгрузке.

Есть компонент, который отвечает за выгрузку. Он лежит по адресу: /bitrix/components/bitrix/catalog.import.1c/component.php
В 607 строке (у вас может быть другая строка) есть условие:
И дальше начинается магия. Во время выгрузки 1с посылает GET-параметр, в котором указано время начала выгрузки.
После полной выгрузки разделов и элементов инфоблока происходит проверка. Если время обновления товара/раздела в битриксе меньше, чем время начала выгрузки — значит, это старый элемент, и тогда происходит.

Вносить изменения в компонент нельзя (входит в ядро битрикса, затрется при обновлениях). Но можно временно добавить после строки с Update запись в лог, примерно такую:

Что делать?

Проверить аппаратное время сервера (SSH): hwclock —show

Сменить его: hwclock —set —date=»2020-09-01 15:05:30″ —localtime

Проверить системное время сервера: date

Сменить систеамный часовой пояс: cp /usr/share/zoneinfo/Europe/Kaliningrad /etc/localtime

Вывести текущее время php: echo date(‘H:i:s’);

Механизм «Показать еще» в 1С-Битрикс

Давайте посмотрим как быстро и просто реализовать эту возможность. В качестве примера я возьму статьи в своём блоге, а в итоге получится что-то такое: gif (3.17 Mb).

По шагам:

  1. Создадим шаблон компонента постраничной навигации (bitrix:system.pagenavigation);
  2. Адаптируем шаблон компонента списка новостей (bitrix:news.list);
  3. Разместим на странице и настроим компонент (bitrix:news.list).

1. Создание шаблона постраничной навигации

Я покажу как сделать это вручную, но вы можете просто скопировать один из стандартных шаблонов и заменить в нем код на мой.

Для начала создадим раздел «system.pagenavigation» в шаблоне сайта: /bitrix/templates/[ваш шаблон]/components/bitrix/ или /local/templates/[ваш шаблон]/components/bitrix/. Если раздел уже существует (как в моём случае), новый создавать не надо:)

В нем создадим подраздел с названием нашего шаблона. Назовем его «show_more» (я буду использовать phpStorm, но те же действия можно проделать с помощью других редакторов или админки Битрикс).

Каждый шаблон компонента должен содержать файл template.php, в нем будет храниться оформление. Также для реализации динамической подгрузки нам потребуются файлы script.js и style.css, где мы пропишем соответственно скрипт и стили.

Первым делом возьмемся за template:На первые две строки не обращаем внимание, в рамках этой статьи мы их рассматривать не будем.

Дальше два условия: кнопка загрузки будет показываться когда страниц больше 1 и когда есть следующая страница (текущая + 1).

Кнопка будет представлять собой div с параметром data-url — адресом следующей станицы для подгрузки, классом load_more и надписью «Показать еще».

Если страницы постраничной навигации кончились — покажем надпись «Загружено все».

Следующий файл стилей. В нем будет оформление кнопки. Для примера я использовал простейшее оформление:В сумме со стилями моего сайта, кнопка будет выглядеть как в примере. Вы же оформите её как вам нравится:)

Теперь самое главное — скрипт:Как это работает: после нажатия на кнопку (div) срабатывает событие, отсылающее ajax запрос к указанному в кнопке адресу (атрибут data-id). Мы удаляем старую навигацию (класс .load_more), чтоб она не дублировалась. В полученных данных ищем элементы (в нашем случае класс .news-item, о нем чуть ниже) и уже известную нам навигацию (.load_more).

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

2. Шаблон компонента списка новостей

Создадим папку шаблона компонента (/local/templates/[ваш шаблон]/components/bitrix/news.list/show_more_news/, либо /bitrix/templates/[ваш шаблон]/components/bitrix/news.list/show_more_news/).

Шаблон будет состоять всего из одного файла template.php:Вообще, оформление вы можете использовать какое угодно. Важная деталь: все элементы должны быть обёрнуты в блок с классом news-list, а каждый элемент иметь класс news-item (как в скрипте из второго пункта).

3. Размещение на странице и настройка компонента

На нужной странице размещаем компонент bitrix:news.list и настраиваем на необходимый инфоблок.
В качестве шаблона компонента выбираем show_more_news (если вы все сделали правильно он должен появиться в списке), а в качестве шаблона постраничной навигации — show_more.
И указываем нужное количество новостей на странице. Именно столько элементов будет подгружаться после нажатия на кнопку.

Еще раз пример того, что у меня получилось: gif (3.17 Mb).

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих