четверг, 10 октября 2013 г.

Сокрытие полей адресов в miniShop2

Позавчера столкнулся с такой задачей и по незнанию MODX, а тем более компанента интернет-магазина miniShop2 подзастрял поначалу. У опытных пользователей эта "задачка" вряд ли способна вызвать какие-либо затруднения, а вот новичкам вроде меня, думаю, будет полезно, особенно если  в область работы в web они попали случайно. Пару часов ползанья по чанкам/сниппетам/форумам/блогам и у меня вырисовалось решение и тут я вспомнил, что когда то пытался что то о MODX писать, да и решения данной проблемы я не нашёл, поэтому спешу поделиться им с вами.

Вот и формулировка:
Необходимо при выборе некоторых способов доставки делать видимыми, или не видимыми некоторый перечень полей, заполняемых клиентов.


Постановка задачи:
Покупатель при оформлении заказа в корзине (tpl.msCart.outer) , которое осуществляется через  чанк tpl.msOrder.outer  выбирает один из способов доставки (способы доставки задаются в пункте miniShop2 – Настройки – Варианты доставки). Естественно, что не для всех способов доставки нужно вводить адрес (например самовывоз, встреча в метро) , поэтому при выборе таких вариантов, поля адреса доставки должны скрываться.

Вкратце:

1. Вот чанк с формой заказа:  tpl.msOrder.outer
40 строка - плейсхолдер с вариантами доставки
44 строка блок с полями для ввода адресов
2. Чанк в котором формируются варианты доставок: tpl.msOrder.delivery 
3. В input добавляю обработчик 
onclick="if(this.value=='1' || this.value=='5') {document.getElementById('adressfields').style.display='none'} else {document.getElementById('adressfields').style.display='block'}"
что бы скрыть опции с id 1 и 5

Подробное решение:

Так как поля адреса доставки располагаются в одном блоке, достаточно скрывать блок посредством стилевого свойства “display: none” при некоторых отмеченных чекбоксах/radio. Первым делом стоит присвоить идентификатор блоку, подлежащему сокрытию, т.е. блоку содержащему поля ввода адресов доставки. Форма оформления заказа находится в чанке tpl.msOrder.outer (44 строка) , присваиваем ей “id=’adressfields’”.
Теперь необходимо обработать событие выбора чекбокса/radio и т.к. в корзине выбор способа доставки находится выше полей для адресов, просто поднимаемся на несколько строк выше в том же самом чанке  tpl.msOrder.outer (37). Плейсхолдер [[+deliveries]] говорит нам идти в другой чанк для того, что бы посмотреть на формирование чекбоксов/radio, что мы собственно и сделаем, перейдя в чак tpl.msOrder.delivery.
Данный чанк (tpl.msOrder.delivery) содержит всего 5 строк:
<label class="radio delivery">
    <input type="radio" name="delivery" value="[[+id]]" id="delivery_[[+id]]" data-payments='[[+payments]]' [[+checked]] >
[[+logo:default=`[[+name]]`]] <!--&mdash; <i>[[+price]] [[%ms2_frontend_currency]]</i>-->
<p><small>[[+description]]</small></p>
</label>
Обратите внимание, что значение у чекбоксов берётся из id вариантов доставки (value="[[+id]]"), которые, как упоминалось выше,  можно просмотреть здесь (miniShop2 – Настройки – Варианты доставки).
Добавим обработку события onclick, которое выглядит так (пусть необходимо скрыть поля адресов при выборе способов доставки с индексами 1 и 5):
onclick="if(this.value=='1' || this.value=='5') {document.getElementById('adressfields').style.display='none'}
else {document.getElementById('adressfields').style.display='block'}"
Таким образом,  можно при выборе некоторых способов доставки делать видимыми, или не видимыми некоторый перечень полей, заполняемых клиентов. Этот способ применим к любым другим опциям при оформлении заказа в корзине.