Готовим штатное оформление заказа Битрикс к ФЗ-152

С 1 июля в силу вступает новый федеральный закон под цифрой 152 «О персональных данных». Что это за закон и какие там штрафы читаем на сайте Контура или спрашиваем юристов. Главный нюанс закона в том, что если сайт принимает персональные данные от пользователей, то у вас должен быть соответствующий документ регламентирующий их обработку в рамках вашей компании и соответственно галочка в любой форме, которая их принимает, которая указывает что пользователь с ними согласился.

Самой сложной формой в Битрикс является Форма оформления заказа. Вот в нее мы и будем внедрять наш чекбокс, а заодно еще и соглашение с договором-офертой. Если данные две галки будут сняты, то пользователь не сможет оформить заказ. Делать будем это просто и без особых заморочек.

Первое

Внесем небольшие изменения в template.php, а точнее добавим:

<div id="mitAdditionalOptions">
    <p><input type="checkbox" id="mitOfferta"/><label><?=Loc::getMessage('MIT_OFFERTA')?></label> <a href="#"><?=Loc::getMessage('MIT_OFFERTA_LINK')?></a></p>
    <p><input type="checkbox" id="mitFZ"/><label><?=Loc::getMessage('MIT_OFFERTA')?></label> <a href="#"><?=Loc::getMessage('MIT_FZ_LINK')?></a></p>
</div>

Добавляем сразу после комментариев:

<!--    ORDER SAVE BLOCK   -->

Таким образом мы чекбоксы разместим аккуратно перед кнопкой «Оформить заказ». Соответственно классы и идентификаторы используем свои.

Второе

Наверное, вы заметили, что в шаблон мы добавили языковые строки, которые нам теперь надо объявить. Идем в директорию /lang/ru/ и добавляем в template.php:

$MESS["MIT_OFFERTA"] = "Я согласен с";
$MESS["MIT_OFFERTA_LINK"] = "договором-офертой";
$MESS["MIT_FZ_LINK"] = "условием обработки персональных данных";

Третье

Тут начинается самое сложное. Во-первых нам нужно дописать методы, которые будут у нас управлять чекбоксами и кнопкой «Оформить заказ». Соответственно идем в файлик order_ajax.js и в конец объекта (ну или куда вам там удобно) добавляем следующий метод:

initAdditionalOptions: function() {
    var offerta = BX('mitOfferta'),
        fz = BX('mitFZ');

    this.controlAdditionalOptions();
    BX.bind(offerta, 'change', BX.proxy(this.controlAdditionalOptions, this));
    BX.bind(fz, 'change', BX.proxy(this.controlAdditionalOptions, this));
},

Данным методом мы при старте проверяем стоят ли галочки в наших чекбоксах и соответственно на каждый чекбокс вешаем событие повторной проверки. Теперь необходимо дописать сам метод проверки:

controlAdditionalOptions: function() {
    var offerta = BX('mitOfferta'),
        fz = BX('mitFZ');

    if (offerta.checked == true && fz.checked == true) {
        BX.bind(this.orderSaveBlockNode.querySelector('a'), 'click', BX.proxy(this.clickOrderSaveAction, this));
        BX.addClass(this.orderSaveBlockNode.querySelector('a'), 'active');
    }
    else {
        BX.unbind(this.orderSaveBlockNode.querySelector('a'), 'click', BX.proxy(this.clickOrderSaveAction, this));
        BX.removeClass(this.orderSaveBlockNode.querySelector('a'), 'active');
    }
}

Метод проверяет включены ли оба чекбокса и в случае если это правда, то на кнопку «Оформить заказ» вешает событие клика и штатную callback-функцию завершения оформления заказа. Так же мы сделали чтобы на кнопку вешался класс active который позволит нам с помощью CSS менять ее внешний вид.

Если же условие ложное то мы соответственно злостно отбираем у кнопки событие и класс.

Но все это не будет работать, пока мы не добавим наш первый метод в общую инициализацию объекта. Идет в метод init и в конце него дописываем

this.initAdditionalOptions();

Так же на 1204 строке в методе bindEvent можно закоментировать или удалить, а именно:

BX.bind(this.orderSaveBlockNode.querySelector('a'), 'click', BX.proxy(this.clickOrderSaveAction, this));

Собственно на этом все.