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}