Изменение поля доставки с radiobutton на select в minishop2
Всем привет. В моем дизайне способ доставки выбирается при помощи select’ов, а в стандартном чанке minishop2 за это отвечает input radio
В сообществе посоветовали сделать копию стандартных скриптов
Вот мой кусок моего чанка с разметкой
В сообществе посоветовали сделать копию стандартных скриптов
("assets/components/minishop2/js/web/default.js")
В настройках прописать свой путь до кастомных скриптов("assets/components/minishop2/js/web/custom.js")
И там уже переписать js под select. Что я и сделал и хочу поделиться решением, возможно кому-то это будет полезным.Вот мой кусок моего чанка с разметкой
<div class="order__body-form form">
<div class="select select_size_l select_width_available contact-form__input">
<span class="select__name">Тип доставки</span>
<select class="select__control" name="block_delivery">
{foreach $deliveries as $delivery index=$index}
{var $checked = !($order.delivery in keys $deliveries) && $index == 0 || $delivery.id ==
$order.delivery}
<option class="select__option" name="delivery" value="{$delivery.id}" id="delivery_{$delivery.id}"
data-payments="{$delivery.payments | json_encode}" {$checked ? 'selected' : '' }>{$delivery.name}
</option>
</optgroup>
{/foreach}
</select>
</div>
{foreach ['city','officeNumber'] as $field}
<div class="form-group row input-parent">
<label class="col-md-4 col-form-label" for="{$field}">
{('ms2_frontend_' ~ $field) | lexicon} <span class="required-star">*</span>
</label>
<div class="col-md-8">
<input type="text" id="{$field}" placeholder="{('ms2_frontend_' ~ $field) | lexicon}" name="{$field}"
value="{$form[$field]}" class="form-control{($field in list $errors) ? ' error' : ''}">
</div>
</div>
{/foreach}
</div>
А вот две функции которые я поправил в JS скриптах:setup: function () {
miniShop2.Order.order = "#msOrder";
miniShop2.Order.deliveries = "#deliveries";
miniShop2.Order.payments = "#payments";
miniShop2.Order.deliveryInput = 'select[name="block_delivery"]';
miniShop2.Order.options = 'option[name="delivery"]';
miniShop2.Order.inputParent = ".input-parent";
miniShop2.Order.paymentInput = 'input[name="payment"]';
miniShop2.Order.paymentInputUniquePrefix = "input#payment_";
miniShop2.Order.deliveryInputUniquePrefix = "option#delivery_";
miniShop2.Order.orderCost = "#ms2_order_cost";
miniShop2.Order.cartCost = "#ms2_order_cart_cost";
miniShop2.Order.deliveryCost = "#ms2_order_delivery_cost";
},
initialize: function () {
miniShop2.Order.setup();
if ($(miniShop2.Order.order).length) {
miniShop2.$doc
.on(
"click",
miniShop2.Order.order +
' [name="' +
miniShop2.actionName +
'"][value="order/clean"]',
function (e) {
miniShop2.Order.clean();
e.preventDefault();
}
)
.on(
"change",
miniShop2.Order.order +
" input," +
miniShop2.Order.order +
" option," +
miniShop2.Order.order +
" textarea",
function () {
console.log("-> here!", $(this));
var $this = $(this);
var key = $this.attr("name");
var value = $this.val();
miniShop2.Order.add(key, value);
}
);
$(miniShop2.Order.deliveryInput).on("change", (e) => {
$option = $(e.target).find("option:selected");
$option.trigger("change");
});
var $deliveryInputChecked = $(
miniShop2.Order.options + ":selected",
miniShop2.Order.order
);
$deliveryInputChecked.trigger("change");
}
},
UPD: Добавил изменения, что бы запоминались выбранные опции оплаты Комментарии: 2
А не проще просто скрыть радио элементы и просто через селект триггерить change? Сразу отпадет желание добавлять кастомный файл js
Возможно проще, но как по мне это костыльно — вместо того, что бы работать напрямую, мы скрываем нативный блок и на нем триггерим событие с другого элемента. Я не любитель такого подхода, но это кому как, хорошо когда есть выбор, как реализовывать, а решать уже вам
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.