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

В платформе Tygh применены так называемые микроформаты для задания определенной функциональности html элементам.

Микроформат представляет из себя набор CSS классов, по типу применения объединенных в группы. Существует несколько групп микроформатов, рассмотрим их по отдельности.

Формы

Валидатор

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

<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 — вешается на таб, в котором нужно скрыть кнопки с классом.

Другие html элементы

Ссылки

Для ссылок доступен микроформат, позволяющий выполнять 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-combination — используется для скрытия/отображения контейнера с отображением состояния контейнера. Используется, например, для кнопки advanced search в админке, для деревьев (категории, страницы) и т.п. Под отображением состояния понимается показывание различной картинки в зависимости от состояния контейнера. Возможны 2 варианта.

Вариант 1

<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>

Для группировки используется ID контейнера, дополнительные элементы используют этот ID с различными префиксами. Существуют 3 типа префиксов:

  • on_ — отображает контейнер при клике;
  • off_ — скрывает контейнер при клике; (минус обычно)
  • sw_ — для элемента (ссылки обычно), переключающей состояние контейнера при каждом клике

Вариант 2

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

Тут картинки меняются путем смены класса у переключателя (см. sw_ выше).

  • cm-combo-on — (depricated) раньше для картинки, отображающей контейнер (плюс обычно).
  • cm-combo-off — (depricated) вместо него используется класс open. Показывает, что блок раскрыт. Раньше для картинки, скрывающей контейнер (минус обычно)

Вместо cm-combo-on/cm-combo-off используется класс open, который определяет раскрыт или закрыт блок. С помощью данного класса теперь изменяется вид иконок.

  • cm-combo-checkbox — значение данного чекбокса в случае, если он выбран, будет занесено как вариант в комбо-бокс с классом cm-combo-select (например, выбор доступных лэйаутов в админке, на каждый из которых навешен этот класс, а затем выбор активного). Последняя отключённая опция остаётся в комбо-боксе. Пример: Settings: Appearance → Products list layouts settings.
  • cm-combo-select — в комбо-бокс с таким классом будут загружены опции всех чекнутых элементов с классом cm-combo-checkbox (например, выбор доступных лэйаутов в админке, а затем выбор активного в селекте с этим классом). Последняя отключённая опция остаётся в комбо-боксе. См. combo-checkbox.
  • cm-toggle-checkbox — вешается на чекбокс, который должен управлять состоянием активности других контролов (все они должны иметь класс cm-toggle-element).
  • cm-toggle-element — вешается на элемент, состоянием активности которого должен управлять чекбокс с классом cm-toggle-checkbox.
  • cm-uncheck — используется вместе с cm-combination, переключает состояние checkbox, который определяется с помощью id cm-combination.
  • cm-switch-availability — переключает состяние input элементов (checkbox, radio, text), которые связаны с cm-switch-availability через id = "sw_elem", где elemid элемента, в котором расположены checkbox и radio.

Если нужно, чтобы элемент, по которому кликаем (на котором висит cm-switch-availability), переключал, когда он активен (checked="checked") нужно использовать cm-switch-inverse.

Если нужно, чтобы скрывался/раскрывался блок с checkbox и radio, нужно использовать cm-switch-visibility.

Если используется не для checkbox и radio, то за состояние отвечает cm-switched.

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

<input type="checkbox" id="sw_company_redirect" checked="checked" class="cm-switch-availability cm-switch-inverse cm-switch-visibility" />
  • cm-select-with-input-key — связывает селект с текстовым полем. При изменении значения в селекте, его значение заносится в текстовое поле и поле становится disabled. Используется в локациях при выборе dispatch.

Переключение нескольких комбинаций

Для переключения нескольких комбинаций (например отображение/скрытие всех элементов дерева) используется микроформат cm-combinations.

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

ID в данном случае используется ТОЛЬКО для группировки этих двух элементов. Так же существует возможность группировать комбинации (например, несколько деревьев на странице) — нужно добавить суффикс:

<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>

В этом случае при нажатии на верхние картинки будут открыты/закрыты комбинации только из группы “a”.

Сохранение состояния

  • cm-save-state — для сохранения состояния контейнера нужно на каждый элемент, открывающий/закрывающий его, навесить класс cm-save-state. В этом случае будет ставиться кука, завязанная на IDD этого элемента при изменении его состояния. Состояние по-умолчанию — “контейнер скрыт”. Если нужно состояние по-умолчанию — “контейнер отображается”, то дополнительно надо навешивать микроформат cm-ss-reverse. Проверять выставленность куки и скрывать элементы надо в темплейте.
  • cm-save-fields — значениея полей контейнера с таким классом будут сериализованы в массив и восстановлены после AJAX-запроса, если контейнер обновился.

Табы

  • 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. При нажатии открывается диалог с параметрами пункта.

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 не отображается.

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)