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