Изменение поля доставки с 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: Добавил изменения, что бы запоминались выбранные опции оплаты
Dolce
13 февраля 2021, 19:07
modx.pro
5
2 222
+5

Комментарии: 2

Stanislavsky
16 февраля 2021, 14:10
0
А не проще просто скрыть радио элементы и просто через селект триггерить change? Сразу отпадет желание добавлять кастомный файл js
    Dolce
    16 февраля 2021, 14:20
    0
    Возможно проще, но как по мне это костыльно — вместо того, что бы работать напрямую, мы скрываем нативный блок и на нем триггерим событие с другого элемента. Я не любитель такого подхода, но это кому как, хорошо когда есть выбор, как реализовывать, а решать уже вам
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    2