Форма заказа для сайта

Готовая форма оформления заказа на сайте.
Добавляет товары в заказ, считает скидки и доставку и отправляет на почту.

Настроить корзину Пример работы

Корзина для сайта
Корзина для сайта

Изменение порядка полей в форме заказа

Доступно на тарифах: Бесплатный Базовый Полный

Для того, что изменить порядок полей в заказе существует несколько способов. В этом примере мы опишем 3 варианта:

1. Через настройки в личном кабинете

В разделе "Основные настройки" личного кабинета отлючите стандартные поля, которые по-умолчанию выводятся первыми, а дополнительные поля укажите в том порядке, который требуется.

2. Через настройку CSS-стилей (FlexBox)

Метод позиционирования элементов FlaxBox позволяет указать направление, по которому выстраиваются блоки и их порядок. Для использования этого метода потребуется после кода подключения корзины добавить стили:

<style>
	/* Определяет для контейнера easynetshop-form-group направление выстраивания блоков  */
	.easynetshop-modal-cart .easynetshop-form-group {
		display: flex;
		flex-direction: column;
	}
	
	/* Установит блок .fields_number1 третьим элементом внутри контейнера */
	.easynetshop-modal-cart .fields_number1 { order: 3; } 	
</style> 

3. Клонирование полей через JS-скрипт

Каждое поле в форме заказа содержит класс .fields_numberX, где Х - порядковый номер поля при стандартном размещении. Вы можете использовать на странице фрагмент кода, который клонирует поле, выставляее его копию в указанное место и удаляя оригинал. Таким образом поле будет перемещено в нужную позицию:

<script>
	document.addEventListener("EasyNetShopModalOpened", function(event) {
		// Эта конструкция при открытии окна заказа скопирует поле #1 и вставит его перед полем #3 
		ens_jQuery(".fields_number3").before(ens_jQuery(".fields_number1").detach().clone(true));
	}, false);
</script>