Использование HTML5 data-* атрибутов для передачи дополнительных данных

HTML5 позволяет использовать атрибуты data-* для хранения пользовательских данных. При этом документ считается валидным.

Правильное название атрибутов: data-ca-*

Чтобы избежать пересечений с третьесторонними библиотеками, атрибуты в карте должны начинаться с префикса data-ca-* (CS-Cart Attribute).

Примеры основных атрибутов карты с пояснениями:

  • data-ca-target-id

    Указывается id(s) элемента(ов) для загрузки контента через cm-ajax:

    <a class="cm-ajax" data-ca-target-id="cart_items,checkout_totals,cart_status*,checkout_steps,checkout_cart" href="{""|fn_url}"><i class="icon-cancel-circle"></i></a>
    

    Или id div элемента для отображения диалога:

    <a class="cm-dialog-opener" data-ca-target-id="content_{$id}" id="opener_{$id}">Edit</a>
    
  • data-ca-target-form

    Указывается имя формы или её id, для обозначения формы, которая будет отправлена (cm-submit) либо проверена на выбранные элементы (cm-process-items) при клике по данному элементу. Работает в связке с cm-submit и cm-process-items (см. статью о микроформатах).

  • data-ca-result-id

    Id input элемента в который будет сохранен результат (например, выбранные ids продуктов в пикере, или company_id).

  • data-ca-target-url

    Указывается url для загрузки данных с помощью AJAX.

  • data-ca-scroll

    Указывается селектор элемента, до которого нужно прокрутить экран после AJAX-запроса. Вешается на AJAX-ссылку.

Общие правила наименования

1. Если идет работа с AJAX, отправкой/получением данных, используйте target

  • data-ca-target-form
  • data-ca-target-id
  • data-ca-target-url

2. Если идет обращение к конкретному элементу через его id, то добавляйте id

  • data-ca-disable-id
  • data-ca-hide-id
  • data-ca-external-click-id
  • data-ca-external-focus-id

3. Используйте дополнительные префиксы

  • data-ca-bm-object-id - Block Manager
  • data-ca-qm-item - Quick Menu
  • data-ca-te-template - Template Editor

4. Улучшайте читаемость

Не используйте короткие названия и сокращения, лучше обозначьте атрибут полностью, например data-ca-external-click-id.

Получение значения атрибута в JS

Ещё раз смотрим документацию jQuery.

frm = $('#' + holder.data('caTargetForm'));
...
$('a[data-ca-action]', $('#' + target_id)).each(function() {
...