miv-men
@miv-men
Фронт и бэк

Как в sale.order.ajax запретить переход к следующему шагу если не выбран пункт выдачи в Почте России?

Здравствуйте.

Если выбрана доставка Почтой России, но не выбран пункт выдачи, то после клика "Оформить заказ" появляется ошибка "Выберите адрес доставки", покупатели теряются не могут понять что делать.
Как вызвать проверку заполненных раньше, на этапе когда клиент кликает "Далее" из доставки?
5f76df57679ec290485182.png

Заглянул я в order_ajax.js, понял что мне намного проще запилить костыль чем разбираться как там реализовать мою задачу. Но костыли лепить не хочется.

Подскажите как используя методы из order_ajax.js вызвать проверку наполненности полей?
  • Вопрос задан
  • 915 просмотров
Решения вопроса 1
@PetrPo
Либо шаблон компонента кастомить и дописывать order_ajax.js, либо можно в своем js файле частично переопределить функции из order_ajax.js
Первый вариант хорош тем, что там буквально пару функций дописать и добавить выводы в несколько мест, но кастомный шаблон.
При втором варианте побольше кода и как бы оторванный от самого компонента, но большая совместимость при обновлении битрикса.

По второму варианту, переопредлить можно так
spoiler

var saleOrderAjaxComponentCustom = function() {
	// чтобы добавить валидацию для свернутого блока доставки
	BX.Sale.OrderAjaxComponent.editFadeDeliveryBlock = function() {
		var deliveryContent = this.deliveryBlockNode.querySelector('.bx-soa-section-content'), newContent;

		if (this.initialized.delivery)
		{
			this.deliveryHiddenBlockNode.appendChild(deliveryContent);
		}
		else
		{
			this.editActiveDeliveryBlock(false);
			BX.remove(BX.lastChild(this.deliveryBlockNode));
		}

		newContent = this.getNewContainer(true);
		this.deliveryBlockNode.appendChild(newContent);

		this.editFadeDeliveryContent(newContent);

		if (this.params.SHOW_COUPONS_DELIVERY == 'Y')
			this.editCouponsFade(newContent);
		
		// валидация доставки и вывод плашки с ошибкой
		var deliveryErrors = this.validateDelivery();
	}
	
	// чтобы добавить валидацию для активного блока доставки
	BX.Sale.OrderAjaxComponent.editActiveDeliveryBlock = function(activeNodeMode) {
		var node = activeNodeMode ? this.deliveryBlockNode : this.deliveryHiddenBlockNode,
			deliveryContent, deliveryNode;

		if (this.initialized.delivery)
		{
			BX.remove(BX.lastChild(node));
			node.appendChild(BX.firstChild(this.deliveryHiddenBlockNode));
		}
		else
		{
			deliveryContent = node.querySelector('.bx-soa-section-content');
			if (!deliveryContent)
			{
				deliveryContent = this.getNewContainer();
				node.appendChild(deliveryContent);
			}
			else
				BX.cleanNode(deliveryContent);

			this.getErrorContainer(deliveryContent);

			deliveryNode = BX.create('DIV', {props: {className: 'bx-soa-pp row'}});
			this.editDeliveryItems(deliveryNode);
			deliveryContent.appendChild(deliveryNode);
			this.editDeliveryInfo(deliveryNode);

			if (this.params.SHOW_COUPONS_DELIVERY == 'Y')
				this.editCoupons(deliveryContent);

			this.getBlockFooter(deliveryContent);
		}
		
		// валидация доставки и вывод плашки с ошибкой
		if(this.deliveryBlockNode.getAttribute('data-visited') === 'true') {
			var deliveryErrors = this.validateDelivery();
		}
	}
	
	// чтобы добавить валидацию по нажатию кнопки "Оформить заказ"
	BX.Sale.OrderAjaxComponent.isValidForm = function() {
		if (!this.options.propertyValidation)
			return true;

		var regionErrors = this.isValidRegionBlock(),
			propsErrors = this.isValidPropertiesBlock(),
			navigated = false, tooltips, i;

		if (regionErrors.length)
		{
			navigated = true;
			this.animateScrollTo(this.regionBlockNode, 800, 50);
		}

		if (propsErrors.length && !navigated)
		{
			if (this.activeSectionId == this.propsBlockNode.id)
			{
				tooltips = this.propsBlockNode.querySelectorAll('div.tooltip');
				for (i = 0; i < tooltips.length; i++)
				{
					if (tooltips[i].getAttribute('data-state') == 'opened')
					{
						this.animateScrollTo(BX.findParent(tooltips[i], {className: 'form-group bx-soa-customer-field'}), 800, 50);
						break;
					}
				}
			}
			else
				this.animateScrollTo(this.propsBlockNode, 800, 50);
		}
		
		if (regionErrors.length)
		{
			this.showError(this.regionBlockNode, regionErrors);
			BX.addClass(this.regionBlockNode, 'bx-step-error');
		}

		if (propsErrors.length)
		{
			if (this.activeSectionId !== this.propsBlockNode.id)
				this.showError(this.propsBlockNode, propsErrors);

			BX.addClass(this.propsBlockNode, 'bx-step-error');
		}
		
		// валидация доставки и вывод плашки с ошибкой
		var deliveryErrors = this.validateDelivery();
		if(deliveryErrors) {
			this.animateScrollTo(this.deliveryBlockNode, 800, 50);
		}

		return !(regionErrors.length + propsErrors.length + deliveryErrors.length);
	}
	
	// валидация доставки и вывод плашки с ошибкой
	BX.Sale.OrderAjaxComponent.validateDelivery = function() {
		var deliveryErrors = this.isValidDeliveryBlock();
		this.showDeliveryErrors(deliveryErrors);
		
		return deliveryErrors;
	}
	
	// валидация доставки
	BX.Sale.OrderAjaxComponent.isValidDeliveryBlock = function() {
		var selectedDelivery = this.getSelectedDelivery(),
			deliveryProps = this.orderBlockNode.querySelectorAll('[name=DELIVERY_ID]'),
			deliveryErrors = [];
		
		// ПРИМЕР, ЗДЕСЬ ПИШЕШЬ СВОЮ ВАЛИДАЦИЮ
		if(selectedDelivery.ID == 1) {
			deliveryErrors.push('ТЕСТОВАЯ ОШИБКА');
		}
		// --------------------------------------

		return deliveryErrors;
	}
	
	// вывод плашки с ошибкой
	BX.Sale.OrderAjaxComponent.showDeliveryErrors = function(deliveryErrors) {
		if (deliveryErrors.length) {
			this.showError(this.deliveryBlockNode, deliveryErrors);
			BX.addClass(this.deliveryBlockNode, 'bx-step-error');
		}
	}
}

BX.ready(function(){
	if(BX.Sale && BX.Sale.OrderAjaxComponent) {
		// при загрузке страницы
		saleOrderAjaxComponentCustom();
		BX.Sale.OrderAjaxComponent.validateDelivery();
		
		// для ajax
		BX.addCustomEvent(window, 'onAjaxSuccess', function(e) {
			saleOrderAjaxComponentCustom();
			BX.Sale.OrderAjaxComponent.validateDelivery();
		});
	}
});


Там коммент // ПРИМЕР, ЗДЕСЬ ПИШЕШЬ СВОЮ ВАЛИДАЦИЮ
Саму валидацию придется тебе придумать по каким полям ты будешь валидировать. Как вариант, я посмотрел там инпуты добавляются, можно проверить, что если они есть и не заполнены, тогда выводить ошибку.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы