{"draftJsState":{"blocks":[{"data":{"image":{"id":"5faadc3c7935977d9747f803"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4grlc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проблема внедрения верстки в компонент оформления заказа заключается в том, что html код здесь создается динамически на лету с помощью javascript кода, написанного на библиотеке BX - собственной разработке компании 1С-Битрикс.","type":"unstyled","key":"92s4o"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":5,"offset":50}],"inlineStyleRanges":[],"text":"Итак, мы копируем шаблон компонента в свой шаблон сайта в папке local и открываем template.php. Здесь мы увидим только заготовки блоков заказа. Да мы можем их менять местами друг с другом, но при этом дизайн самих полей не изменится, изменить порядок полей здесь мы не можем.","type":"unstyled","key":"bnv59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вся верстка полей создается динамически и обоснованно этот тем, что блоки зависят друг от друга. Доставка зависит от местоположения - то есть города покупателя, способ оплаты может быть привязан к определенной службе доставке. Также можно настроить, какие именно поля заполнять в зависимости от разных способов доставки или оплаты.","type":"unstyled","key":"b11l8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То есть оформление заказа происходит поэтапно, хоть и на одной странице, и каждый блок формируется снова при изменении данных предыдущего блока. Но заказчики хотят видеть простую и понятную форму оформления заказа со всеми полями сразу, хотя она и будет длинной и не будет входить в один экран монитора или телефона.","type":"unstyled","key":"6voou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому нам надо:","type":"unstyled","key":"b0ds6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переставить блоки как в верстке","type":"unordered-list-item","key":"brr9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"убрать скрытие блоков и кнопки перемещения между блоками","type":"unordered-list-item","key":"3s6po"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"перенести поля из одного блока в другой по верстке","type":"unordered-list-item","key":"92qji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"добавить верстку в блоки и поля - классы стилей, дополнительные div, label","type":"unordered-list-item","key":"4iuan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"проверить работоспособность оформления заказа","type":"unordered-list-item","key":"bfu18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"исправить обработчики событий, если они не реагируют на новую верстку","type":"unordered-list-item","key":"94dh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"протестировать разные варианты оформления заказа","type":"unordered-list-item","key":"7d341"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"lubi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":62,"offset":59,"style":"BOLD"},{"length":88,"offset":122,"style":"BOLD"},{"length":45,"offset":211,"style":"BOLD"},{"length":47,"offset":257,"style":"BOLD"},{"length":69,"offset":305,"style":"BOLD"},{"length":60,"offset":375,"style":"BOLD"},{"length":133,"offset":584,"style":"BOLD"}],"text":"В файле template.php блоки заказа отмечены комментариями: \n - корзина заказа - таблица товаров\n - выбор типа плательщика и ввод местоположения - города покупателя\n выбор службы доставки\n выбор способа оплаты\n форма с полями для ввода данных покупателя\n итог и кнопка подтверждения заказа\n\nТак как нам надо сделать все блоки открытым сразу, то кнопки далее или изменить под каждым блоком нам не нужны, можно удалить в каждом блоке код:\n\n

\n\nПереставляем блоки как нужно по верстке и больше ничего в этом файле мы сделать не можем. далее находим в шаблоне файл order_ajax.js\n\nРассмотрим его логику:\n\nСоздается класс BX.Sale.OrderAjaxComponent, объект которого потом будет создан в template.php\n\nПри создании объекта этого класса будет вызвана функция init и в ней будут вызываться функции для заполнения блоков.\n\nПервую интересную функцию мы видим ","type":"unstyled","key":"fqqu9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"},{"length":82,"offset":31,"style":"BOLD"},{"length":45,"offset":114,"style":"BOLD"},{"length":39,"offset":160,"style":"BOLD"},{"length":2,"offset":200,"style":"BOLD"}],"text":"initFirstSection: function() {\nvar firstSection = this.orderBlockNode.querySelector('.bx-soa-section.bx-active');\n/*BX.addClass(firstSection, 'bx-selected');*/\nthis.activeSectionId = firstSection.id;\n},","type":"blockquote","key":"4msgo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"вторую строчку надо закомментировать, чтобы все блоки были активны, а не только первый.\n\nДалее обратим внимание на функцию this.editOrder();\n\nВо-первых, надо удалить код, который скрывает блок доставки, если доставки выдали ошибки вычислений:","type":"unstyled","key":"e5cjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"},{"length":52,"offset":41,"style":"BOLD"},{"length":51,"offset":94,"style":"BOLD"},{"length":1,"offset":146,"style":"BOLD"},{"length":4,"offset":148,"style":"BOLD"},{"length":1,"offset":153,"style":"BOLD"},{"length":54,"offset":155,"style":"BOLD"},{"length":49,"offset":210,"style":"BOLD"},{"length":3,"offset":260,"style":"BOLD"}],"text":"/*if (this.result.DELIVERY.length > 0) {\n BX.addClass(this.deliveryBlockNode, 'bx-active');\n this.deliveryBlockNode.removeAttribute('style');\n}\nelse\n{\n BX.removeClass(this.deliveryBlockNode, 'bx-active');\n this.deliveryBlockNode.style.display = 'none';\n}*/","type":"blockquote","key":"aqto0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем в этой функции вызывается создание каждого блока в цикле:","type":"unstyled","key":"2f26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":104,"offset":0,"style":"BOLD"},{"length":1,"offset":105,"style":"BOLD"},{"length":31,"offset":107,"style":"BOLD"},{"length":1,"offset":139,"style":"BOLD"},{"length":30,"offset":141,"style":"BOLD"},{"length":1,"offset":172,"style":"BOLD"},{"length":1,"offset":174,"style":"BOLD"}],"text":"var sections = this.orderBlockNode.querySelectorAll('.bx-soa-section.bx-active'), i; for (i in sections)\n{\nif (sections.hasOwnProperty(i))\n{\nthis.editSection(sections[i]);\n}\n}","type":"blockquote","key":"cuoms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотрим функцию this.editSection(sections[i]);","type":"unstyled","key":"349m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых уберем проверку, что если в настройках компонента выключена галочка \"регистрировать вместе с оформлением заказа\", то будет предложено сначала авторизоваться, а все другие блоки будут скрыты.","type":"unstyled","key":"ao2vq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":106,"offset":0,"style":"BOLD"},{"length":31,"offset":107,"style":"BOLD"},{"length":47,"offset":139,"style":"BOLD"},{"length":27,"offset":187,"style":"BOLD"}],"text":"if (this.result.SHOW_AUTH && section.id != this.authBlockNode.id && section.id != this.basketBlockNode.id)\nsection.style.display = 'none';\nelse if (section.id != this.pickUpBlockNode.id)\nsection.style.display = '';","type":"blockquote","key":"4cr24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-вторых, видим что проверяется, активен ли блок var active = section.id == this.activeSectionId,\n\nНам надо, чтобы все блоки были активны, поэтому заменяем этот код на var active = true,\n\nДалее отключаем реагирование на клик по заголовку блока:","type":"unstyled","key":"dgfuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"},{"length":26,"offset":27,"style":"BOLD"},{"length":1,"offset":54,"style":"BOLD"},{"length":51,"offset":56,"style":"BOLD"},{"length":41,"offset":108,"style":"BOLD"},{"length":60,"offset":150,"style":"BOLD"},{"length":10,"offset":211,"style":"BOLD"},{"length":1,"offset":222,"style":"BOLD"},{"length":4,"offset":224,"style":"BOLD"},{"length":1,"offset":229,"style":"BOLD"},{"length":62,"offset":231,"style":"BOLD"},{"length":57,"offset":294,"style":"BOLD"},{"length":77,"offset":352,"style":"BOLD"},{"length":3,"offset":430,"style":"BOLD"}],"text":"/*BX.unbindAll(titleNode);\nif (this.result.SHOW_AUTH)\n{\nBX.bind(titleNode, 'click', BX.delegate(function(){\nthis.animateScrollTo(this.authBlockNode);\nthis.addAnimationEffect(this.authBlockNode, 'bx-step-good');\n}, this));\n}\nelse\n{\nBX.bind(titleNode, 'click', BX.proxy(this.showByClick, this));\neditButton = titleNode.querySelector('.bx-soa-editstep');\neditButton && BX.bind(editButton, 'click', BX.proxy(this.showByClick, this));\n}*/","type":"blockquote","key":"a8s2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nи далее видим, что вызываются функции для каждого блока:","type":"unstyled","key":"7d2ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"},{"length":1,"offset":20,"style":"BOLD"},{"length":27,"offset":22,"style":"BOLD"},{"length":21,"offset":51,"style":"BOLD"},{"length":6,"offset":73,"style":"BOLD"},{"length":29,"offset":80,"style":"BOLD"},{"length":29,"offset":110,"style":"BOLD"},{"length":6,"offset":140,"style":"BOLD"},{"length":29,"offset":147,"style":"BOLD"},{"length":29,"offset":177,"style":"BOLD"},{"length":6,"offset":207,"style":"BOLD"},{"length":32,"offset":214,"style":"BOLD"},{"length":32,"offset":247,"style":"BOLD"},{"length":6,"offset":280,"style":"BOLD"},{"length":31,"offset":287,"style":"BOLD"},{"length":31,"offset":319,"style":"BOLD"},{"length":6,"offset":351,"style":"BOLD"},{"length":29,"offset":358,"style":"BOLD"},{"length":29,"offset":389,"style":"BOLD"},{"length":6,"offset":419,"style":"BOLD"},{"length":28,"offset":427,"style":"BOLD"},{"length":28,"offset":457,"style":"BOLD"},{"length":6,"offset":486,"style":"BOLD"},{"length":1,"offset":493,"style":"BOLD"}],"text":"switch (section.id)\n{\ncase this.authBlockNode.id:\n\nthis.editAuthBlock();\nbreak;\ncase this.basketBlockNode.id:\nthis.editBasketBlock(active);\nbreak;\ncase this.regionBlockNode.id:\nthis.editRegionBlock(active);\nbreak;\ncase this.paySystemBlockNode.id:\nthis.editPaySystemBlock(active);\nbreak;\ncase this.deliveryBlockNode.id:\nthis.editDeliveryBlock(active);\nbreak;\ncase this.pickUpBlockNode.id:\n\nthis.editPickUpBlock(active);\nbreak;\n\ncase this.propsBlockNode.id:\n\nthis.editPropsBlock(active);\nbreak;\n}","type":"blockquote","key":"3hav4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qett"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Именно в этих функциях создаются поля каждого блока.\n\nРассмотрим как перенести поля ФИО, Телефон, E-mail в первый блок между выбором типа плательщика и вводом местоположения.\n\nПервый блок создается функцией this.editRegionBlock(active);\n\nА поля для данных покупателя создаются в функции this.editPropsBlock(active); предлагаю перенести выбор плательщика в блок полей данных покупателя и поставить этот блок первым в template.php.\n\nПоэтому идем разбираться сначала в функции this.editRegionBlock(active);\n\nА в этой функции есть два варианта дальнейшего развития событий, либо наш блок открыт, либо скрыт. Все зависит от активности блока. поэтому в нашем случае остается один вариант - это вызов функции this.editActiveRegionBlock(true);\n\nИ вот только здесь мы наконец-то видим селекторы по верстке. Во-первых, получаем узел верстки, которую мы будем заполнять:","type":"unstyled","key":"160tj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var node = activeNodeMode ? this.regionBlockNode : this.regionHiddenBlockNode,\n","type":"blockquote","key":"c0302"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":62,"offset":115,"style":"BOLD"},{"length":19,"offset":179,"style":"BOLD"},{"length":1,"offset":199,"style":"BOLD"},{"length":39,"offset":201,"style":"BOLD"},{"length":32,"offset":241,"style":"BOLD"},{"length":1,"offset":274,"style":"BOLD"},{"length":4,"offset":276,"style":"BOLD"},{"length":28,"offset":281,"style":"BOLD"}],"text":"далее идет очищение узла и заполнение снова. В узле нашего блока мы находим заготовку под контент или создаем ее:\n\nregionContent = node.querySelector('.bx-soa-section-content');\n\nif (!regionContent)\n{\nregionContent = this.getNewContainer();\nnode.appendChild(regionContent);\n}\nelse\nBX.cleanNode(regionContent);","type":"blockquote","key":"e16ba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка создается на Bootstrap:","type":"unstyled","key":"a30n4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"BOLD"},{"length":68,"offset":76,"style":"BOLD"}],"text":"regionNode = BX.create('DIV', {props: {className: 'bx_soa_location row'}});\nregionNodeCol = BX.create('DIV', {props: {className: 'col-xs-12'}});","type":"unstyled","key":"7g1bs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее видим вызов функции для создания радио кнопок выбора типа плательщика: \nВ этой функции мы и добавляем свою верстку или классы стилей, чтоб стилизовать радио-кнопки.","type":"unstyled","key":"25le1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":0,"style":"BOLD"},{"length":66,"offset":68,"style":"BOLD"}],"text":"this.getPersonTypeControl(regionNodeCol); - выбор типа плательщика,\nthis.getProfilesControl(regionNodeCol); - выбор профиля покупателя","type":"unstyled","key":"3bcsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перенесем эти вызовы в функцию для блока полей данных. Смотрим this.editPropsBlock(active);","type":"unstyled","key":"aglhp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":251,"style":"BOLD"}],"text":"В начале функции все тоже самое, но для блока полей данных покупателя.\n\nПосле создания получения заготовки под контент по селектору propsContent = node.querySelector('.bx-soa-section-content');\n\nДобавляем в него наши радио-кнопки типов плательщиков \n\nthis.getPersonTypeControl(propsContent);","type":"unstyled","key":"7ee4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":38,"style":"BOLD"}],"text":"Далее создается Div для полей данных\n\npropsNode = BX.create('DIV', {props: {className: 'row'}});","type":"unstyled","key":"et0u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По моей верстке надо разделить блок тип плательщика и данных покупателя, поэтому здесь же добавляем заголовок для данных покупателя:","type":"unstyled","key":"djvac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":157,"offset":0,"style":"BOLD"}],"text":"propsNode = BX.create('DIV', {props: {className: 'row form-section'}, children:[BX.create('H4',{props: {className: 'title'},children:[\"Личные данные\"]})]});","type":"blockquote","key":"5uefi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И далее переходим к функции this.editPropsItems(propsNode);, где добавляются все свойства заказа.\n\nИз нее мы заберем такие поля как индекс, адрес доставки, чтобы добавить их в блоке местоположения, после поля города.","type":"unstyled","key":"bkkns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой функции мы видим, что создается такой объект массив groupIterator = this.propertyCollection.getGroupIterator() - это как раз все свойства заказа для выбранного типа плательщика.\nПоэтому поставить заполнение полей раньше типа плательщика не правильно.\n\nи далее идет такой цикл, в котором при переборе всех свойств делается исключение для свойств - город, местоположение и индекс. Вот это мы и используем.","type":"unstyled","key":"1j2ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"},{"length":1,"offset":32,"style":"BOLD"},{"length":37,"offset":34,"style":"BOLD"},{"length":34,"offset":72,"style":"BOLD"},{"length":1,"offset":107,"style":"BOLD"},{"length":4,"offset":109,"style":"BOLD"},{"length":49,"offset":114,"style":"BOLD"},{"length":52,"offset":164,"style":"BOLD"},{"length":53,"offset":217,"style":"BOLD"},{"length":1,"offset":271,"style":"BOLD"},{"length":9,"offset":273,"style":"BOLD"},{"length":62,"offset":284,"style":"BOLD"},{"length":1,"offset":347,"style":"BOLD"},{"length":1,"offset":349,"style":"BOLD"}],"text":"while (group = groupIterator())\n{\npropsIterator = group.getIterator();\nwhile (property = propsIterator())\n{\nif (\nthis.deliveryLocationInfo.loc == property.getId()\n|| this.deliveryLocationInfo.zip == property.getId()\n|| this.deliveryLocationInfo.city == property.getId()\n)\ncontinue;\n\nthis.getPropertyRowNode(property, propsItemsContainer, false);\n}\n}","type":"blockquote","key":"qcp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Залогируем с помощью функции console.log( groupIterator); - увидим, какие параметры имеют наши свойства и уберем из вывода в цикле адрес доставки или поля улица, дом, квартира и т.д.\nСоздадим массив с ID свойств, которые нужны для вывода в блоке данных покупателя:","type":"unstyled","key":"6vaoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"},{"length":31,"offset":61,"style":"BOLD"},{"length":1,"offset":93,"style":"BOLD"},{"length":37,"offset":95,"style":"BOLD"},{"length":34,"offset":133,"style":"BOLD"},{"length":1,"offset":168,"style":"BOLD"},{"length":17,"offset":170,"style":"BOLD"},{"length":24,"offset":188,"style":"BOLD"},{"length":24,"offset":213,"style":"BOLD"},{"length":62,"offset":238,"style":"BOLD"},{"length":1,"offset":301,"style":"BOLD"},{"length":1,"offset":303,"style":"BOLD"},{"length":1,"offset":305,"style":"BOLD"}],"text":"var arr=[\"1\",\"2\",\"3\",\"8\",\"9\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\"];\nwhile (group = groupIterator())\n{\npropsIterator = group.getIterator();\nwhile (property = propsIterator())\n{\n/*личные данные*/\nvar id=property.getId();\nif (arr.indexOf(id)>=0){\nthis.getPropertyRowNode(property, propsItemsContainer, false);\n}\n}\n}","type":"blockquote","key":"aof9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видим в методе this.getPropertyRowNode(property, propsItemsContainer, false); создается само поле для ввода значения.\n\nВ этой функции мы можем изменить верстку и добавить свои классы для стилизации поля.\n\nРассмотрим подробнее эту функцию:\n\nЗдесь создается div, который мы можем дополнить своей версткой.\nи далее по типу поля вызываются отдельные методы","type":"unstyled","key":"e374s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":3,"style":"BOLD"},{"length":1,"offset":25,"style":"BOLD"},{"length":16,"offset":27,"style":"BOLD"},{"length":63,"offset":44,"style":"BOLD"},{"length":6,"offset":108,"style":"BOLD"},{"length":12,"offset":115,"style":"BOLD"},{"length":59,"offset":128,"style":"BOLD"},{"length":6,"offset":188,"style":"BOLD"},{"length":12,"offset":195,"style":"BOLD"},{"length":59,"offset":208,"style":"BOLD"},{"length":6,"offset":268,"style":"BOLD"},{"length":14,"offset":275,"style":"BOLD"},{"length":61,"offset":290,"style":"BOLD"},{"length":6,"offset":352,"style":"BOLD"},{"length":12,"offset":359,"style":"BOLD"},{"length":59,"offset":372,"style":"BOLD"},{"length":6,"offset":432,"style":"BOLD"},{"length":11,"offset":439,"style":"BOLD"},{"length":57,"offset":451,"style":"BOLD"},{"length":6,"offset":509,"style":"BOLD"},{"length":14,"offset":516,"style":"BOLD"},{"length":61,"offset":531,"style":"BOLD"},{"length":1,"offset":593,"style":"BOLD"}],"text":". \nswitch (propertyType)\n{\ncase 'LOCATION':\nthis.insertLocationProperty(property, propsItemNode, disabled);\nbreak;\ncase 'DATE':\nthis.insertDateProperty(property, propsItemNode, disabled);\nbreak;\ncase 'FILE':\nthis.insertFileProperty(property, propsItemNode, disabled);\nbreak;\ncase 'STRING':\nthis.insertStringProperty(property, propsItemNode, disabled);\nbreak;\ncase 'ENUM':\nthis.insertEnumProperty(property, propsItemNode, disabled);\nbreak;\ncase 'Y/N':\nthis.insertYNProperty(property, propsItemNode, disabled);\nbreak;\ncase 'NUMBER':\nthis.insertNumberProperty(property, propsItemNode, disabled);\n}","type":"blockquote","key":"fg4h1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В случае с полями данных, это обычные текстовые поля, поэтому разберем подробнее метод: this.insertStringProperty(property, propsItemNode, disabled);\n\nВ данной функции input уже существует, он в нашей переменной property, мы его добавляем в созданный div - propsItemNode,\nи здесь же можем изменить параметры, для этого добавим такой цикл для соответствия тегов input нашей верстке.\nНа самом деле здесь обрабатывается один input.","type":"unstyled","key":"nknt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":0,"style":"BOLD"},{"length":17,"offset":62,"style":"BOLD"},{"length":34,"offset":80,"style":"BOLD"},{"length":59,"offset":116,"style":"BOLD"},{"length":28,"offset":176,"style":"BOLD"},{"length":30,"offset":205,"style":"BOLD"},{"length":1,"offset":236,"style":"BOLD"},{"length":27,"offset":238,"style":"BOLD"},{"length":32,"offset":266,"style":"BOLD"},{"length":1,"offset":299,"style":"BOLD"},{"length":1,"offset":301,"style":"BOLD"},{"length":1,"offset":303,"style":"BOLD"}],"text":"var pole =propsItemNode.querySelectorAll('input[type=text]');\nif (pole.length){\nfor (i = 0; i < pole.length; i++){\n\n/*pole[i].setAttribute(\"placeholder\",property.getName());*/\nif(property.getValue()!=\"\"){\nBX.addClass(pole[i],\"filled\");\n}\nif (property.isRequired()){\nBX.addClass(pole[i],\"required\");\n}\n}\n}","type":"blockquote","key":"92rpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь вернемся в метод this.editActiveRegionBlock(true); и добавим там поля адреса доставки:","type":"unstyled","key":"6fngv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":83,"offset":6,"style":"BOLD"}],"text":"После this.getDeliveryLocationInput(regionNodeCol); regionNode.appendChild(regionNodeCol);\nдобавляем код, аналогичный коду в полях данных покупателя, но только в массиве свойств заказа выбраны свойства адреса доставки для физ и юр лиц.","type":"unstyled","key":"7fq51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":97,"offset":0,"style":"BOLD"},{"length":49,"offset":98,"style":"BOLD"},{"length":32,"offset":148,"style":"BOLD"},{"length":39,"offset":181,"style":"BOLD"},{"length":38,"offset":221,"style":"BOLD"},{"length":24,"offset":260,"style":"BOLD"},{"length":28,"offset":285,"style":"BOLD"},{"length":59,"offset":314,"style":"BOLD"},{"length":4,"offset":374,"style":"BOLD"},{"length":2,"offset":379,"style":"BOLD"},{"length":1,"offset":382,"style":"BOLD"}],"text":"var id,group, property,propsIterator, groupIterator = this.propertyCollection.getGroupIterator();\nvar arr=[\"7\",\"19\",\"22\",\"23\",\"24\",\"25\",\"26\",\"27\"];\nwhile (group = groupIterator()){\n propsIterator = group.getIterator();\n while (property = propsIterator()) {\n id=property.getId();\n if (arr.indexOf(id)>=0){\n this.getPropertyRowNode(property, regionNode, false);\n }\n }\n}","type":"blockquote","key":"8gljn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак поля мы переставили, теперь рассмотрим стилизацию блоков доставки и оплаты:\n\nЗа их наполнение отвечают функции this.editDeliveryBlock(active); и this.editPaySystemBlock(active);\n\nнаходим в них добавление чекбоксов и скрываем лишний контент, например картинку и блок описания. Блок описания удалять нельзя, чтоб не искать, где он заполняется при выборе другого способа оплаты и доставки.","type":"unstyled","key":"e4up0"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":20,"offset":27}],"inlineStyleRanges":[],"text":"Помогите каналу в развитии https://vk.cc/c7fkGb","type":"header-two","key":"1eacn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eqo85"},{"data":{"image":{"id":"6117eee834e49528bbc86295"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c55ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dttc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#битрикс #битрикс управление сайтом #1с битрикс #bitrix ","type":"unstyled","key":"doueb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hdCJdSJl0YkKmlJhS000"}],"entityMap":{"0":{"data":{"href":"http://julianapriz.ru/","url":"http://julianapriz.ru/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://vk.cc/c7fkGb","url":"https://vk.cc/c7fkGb"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}