JQuery

В CS-Cart и Multi-Vendor используется фреймворк jQuery. Вся дополнительная функциональность, написанная нами, представляется в виде плагинов.

Общие правила использования

  1. Для вызова всех методов jQuery используем сокращенную запись - $. Использование для вызовов переменной jQuery НЕ ДОПУСКАЕТСЯ:

    $.browser.msie;
    $('#test').ourMethod();
    
  2. Создавая плагины, нужно придерживаться стиля кодирования, принятого для jQuery. Для функций же остаются правила оформления как в php:

    $(window).myFunc();
    myVar = 123;
    
  3. JavaScript, встроенный в тело документа, оформляем в следующем виде:

    <script type="text/javascript">
    ...
    </script>
    

    Примечание

    Избегайте встраивания JavaScript в тело документа. Если вам нужно писать логику в шаблоне — значит с логикой что-то не то. Встраивание JavaScript можно использовать только для передачи данных из PHP в JavaScript.

  4. Внешние скрипты должны подключаться через smarty-функцию {script}:

    {script src="js/core.js"}
    
  5. Если нужно загрузить внешний скрипт через JavaScript, используйте ТОЛЬКО функцию $.getScript — она учитывает загруженные скрипты, правильно работает с пространствами имен (namespaces) и третьесторонними библиотеками.

  6. Третьесторонние JavaScript-библиотеки мы складываем в /js/lib/. Если нам нужно расширить функционал, пишем обертку по примеру ceDialog.

  7. Событие 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}
    

Большое обновление CS-Cart уже здесь Попробуйте новую панель администратора с темной темой