JQuery¶
В CS-Cart и Multi-Vendor используется фреймворк jQuery. Вся дополнительная функциональность, написанная нами, представляется в виде плагинов.
Общие правила использования¶
- Для вызова всех методов jQuery используем сокращенную запись - - $. Использование для вызовов переменной jQuery НЕ ДОПУСКАЕТСЯ:- $.browser.msie; $('#test').ourMethod(); 
- Создавая плагины, нужно придерживаться стиля кодирования, принятого для jQuery. Для функций же остаются правила оформления как в php: - $(window).myFunc(); myVar = 123; 
- JavaScript, встроенный в тело документа, оформляем в следующем виде: - <script type="text/javascript"> ... </script> - Примечание - Избегайте встраивания JavaScript в тело документа. Если вам нужно писать логику в шаблоне — значит с логикой что-то не то. Встраивание JavaScript можно использовать только для передачи данных из PHP в JavaScript. 
- Внешние скрипты должны подключаться через smarty-функцию - {script}:- {script src="js/core.js"} 
- Если нужно загрузить внешний скрипт через JavaScript, используйте ТОЛЬКО функцию - $.getScript— она учитывает загруженные скрипты, правильно работает с пространствами имен (namespaces) и третьесторонними библиотеками.
- Третьесторонние JavaScript-библиотеки мы складываем в - /js/lib/. Если нам нужно расширить функционал, пишем обертку по примеру- ceDialog.
- Событие - ready(вызываемое при загрузке документа) нужно писать в виде полной записи, с привязкой к- document.- Правильно: - $(document).ready(function() { // do something }); - или так: - $(function() { // do something }); 
- Неправильно: - $(function()), $(window).ready() 
 
Особенности¶
Колбэки¶
Колбэки используются в AJAX-запросах и во многих других местах. Если нужно передавать колбэк на метод определенного объекта, то используем анонимную функцию:
$.ceAjax('request', url, {callback: function() {
    obj.method();
}});
Async и Defer для скриптов¶
Начиная с версии CS-Cart 4.12.1, работает поддержка нативных async и defer скриптов.
Подключение скриптов происходит следующим образом:
- {script src="js/tygh/bottom_panel.js" defer=true} 
- {script src="js/tygh/bottom_panel.js" async=true} 
 
                         
        