external_pickup_demo.js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
(function($) {
  MyExternalPickup = (function() {
    function MyExternalPickup(deliveryId, fieldId) {
      this.deliveryId = deliveryId;
      this.fieldId = fieldId;
      this.bind();
      this.prependDialog();
    }

    MyExternalPickup.prototype.input = function() {
      return this.element || (this.element = $(this.inputSelector));
    };

    MyExternalPickup.prototype.bind = function() {
      $(document).on('click', '.postbox-selector', (function(_this) {
        return function(e) {
          var price = 0;
          var fieldValue = ''
          if ($(e.target).val() == 1) {
            price = 100;
            fieldValue = 'Москва';
          } else {
            price = 150;
            fieldValue = 'Зеленоград';
          }
          _this.set(price, fieldValue)
          $('#pickup-dialog-modal').modal('hide')
        };
      })(this));      
      $(document).on('click', '#select-postbox-' + this.deliveryId, (function(_this) {
        return function(e) {
          // При выборе постамата рассчитываем стоимость доставки и устанавливаем новые значения
          e.preventDefault();
          _this.ensureSelected();
          $('#pickup-dialog-modal').modal('show')
        };
      })(this));
      return $(document).on('inited:insales:checkout:deliveries', (function(_this) {
        return function(e) {
          data = e.originalEvent.detail
          var myDelivery, myFiledsValues;
          myDelivery = data.deliveries[_this.deliveryId];
          if (!myDelivery || !myDelivery.available) {
            return;
          }
          _this.order = data.order;
          _this.inputSelector = myDelivery.html_id;
          if (_this.inited) {
            // Если способ доставки уже инициализирован, то просто делаем update без параметров для перерисовки стоимости доставки и т.д.
            return _this.input().trigger('update:insales:delivery');
          }
          
          // При вервой загрузке пытаемся найти значения доп полей в заказе
          myFiledsValues = $.grep(data.order.fields_values, function(v, k) {
            return v.field_id === this.fieldId;
          });
          // Устанавливаем стоимость доставки, доп поля, описание в формате html и флаг внешнего способа доставки
          _this.input().trigger('update:insales:delivery', {
            price: myDelivery.price,
            fields_values: myFiledsValues,
            is_external: true,
            description_html: "</br><a href='#'' id='select-postbox-" + _this.deliveryId + "'>Выберите постамат</a>"
          });
          return _this.inited = true;
        };
      })(this));
    };

    MyExternalPickup.prototype.prependDialog = function() {
      var dialogTemplate = " \
      <div id='pickup-dialog-container'> \
        <div class='modal fade' id='pickup-dialog-modal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel'> \
          <div class='modal-dialog' role='document'> \
            <div class='modal-content'> \
              <div class='modal-header'> \
                <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button> \
                <h4 class='modal-title' id='exampleModalLabel'>Постаматы</h4> \
              </div> \
              <div class='modal-body'> \
                <form> \
                  <div class='form-group'> \
                    <div class='radio'> \
                      <label> \
                      <input type='radio' class='postbox-selector' name='postbox[]' value='1'> \
                      Постамат 1, Адрес: Москва, цена 100 \
                      </label> \
                    </div> \
                    <div class='radio'> \
                      <label> \
                      <input type='radio' class='postbox-selector' name='postbox[]' value='2'> \
                      Постамат 2, Адрес: Зеленоград, цена 150 \
                      </label> \
                    </div> \
                  </div> \
                </form> \
              </div> \
              <div class='modal-footer'> \
                <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> \
                <button type='button' class='btn btn-primary'>Send message</button> \
              </div> \
            </div> \
          </div> \
        </div> \
      </div> \
      ";
      if (!$('body > #pickup-dialog-container').length) {
        $('body').prepend(dialogTemplate);
      }
    }

    MyExternalPickup.prototype.set = function(price, fieldValue) {
      return this.input().trigger('update:insales:delivery', {
        price: price,
        fields_values: [
          {
            field_id: this.fieldId,
            value: fieldValue
          }
        ]
      });
    };

    MyExternalPickup.prototype.ensureSelected = function() {
      if (!this.input().is(':checked')) {
        return this.input().click();
      }
    };
    return MyExternalPickup
  })();
  new MyExternalPickup(314595, 2436162);
})(jQuery);
</script>