Использование 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 Managerdata-ca-qm-item
- Quick Menudata-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() {
...