Подключение виджета CallBackHunter в ModX CMS - проблема и её решение

Подключение виджета CallBackHunter на сайте с CMS ModX: проблемы которые возникли со знаком вопроса (?) в строке инициализации скрипта и способ отложенной загрузки виджета из внешнего JS-файла. Возникнут вопросы по этой статье - оставляйте свои комментарии, или пишите мне со страницы Контакты.

Подключение CallBackHunter виджета в ModX CMS

Автор статьи: volego

2018-02-12 16:16:46

Ко мне обратился заказчик, у которого уже был готовый интернет-магазин. Задача была достаточно простая - установить на сайт виджет CallBackHunter для захвата пользовательских данных. Магазин работал под управлением CMS ModX. Сам виджет добавляется при помощи подключения JS-файла, в параметр которому после знака вопроса передаётся идентификатор экземпляра виджета:

   //hunter_code - код экземпляра
   < script type="text/javascript" src="//cdn.callbackhunter.com/cbh.js?hunter_code=1234567890" charset="UTF-8">
   

Казалось бы, чего тут сложного? - добавляй эту конструкцию перед закрывающим тегом body - и всё должно работать! Так гласили все инструкции, с которыми я ознакомился накануне. И действительно: вставив этот код в сквозной чанк, содержащий в себе ссылки на подключение всех сторонних JS-файлов, я добился показа виджета на сайте. Проверил отображение на главной, в каталогах - всё отлично работает, дело сделано!

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

"Главное - не поддаваться панике!" - подумал я и судорожно отменил вчерашние изменения в коде (убрал подгрузку JS-файла с виджетом). Всё заработало в штатном режиме. Проблема была локализована - виной всему было подключение стороннего JS-файла, но как её решить? Опытным путём установил, что некоторые страницы сайта переставали открываться, когда в чанке с подключением JavaScript-ресурсов появлялась ссылка вида js-url?param=value, т.е. когда подключался любой внешний JS-файл, которому передавались параметры через знак вопроса. Код конкретного виджета здесь был не причем.

Поиски решения в Интернете только дали понять, что в ModX есть какая-то особенность с обработкой знака вопроса в чанках. Как же обойти эту неприятную особенность ModX CMS. Мне в голову пришла отличная идея: Я подключу обычный JS-файл без параметров, а уже из него добавлю нужный мне JS с параметром.

   function loadjsfile(filename){
      !function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer>"),a.src=s}(document,"script",[				  filename])
      if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref);
   }
   loadjscssfile("//cdn.callbackhunter.com/cbh.js?hunter_code=0123456789");

Использование этой конструкции во внешнем файле дало мне возможность избежать проблемы использования знака вопроса в подключении JS-ресурсов непосредственно из ModX.