Как сделать сортировку товаров AJAX в Bitrix, не используя настройку ajax для компонента каталога?

Question

[SLR722sss]

Сейчас сортировка работает на основе GET-параметров с перезагрузкой страницы, сделал скрипт который делает сортировку методом jquery.load то есть товары подтягиваются на страницу идя по урлу с гет-параметрами, при этом страница не перезагружается.

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

Есть какой то другой способ сделать аякс сортировку в битриксе или может кто знает какую js функцию можно запустить после завершения аякса чтобы обновить скрипты для карточек?

Comments

[PetrPo]

то есть не работает выбор количества и кнопка покупки...

Слишком эфемерно, откуда знать как и где у тебя этот функционал написан. Не работает, потому что dom обновляется и на элементах нет js эвентов (click, change и т.д.). Решить можно несколькими способами, поэтому надо больше инфы. Опиши подробнее где описано добавление товара в корзину, приложи js, тогда смогу помочь

[SLR722sss]

PetrPo, В списке товаров у каждого товара есть кнопка вида:

<a class="btn btn-default btn-md" id="bx_3966226736_245472_7e1b8e3524755c391129a9d7e6f2d206_buy_link" href="javascript:void(0)" rel="nofollow">Купить</a>

Как такового привязанного события нигде нету, оно зарыто в файле обработчике который привязан к каждой отдельной карточке в списке, то есть компонент bitrix:catalog.element.

Вот файл обработчик https://abriola.ru/bitrix/templates/abriola/compon...

Вот список товаров https://abriola.ru/catalog/ulichnye/

[Антон]

после такой аякс подгрузки не работают скрипты на карточках в списке

костыльно: добавить скрипты в подгружаемую часть кода

[PetrPo]

SLR722sss, покажи ajax, в ответе html или json?

[SLR722sss]

PetrPo, html , я по сути перехожу на урл ?sortBy=price&orderBy=desc&showBy=30 и оттуда методом load вытаскиваю область с товарами и пагинацией и вставляю на текущую страницу

[PetrPo]

SLR722sss, посмотри вот эту статью, там битриксовыми функциями вставка html и скриптов https://dev.1c-bitrix.ru/community/webdev/user/155...
У тебя restart buffer есть? Или ты полностью страницу получаешь с тегами html head body и т.д ?

[PetrPo]

Если я правильно понял у тебя в template.php должен быть вызов функции JCCatalogElement в теге script и он вставляется как текст, вот функция BX.ajax.processScripts позволит вставить его как скрипт, но надо делать restarr buffer в section.php

[SLR722sss]

PetrPo, Спасибо огромное, получилось методом с рестарт буфер и обновлением скриптов после загрузки html:

var ob = BX.processHTML(data);
BX.ajax.processScripts(ob.SCRIPT);

[PetrPo]

SLR722sss, отметь решением

Answer 1

[PetrPo]

В section.php надо сделать RestartBuffer
В ответе ajax

var ob = BX.processHTML(data);
BX.ajax.processScripts(ob.SCRIPT);

Answer 2

[Александр Маджугин]

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

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

Решния такие:
1 Самое простое - перевесить все события на document или body. Ну т.е. у вас есть скрпит какой-то который навешен на '.baybutton' скажем как-то так$('.baybutton').click Меняете его на $(document).on(.baybutton','click'' или как-то так. Соотвественно, когда вы заменете ajax'ом эту кнопку, событие на ней останется, так как висит на документе.

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

И да - битрикс тут не при чем.

Comments

[Алий Кунашев]

Ещё бы вместо jQuery использовать BX))

[Александр Маджугин]

Алий Кунашев, на самом деле не имеет значения - обе библиотеке работают с элементами DOM.

[Алий Кунашев]

Александр Маджугин, в данном контексте - да. Но зачем подключать еще одну библиотеку, когда BX умеет также?
Еще остался открытым вопрос кешируется ли подключенный jQuery.

[SLR722sss]

дополнил ответ в комментарии к вопросу

[Александр Маджугин]

Алий Кунашев, меня тоже всегда мучал вопрос - зачем использовать BX когда можно подключить jQuery который не просто может так же, а к которому еще тонна плагинов написана и на среднестатистическом сайте jQuery будет полюбому, потамушта какой-нибудь slik или fancybox.
Само создание BX было большой ошибкой.

P.S.
Сам я использую и BX, и jQuery и реактивные библиотеки например Vue, и даже CanJS - мне в принципе пофиг - я бэкендщик :)

[Алий Кунашев]

Александр Маджугин, потому и пофиг, что нодой не заболели)) а там за jQuery, вообще, могут камнями забить.

[Александр Маджугин]

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

[Александр Маджугин]

Алий Кунашев, вы путаете с короновирусом мне кажется - к node.js у многих иммунитет, да и уже спала опасность года как три назад - новых заражений почти нет. Вы бы еще рельсы вспомнили, помните - до ноды была эпидемия практичеcки?

[Алий Кунашев]

Александр Маджугин, да не, я не инквизиция мне нравится идея одного языка на весь стек) просто js-ники кульные на людей кидаются в разделе CMS.

[Александр Маджугин]

Алий Кунашев, я тоже не против. Я даже ЗА. Идея использовать один язык на обеих сторонах прекрасна и захватывает, особенно в части рендеринга. Но в целом подход к js разработке и node в частности, на мой взгляд, свернули куда-то не туда.

[Loki9928]

Ну у чушь же вы написали) Даже я считая себе новичком и то в шоке. Во 1х ajax не обновляет DOM а просто делает асинхронный запрос на сервер. Во 2х jQuery это библиотека для работы с DOM(поиск, замена, добавление, удаление, события и тд ). В 3х если много одинаковых событий, например в ленте новостей кнопка LIKE то обработчик и нужно событие вешать на родительский блок, что бы не создавать 1000 одинаковых обработчиков, я думаю вы догадаетесь на что это хоть влияет

[Александр Маджугин]

Во 1х ajax не обновляет DOM а просто делает асинхронный запрос на сервер.

Вы либо придераетесь к словам, либо не понимаете как работает ajax режим компонентов в Битрикс.
Безусловно буквально ajax ничего не обновляет - это вообще название подхода к разработке.
Но если вы включите AJAX режим в компоненте Битрикс вот что будет происходить - содержимое компонента будет обернуто в блок с уникальным индетификатором и на все ссылке в этом блоке будут навешены обработчики такие что при клике они будут выполнять запрос к серверу и кусок html который они получат с сервера они будут вставлять в этот блок.
Т.е. они будут обновлять DOM. Соотвественно все навешенные события внутри этого блока умрут. Их больше не будет так как больше не будет блоков на которые они навешены.

Во 2х jQuery это библиотека для работы с DOM(поиск, замена, добавление, удаление, события и тд )

И что?

В 3х если много одинаковых событий, например в ленте новостей кнопка LIKE то обработчик и нужно событие вешать на родительский блок, что бы не создавать 1000 одинаковых обработчиков, я думаю вы догадаетесь на что это хоть влияет

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

Answer 3

[Михаил]

если событие вешается на элемент, то оно вешается на существующий элемент, и не работает на вновь подгруженном через ajax, необходимо событие повесить на статичный родительский элемент или весь документ.
$({родительский элемент}).on({событие},{элемент события},function(event){...});
Если вешаете на документ, надо учитывать что обрабатываться будут все указанные элементы, если на родительский элемент, то отрабатываются, только те элементы, которые находятся внутри родительского.
В таком варианте события будут работать на новые подгруженные ajax'ом объекты.
Сортировку и прочие параметры проще передавать POST'ом, это как минимум удобнее, особенно когда в обработке учитываете фильтрацию и пагинацию (думаю в дальнейшем с этим столкнетесь)