Микроформаты¶

Валидатор¶

Формат записи:

<label class="cm-email cm-required" for="elm_id">Field name:</label>
<input type="text" name="test" value="Y" id="elm_id" />

Для валидатора форм обязательно наличие элемента label, назначенного на валидируемый элемент с помощью параметра for. CSS класс у лейбла задает микроформат, классы можно комбинировать. У лейбла должно быть описание, даже если он скрытый, т.к. это описание подставляется в сообщение о некорректно введенном поле. В сообщениях могут использоваться следующие плейсхолдеры:

• [field] — заменяется на описание лейбла, если в функцию формирования сообщения передается 1 параметр, например:

  var msg = 'The field [field] is not valid';
  _formMessage(msg, lbl);
  

• [field2] — заменяется на описание основного и дополнительного лейблов, если в функцию формирования сообщения передается 2 параметра, например:

  var msg = 'The field [field1] do not match field [field2]';
  _formMessage(msg, lbl, lbl2);
  

• [extra] — дополнительные данные, которые нужно добавить в сообщение:

  var msg = 'The field [field] should be set to the following format: [extra]';
  var extra = '1AB-CF5';
  _formMessage(msg, lbl, null, extra);
  

Список микроформатов:

• cm-required — элемент обязательно должен быть заполнен. Если стоит на чекбоксе — чекбокс должен быть отмечен.

• cm-email — значение элемента должно быть валидным email-адресом.

• cm-phone — значение элемента должно быть валидным телефонным номером.

• cm-zipcode — значение элемента должно быть валидным почтовым индексом. У каждой страны формат индекса свой, поэтому паттерн должен задаваться в таблице со странами, но пока вручную — через метод $.ceFormValidator('setZipcode', {...}). Например:

  <script type="text/javascript">
      Tygh.$.ceFormValidator('setZipcode', {
          US: {
              regexp: /^(\d{5})(-\d{4})?$/,
              format: '01342 (01342-5678)'
          },
          CA: {
              regexp: /^(\w{3} ?\w{3})$/,
              format: 'K1A OB1 (K1AOB1)'
          },
          RU: {
              regexp: /^(\d{6})?$/,
              format: '123456'
          }
      });
  </script>
  

• cm-value-integer — вешается на элемент формы (input, textarea, etc...). При вводе значения оно проверяется на целочисленность.

• cm-value-decimal — вешается на элемент формы (input, textarea, etc...). При вводе значения оно проверяется на соответствие формату числа с десятичной точкой.

• cm-integer — значение элемента должно быть целым числом.

• cm-password — назначается обязательно на пару элементов, их значения должны совпадать.

• cm-multiple — хотя бы одно значение элемента select должно быть выбрано.

• cm-all — выбирает все опции элемента select перед отправкой формы.

• cm-multiple-checkboxes — при отправке формы хотя бы один чекбокс из группы должен быть выбран.

• cm-multiple-radios — при отправке формы хотя бы один радиобаттон из группы должен быть выбран.

• cm-regexp — проверяет введеное значение на соответствие регулярному выражению. Регулярное выражение и сообщение об ошибке задаются через data-аттрибуты data-ca-regexp и data-ca-message. Например:

  <label for="a" class="cm-regexp" data-ca-regexp="^[A-Za-z]+$" data-ca-message="Please, use alphabetical symbols only"><input type="input" id="a" value="" />
  

• cm-numeric — проверяет значение на число, с помощью плагина autoNumeriс (документация по плагину).

Добавление валидаторов:

Валидатор можно добавить через метод $.ceFormValidator('registerValidator', {}). В массиве параметров передается название микроформата, сообщение об ошибке и функция-обработчик значения. Если функция возвращает false — отображается сообщение об ошибке.

Пример:

<script>
$.ceFormValidator('registerValidator', {
    class_name: 'cm-gc-validate-amount',
    message: _.tr('text_gift_cert_amount_alert'),
    func: function(id) {
        var max = parseInt((parseFloat(max_amount) / parseFloat(_.currencies.secondary.coefficient))*100)/100;
        var min = parseInt((parseFloat(min_amount) / parseFloat(_.currencies.secondary.coefficient))*100)/100;

        var amount = parseFloat($('#' + id).val());
        if ((amount <= max) && (amount >= min)) {
            return true;
        }

        return false;
    }
});
</script>

Отправка форм¶

Формат записи:

<form class="cm-ajax">
</form>

CSS класс у тега form задает микроформат, классы можно комбинировать.

• cm-ajax — форма будет отправляться AJAX’ом. Для корректной работы необходимо наличие в форме скрытого элемента с именем result_ids.

  <input type="hidden" name="result_ids" value="id1, id2" />
  

• cm-ajax-full-render — используется вместе с cm-ajax и возращает всю страницу.

• cm-no-ajax — если повесить этот класс на кнопку submit формы, то при нажатии ее форма будет отослана обычным образом, даже если на форме висит класс cm-ajax.

Для форм имеется возможность задать pre-call и post-call и ajax-callback (только для AJAX) функции. Для этого в документе необходимо повесить обработчик на событие, имя которого задается по правилам:

• Pre-call (вызывается до проверки полей формы): ce.formpre_имя_формы. В обработчик передается объект формы и элемент, который вызвал отсылку формы. Обработчик должен возвращать true/false. Если вернется false — форма не будет отправлена.

• Post-call (вызывается после проверки полей формы): ce.formpost_имя_формы. В обработчик передается объект формы и элемент, который вызвал отсылку формы. Обработчик должен возвращвть true/false. Если вернется false — форма не будет отправлена.

• Ajax-callback (вызывается после отсылки формы и получения ответа на ajax-запрос): ce.formajaxpost_имя_формы. В обработчик передаются пришедшие данные и параметры отсылки запроса.

  ...
  <script>
  $.ceEvent('on', 'ce.formpre_upload_form', function(form, clicked_elm) {
  ...
  });
  
  $.ceEvent('on', 'ce.formpost_upload_form', function(form, clicked_elm) {
  ...
  });
  $.ceEvent('on', 'ce.formajaxpost_upload_form', function(data, params) {
  ...
  });
  </script>
  

• cm-check-changes перед покиданием формы выполняет проверку на наличие несохранённых изменений. В случае наличия таковых показывается предупреждение о несохраненных данных. Автоматически назначается на все формы с методом post в панели администратора.

  if (_.area == 'A') {
      frms.filter('[method=post]').addClass('cm-check-changes');
  

• cm-disable-empty — навешивается на форму. При отправке формы необязательные пустые поля не передаются. Используется, например, в поиске продуктов, чтобы не передавалось большое количество незаданных параметров.

• cm-disable-empty-files — навешивается на форму. При отправке формы необязательные пустые поля для указания файлов не передаются.

• cm-failed-field — автоматически навешивается на поля после отправки формы для подсветки некоректно введеных данных.

• cm-no-hide-input — позволяет отправлять пустое значение инпута, даже если на форму установлен класс cm-disable-empty.

• cm-trim — формат вешается на label. Из конца значения связанного с ним инпута удаляются пробельные символы при проверке полей на валидность.

• cm-field-container — вешается на контейнер с элементами. Сообщение о неправильно заполненном поле выводится после этого контейнера (пример: чекбокс с текстом, если не обернуть их контейнером — сообщение о неправильно заполненном поле выведется сразу после чекбокса, подвинув текст).

• cm-reload-form — при изменении значения элемента, который использует cm-reload-form, форма переинициализируется.

Другое¶

• cm-reset-link — При клике на элементе с таким классом будут восстановлены значения по умолчанию в форме. Используется в форме поиска продуктов.
• cm-select-text — При клике на элементе с таким классом будет выделено содержимое полей, которые поддерживают метод select, т.е. textarea, input. Используется для удобства копирования в буфер.
• cm-field-prefix (cm-field-suffix) — в CS-Cart: когда объект недоступен для редактирования, все инпуты, селекты и т.п. удаляются и вместо них отображаются текстовые значения. Если у элемента есть префикс или суффикс (например, цена) — то его (префикс/суффикс) нужно обернуть в соответствующий микроформат, чтобы он корректно отобразился в таком случае.

Пикеры¶

• cm-ajax-content-input — используется в пикере, когда пишется, например, поисковый запрос. С задержкой в 500 мс после того, как был прекращён ввод, отправляет AJAX-запрос для автодополнения. Загрузка контента выполняется в контейнер, указанный в атрибуте data-ca-target-id элемента, а паттерном для запроса является параметр value. Пример: смена вендора через пикер в шапке в Multi-vendor.

• cm-ajax-content-more — когда данный элемент становится видимым (например, в большом выпадающем списке), загружается дополнительный контент. Пример: смена вендора, когда вендоров много, через пикер в шапке в Multi-Vendor.

• cm-cancel — при использовании пикеров, если нажимаем на кнопку с этим микроформатом, то все поля пикера сбрасываются до состояния по умолчанию.

• cm-clone — используется для добавления элементов в пикер без его закрытия (т.е. без AJAX-запроса). К примеру, в промо-акциях, при добавлении несольких продуктов/категорий в список из пикера. Вешается непосресдственно на пустую строчку, которая клонируется при добавлении нового элемента.

• cm-dialog-opener — навешивается на элемент, который должен открывать диалог. В data-ca-target-id-параметре указывается контейнер, в который диалог будет загружен. Пример: Products -> Categories. Ссылка Edit selected имеет данный класс.

• cm-dialog-closer — навешивается на элемент, который должен закрывать диалог. Если навешен на элемент, который отправляет форму, то закрытие диалога срабатывает только после проверки формы. Пример: кнопка “Отмена” в пикерах.

• cm-form-dialog-opener — навешивается на форму или элемент, который ее отправляет, если результат нужно показать в диалоге. Параметры принимает те же, что и * cm-dialog-opener.

• cm-form-dialog-closer — навешивается на форму или элемент, который ее отправляет, если форма отображается в диалоге и диалог нужно закрыть после отправки.

• cm-dialog-keep-in-place — не перемещать элемент, контент которого отображается в диалоге, в body.

• cm-dialog-auto-open — открывает автоматически диалог при заходе на страницу. Используется в панели администратора, в welcome screen.

• cm-dialog-auto-size — используется вместе с cm-dialog-opener, ширина и высота диалога будут зависеть от контента.

• cm-dialog-auto-width — используется вместе с * cm-dialog-opener, ширина диалога определяется контентом.

• cm-js-item — при добавлении элемента на форму из пикера (например, добавление продукта к подарочному сертификату) этот класс устанавливается на контейнер, в котором находится добавленный элемент.

• cm-picker-options — если данный класс установлен, то при переносе продукта из пикера, будут получены его (продукта) опции.

  <tbody id="{$data_id}" class="{if !$item_ids}hidden{/if} cm-picker-options">
  

• cm-dialog-switch-avail — сбрасывает все выбранные checkbox в диалоге.

Отправка формы по клику на любом НЕ input[type=submit] элементе¶

Формат записи:

<input type="radio" name="a" value="b" class="cm-submit" data-ca-dispatch="dispatch[controller.mode]" data-ca-target-form="form_name" />

Параметры:

• data-ca-dispatch — dispatch, на который будет отсылаться форма (обязательное поле)
• data-ca-target-form — id или имя формы, которая будет отсылаться. Если не указано — отошлется форма, которой принадлежит элементу.

Отправка формы в новое или родительское окошко¶

Формат записи:

<input type="submit" name="a" value="b" class="cm-new-window" />
<input type="submit" name="a" value="b" class="cm-parent-window" />

CSS класс у тэга input задает микроформат, классы можно комбинировать.

• cm-new-window — при клике будет открыто новое окошко и форма пошлется туда.
• cm-parent-window — при клике форма пошлется в родительское окно.

Запрет отправки формы¶

Формат записи:

<input type="submit" name="a" value="b" class="cm-no-submit" />

CSS класс у тэга input задает микроформат, классы можно комбинировать.

• cm-no-submit — по клику на элементе форма, которой принадлежит этот элемент, отсылаться не будет.

Пропуск валидации полей в форме¶

Формат записи:

<input type="submit" name="a" value="b" class="cm-skip-validation" />

CSS класс у тэга input задает микроформат, классы можно комбинировать.

• cm-skip-validation — по клику на элементе форма, которой принадлежит этот элемент, отошлется без валидации значений элементов.

Манипуляция чекбоксами¶

Формат записи:

<input type="checkbox" name="check_all" value="Y" class="cm-check-items" />
...
<input type="checkbox" name="product_ids[]l" value="1" class="cm-item" />
<input type="checkbox" name="product_ids[]l" value="2" class="cm-item" />

<a class="cm-check-items on">Check all</a>/<a class="cm-check-items off">Uncheck all</a>

Существует 2 типа манипуляций чекбоксами:

• С помощью главного чекбокса
• С помощью ссылок

Управляющий элемент должен обязательно иметь имя “check_all” и класс check-items. Если управляющий элемент — ссылка, то указываются еще классы on и off — включают и выключают все чекбоксы.

• cm-on — вешается на ссылку для манипуляции чекбоксами. Включает все чекбоксы при нажатии на ссылку.
• cm-off — вешается на ссылку для манипуляции чекбоксами. Выключает все чекбоксы при нажатии на ссылку. Использование не обязательно, т.к. флаг отметить всё/выключить всё, устанавливается только на основе наличия класса cm-on.

Управляемые элементы должны иметь класс item.

На кнопку, отправляющую форму можно навесить класс cm-process-items. В этом случае, при нажатии на кнопку, соответствующая группа чекбоксов будет проверена на включенность и если ни одного не включено, выведется сообщение.

Если в форме есть несколько групп чекбоксов, которыми нужно управлять отдельно, то к классам cm-check-items, cm-item и cm-process-items нужно добавить уникальные суффиксы, например:

<input type="checkbox" name="check_all" value="Y" class="cm-check-items-group" />
...
<input type="checkbox" name="product_ids[]l" value="1" class="cm-item-group" />

• cm-no-change — если у не отмеченного чекбокса отсутствует этот микроформат, то в качестве его (чекбокса) значения будет использоваться строка unchecked, а если данный класс навешен, то будет использоваться пустая строка – ‘’. Если же данный микроформат не назначен на отмеченный чекбокс, то значением будет являться содержимое атрибута value.

Скрытие форм¶

• cm-hide-inputs — поля с данным классом будут отображаться в виде текста, а не инпут элемента. Это используется в MVE для правки формы данных, которая отображается вендорам, т. е. поля, которые они не могут редактировать, отображаются текстом.
• cm-hide-save-button — вешается на таб, в котором нужно скрыть кнопки с классом.

Ссылки¶

Для ссылок доступен микроформат, позволяющий выполнять AJAX-запрос при клике по ней. Формат записи такой ссылки:

<a href="index.php?dispatch=products.update&amp;product_id=15" class="cm-ajax" data-ca-target-id="id1, id2, idn">Run</a>

Параметр data-ca-target-id содержит айдишники тэгов, перечисленные через запятую, для апдейта запрошенным содержимым.

Чтобы проскролить до нужного элемента можно в параметре data-ca-scroll передать id.

Чтобы при AJAX-запросе отобразить оверлей над определенными элементами, можно передать селектор в параметр data-ca-overlay.

CSS класс у тэга a задает микроформат, классы можно комбинировать.

• cm-ajax — при клике будет выполняться AJAX-запрос
• cm-comet — форма обновляется с использованием модели Comet. Пример: форма бэкапа базы данных.
• cm-delete-row — при клике на элемент содержащий данный класс, удаляется ближайший родительский элемент tr. Используется для удаления строки в таблице.
• cm-row-item — Навешивается на строку в таблице. Используется для идентификации контейнера совместно с cm-delete-row.
• cm-ajax-cache — позволяет кэшировать AJAX-запросы, нужно использовать совместно с cm-ajax.
• cm-ajax-force — отключает запрет повторного выполнения js кода из ajax респонса, нужно использовать совместно с cm-ajax.
• cm-external-click — кликает по элементу с известным id. ID элемента по которому нужно кликнуть указывается в параметре data-ca-external-click-id ссылки.

<a class="cm-external-click" data-ca-external-click-id="external_elm">Push me</a>

• cm-external-focus — при клике на элементе передаёт фокус элементу, указанному в * data-ca-external-focus-id-параметре.
• cm-smart-position — используется для позиционирования контейнеров (например, списка переключения валюты в админке).
• cm-post — позволяет при клике на ссылку отправить запрос методом POST. Используется, например, для удаления объекта: форму там делать неудобно — достаточно просто добавить ссылку object.delete?object_id=11 с этим микроформатом.
• cm-scroll — при клике на элементе скороллится до элемента, описанного в виде селектора в data-ca-scroll.

<a class="cm-scroll" data-ca-scroll=".cm-pagination">Up</a>

Нотификации¶

• cm-notification-close — вешается на кнопку закрытия нотификации. При нажатии нотификация удаляется.
• cm-notification-close-ajax — вешается на кнопку закрытия нотификации. При нажатии отсылается AJAX-запрос на удаление нотификации. Используется совместно с * cm-notification-close.
• cm-auto-hide — вешается на контейнер конкретной нотификации. Нотофикаци с данным классом будет автоматически спрятана через определенный промежуток времени. Таймаут задаётся из Settings → Appearance.
• cm-notification-container — контейнер, куда добавляются нотификации.
• cm-notification-content — контейнер конкретной нотификации. Также контейнер должен содержать data-аттрибут с идентификатором нотификации — data-ca-notification-key.
• cm-notification-content-extended — контейнер конкретной нотификации расширенного типа (отображается по середине экрана). Также контейнер должен содержать data-аттрибут с идентификатором нотификации — * data-ca-notification-key.

Остальные элементы¶

• cm-confirm — при клике будет запрошено подтвержение на совершение действия. При наличии аттрибута data-ca-confirm-text текст запроса будет взят из значения этого аттрибута.
• cm-skip-confirmation — вешается на элемент и позволяет пропускать подтверждение на совершение действия, связанного с сотоянием элемента.
• cm-noscript — данный элемент будет показан только если включена поддержка яваскрипта в браузере
• cm-focus — устанавливает фокус на элементах с этим классом при загрузке страницы. Пример: форма входа – фокус устанавливается на поле ввода логина.
• cm-opacity — вешается на удалённую строку таблицы, делая её полупрозрачной. Пример: склонированная и затем удалённая «строка» для добавления изображения к продукту. Удаление со страницы будет произведено при перезагрузке, а до тех пор строка будет полупрозрачной.
• cm-uploaded-image — устанавливается на div с загруженным изображением. Используется для подсчёта количества загруженных изображений.
• cm-wysiwyg — навешивается на textarea. Представляет редактор для расширенного форматирования текста.
• cm-autocomplete-off — убирает с поля возможность автозаполнения. Используется для поля ввода пароля.

Попапы¶

Для попапов доступен микроформат popup-box, который позволяет закрывать попап при клике вне его обасти.

Формат записи:

<div class="cm-popup-box">
...
</div>

Чтобы скрыть попап при нажатии на какой-либо элемент находящийся внутри попапа, нужно задать класс cm-popup-switch для данного элемента.

Формат записи:

<div class="cm-popup-box">
<strong class="hand cm-popup-switch">Close</strong>
...
</div>

• cm-select-option — используется в админке для popup bootstrap.
• cm-popover — инициализирует popover bootstrap (http://getbootstrap.com/2.3.2/javascript.html#popovers).

Комбинации элементов¶

• cm-combination — используется для скрытия/отображения контейнера с отображением состояния контейнера. Используется, например, для кнопки advanced search в админке, для деревьев (категории, страницы) и т.п. Под отображением состояния понимается показывание различной картинки в зависимости от состояния контейнера. Возможны 2 варианта.

<img src="" id="on_cat" class="cm-combination" />
<img src="" id="off_cat" class="cm-combination" />
<a href="#" id="sw_cat" class="cm-combination">
...
<div id="cat">
</div>

<a href="#" id="sw_cat" class="open cm-combination">
...
<div id="cat">
</div>

<input type="checkbox" id="sw_company_redirect" checked="checked" class="cm-switch-availability cm-switch-inverse cm-switch-visibility" />

<img src="" id="on_cat" class="cm-combinations" />
<img src="" id="off_cat" class="cm-combinations hidden" />

<img src="" id="on_abc" class="cm-combinations-a" />
<img src="" id="off_abc" class="cm-combinations-a hidden" />
...
<img src="" id="on_cat" class="cm-combination-a" />
<img src="" id="off_cat" class="cm-combination-a" />
<a href="#" id="sw_cat" class="cm-combination-a">
...
<div id="cat">
</div>

Табы¶

• cm-js — в смарти и внутри него генерируется список с самими табами.При клике на таб автоматически ищется див с ID равным content_ + id таба , т.е. в нашем случае content_description, и показывается, параллельно скрываются все соседние дивы в контейнере.
• сm-active — cтавится на таб с классом cm-js при его выборе или в шаблоне. Таб с таким классом делается активным. В случае, если у него (таба) пустой контент и есть класс cm-ajax, содержимое загружается через AJAX.
• cm-toggle-button — прячет кнопки для пустого таба. Пример: переход в админке на таб, в котором нечего сохранять и кнопки Save или Save and close неактуальны.
• cm-j-tabs — Контейнер для табов cm-js. Используется для поиска контейнеров с табами и их инициализации.
• cm-tabs-content — Устанавливается на таб, в котором можно скрывать кнопки сохранения (cm-hide-save-button).
• cm-toggle-button — Вешается на див. Если выбран таб, в котором есть данный див и у таба стоит класс cm-hide-save-button, этот див будет скрыт.

Вспомогательные микроформаты¶

• cm-skip-avail-switch — при использовании функции switchAvailability (включает/выключает все элменты внутри заданного). Если у элемента стоит этот класс, то он не включается обратно.

• cm-skip-check-items — вешается на форму и позволяет при смене страницы пропускать проверку на изменение состояния дочерних элементов формы.

• cm-track — устанавливается на контейнер с табами. После отправки будет открыт последний активный таб.

• cm-save-and-close — добавляет скрытое поле с параметром return_to_list. Используется для кнопки Save and close.

• cm-promo-popup — вызывает popup в free mode, о том, что необходима полная версия.

• cm-update-for-all-icon — активирует шаринг для витрины. Поля редактирования становятся активными.

• cm-sticky-scroll — фиксирует блок, в котором используется. В data-ce-top указывается расстояние, относительно верхнего края страницы, начала фиксации. В data-ce-padding указывается расстояние от верхнего края страницы при фиксации.

  Примечание

  Пример: при прокрутке окна на 100px панель станет фиксированной на расстоянии 20px от верхнего его края.

• cm-range-slider — инициализирует ползунок выбора диапазона (jQuery UI Slider).

• cm-colorpicker — инициализирует пикер цветов (http://bgrins.github.io/spectrum/).

• cm-j-tabs-disable-convertation — отключает конвертацию табов в аккордион на мобильных устройствах. При добавлении этого микроформата к табам обязательно нужно добавить микроформат дла контента : cm-j-content-disable-convertation.

• cm-j-content-disable-convertation — отключает конвертацию контента табов в аккордион на мобильных устройствах.

Locations¶

• cm-location-*- все классы cm-location-* используются для объединения селектов стран и штатов в группы, чтобы при изменении страны перестраивались штаты соответствующего селекта. Класс вешается на selecbox/input со странами/штатами, а так же на label для элемента zipcode — чтобы объединить его в ту же группу.
• cm-country — ипользуется совместно с cm-location-* для указания на selectbox стран.
• cm-state — ипользуется совместно с cm-location-* для указания на selectbox и input штатов.

Подсказки¶

Для отображения в input поле или textarea поле внутренней подсказки, необходимо добавить к этому элементу класс cm-hint. И добавить подсказку в поле value. При получении фокуса этим полем подсказка исчезнет. Если поле останется пустым и фокус пропадет, то оно снова будет заполнено подсказкой. Если в поле показана подсказка, то к имени поля добавляется префикс hint_. При вводе текста этот префикс удаляется. Пример:

<input type="text" name="field" id="a" size="20" value="Please, input your name here" class="input-text cm-hint" />

• cm-hint-focused — указывает на то, что фокус в поле ввода и подсказка скрыта. Взаимоисключающий характер при взаимодействии с cm-hint (указывает на то, что в данном поле не надо отображать внутреннюю подсказку). Пример: поле Track my order(s) в кастомерке.
• cm-tooltip — вешается на элемент, которому нужна всплывающая подсказка. Текст указывается в атрибуте title.

Сортируемый список элементов [ADMIN]¶

Данный список можно увидеть например на странице редактирования валют, при перетаскивании строки у нее меняется позиция.

• cm-sortable — контейнер, в котором можно перемещать строки cm-sortable-row (например, список валют в админке).
• cm-sortable-id-* — идентификатор конкретной строки в контейнере cm-sortable. Значение после cm-sortable-id- передаётся в запросе и используется для сохранения изменений.
• cm-sortable-row — навешивается на строку в таблице, которую нужно перемещать. Строка должна быть в контейнере cm-sortable.

Quick menu¶

• cm-add-link — через Quick box дбавляет новую ссылку в секцию Quick menu.
• cm-add-section — через Quick box добавляет новую секцию в Quick menu.
• cm-delete-section — вешается на кнопку удаления раздела или ссылки quick menu.
• cm-qm-name — когда quick menu в режиме правки, навешивается на ссылки (пункты) в меню. Используется для передачи данных о секции в quick box (по данному классу выполняется поиск ссылки).
• cm-update-item — вешается на ссылку редактирования пункта quick menu. При нажатии открывается диалог с параметрами пункта.

Image gallery¶

• cm-image-gallery — инициализирует галерею изображений.
• cm-previewer — вешается на ссылку, например, под изображением и при нажатии открывает большую по размеру картинку. Переход на другую страницу при этом не происходит. Картинка указывается в параметре href.

<a id="det_img_link_1553_140" data-ca-image-id="preview[product_images]" class="cm-previewer" href="/professional/images/detailed/0/detailed_image_1386.jpg" title="img.jpg">
    <img class=" "  id="det_img_1553_140" src="/professional/images/thumbnails/0/120/img.jpg" width="120"  alt="img"  border="0" />
</a>

• cm-thumbnails-mini — устанавливается на картинку в минигалерее в детальной странице продукта. Используется для идентификации миниатюры как таковой, а также для установки класса active при клике на изображение (со всех элементов с классом cm-thumbnails-mini снимается класс active).

Design & Translate Mode¶

• cm-cur-template — устанавливаестся на текущий шаблон при редактировании его в Design mode. Затем используется для идентификации смены редактируемого шаблона. Используется в Design mode only.
• cm-item-modified — устанавливается на изменённый в Design mode шаблон. Если в редакторе происходит переход в другой шаблон (в дереве шаблонов в левой части редактора) и навешен этот класс, то будет показано сообщение о наличии изменений.
• cm-lang-link — вешается на ссылку, при клике на которую происходит смена языка. Язык указывается в атрибуте name (формат короткий – две буквы).
• cm-select-list — навешивается на выпадающий список для выбора языка. Используется как контейнер для элементов с классом cm-lang-link. Пример: список с языками, когда открыто окно для перевода фразы в Translate mode.
• cm-live-edit — вешается на элемент, которому можно задать перевод в Translate mode.

Quantity input¶

• cm-decrease — должен использоваться в контейнере * cm-value-changer. Навешивается на ссылку, которая должна уменьшать значение инпута. Уменьшает значение инпута на 1. Значение всегда выставляется больше или равное нулю. Значение, не являющееся типом integer будет заменено на 0. Пример: стрелки вверх/вниз вокруг поля quantity в пользовательской части.
• cm-increase — должен использоваться в контейнере cm-value-changer. Навешивается на элемент, по клике на которому должно увеличиваться значение инпута. Увеличивает значение инпута на 1. Значение, не являющееся типом integer будет заменено на 0.
• cm-value-changer — родительский контейнер для инпута и кнопок с классами cm-increase и cm-decrease. Пример: поле quantity у продукта в кастомерке.

Node cloning¶

• cm-first-sibling — строку с данным классом нельзя удалить, значек удаления дизейблится.
• cm-image-field — при клонировании элементов, в которых есть изображения, отвечает за выбор регулярного выражения, чтобы был верный инкремент номера изображения. Пример: клонирование опций продукта. У каждой опции могут быть изображения. На поля, связанные с изображениями навешен этот класс.

File uploader [ADMIN]¶

• cm-fu-file — в загрузчке файлов вешается на блок с загруженным файлом (в блоке имя и крестик для удаления). Если файла нет, то блок прячется. В противном случае, отображается.
• cm-fu-no-file — вешается на элемент, который предоставляет возможность загрузки файлов. В качестве примера может служить любой загрузчик файлов.
• cm-instant-upload — вешается на элемент, при клике на который вызывается диалог выбора файла и тут же начинается его загрузка. Должен сопровождаться обязательным data-аттрибутом data-ca-href (URL для загрузки). А так же необязательными — data-ca-target-id (id элементов, содержание которых нужно обновить после AJAX-запроса) и data-ca-placeholder (id элемента img, куда нужно вставить URL к загруженному файлу — в этом случае ajax-запрос должен возвращать параметр placeholder с URL картинки).

Wrappers¶

• cm-hidden-wrapper — устанавливаестся на wrapper, который нужно спрятать при отсутствии контента. т. е. если содержимое блока пустое – wrapper не отображается.

Pagination¶

• cm-history — информация о предыдущем состоянии после нажатия на ссылку с таким форматом будет храниться в плагине истории в jQuery. Пример: products pagination.
• cm-pagination-container — контейнер, в котором располагаются результаты выборки с навигацией по страницам. Используется для скроллинга после AJAX-запроса
• cm-back-link — возращает на предыдущую страницу, работает через history.

Products ajax-updated content¶

• cm-reload — при смене опций навешивается на изменённый блок. Затем обновляются все элементы, имеющие данный класс. Пример из common/product_data.tpl.

{********************** Price *********************}
{capture name="price_`$obj_id`"}
    <span class="cm-reload-{$obj_prefix}{$obj_id} price-update" id="price_update_{$obj_prefix}{$obj_id}">
    ...

Таким образом, каждый раз при обновлении при смене опции цена будет обновлятся.

Customization mode¶

• cm-template-box — навешивается на контейнер, который представлен некоторым шаблоном в Customization mode. Используется для работы с шаблоном и определения уровня вложенности шаблонов.
• cm-template-icon — навешивается на иконку для редактирования шаблона при включённом Customization mode. При наведении на неё мыши, подсвечивается область действия шаблона (через cm-template-over). При покидании подсветка снимается.
• cm-template-over — устанавливается на контейнер, который отображается с помощью выделенного шаблона (курсор наведён на иконку шаблона – {{cm-template-icon). Используется для подсветки области выделенного шаблона, когда Storefront в Customization mode.

Переключение блоков¶

Иногда требуется возможность дисейблить элементы, в зависимости от какого-то переключателя. Для этого существует набор микроформатов cm-bs-* (block switch). Для его правильной работы нужна следующая разметка:

content
— overlay
    <div class="cm-bs-container">
        <input type="radio" class="cm-bs-trigger">
        <div class="cm-bs-block">
            content2
            <div class="cm-bs-off"></div> — overlay
        </div>
    </div>
</div>

• cm-bs-group — обозначает группу блоков, таких групп может быть несколько и блоки внутри них будут переключаться отдельно.
• cm-bs-container — контейнер, который содержит в себе переключатель и контент, который нужно отображать/дисейблить.
• cm-bs-trigger — вешается на переключатель (radio button).
• cm-bs-block — вешается на блок, внутри которого находится контент, который нужно отображать/дисейблить.
• сm-bs-off — оверлей, отобразающийся поверх задисейбленного контента.

Deprecated¶

cm-check-items-group cm-dashed-box сm-display-radio cm-img-preview cm-item-group cm-picker cm-picker-value сm-picker-value-description cm-picker-options-container cm-popup-bg cm-popup-content-footer cm-product-details cm-tabs cm-block-*

cm-sortable-items (удалили 3.0.x) cm-group-box (удалили 3.0.x) cm-decline-group (удалили 3.0.x) cm-list-box (удалили 3.0.x)

cm-buttons-floating (удалили 4.0.x) cm-buttons-placeholder (удалили 4.0.x)

cm-delete-file (удалили 4.0.x) cm-download (удалили 4.0.x) cm-passed (удалили 4.0.x)

cm-cur-item (удалили 4.0.x) cm-generate-image (удалили 4.2.x)