Готовые примеры /

Корзина покупок

В этом примере создадим интерактивную корзину покупок, используя функции из ZForms API. Исходные данные:

  • В поля для ввода допустимо вводить только целые числа.
  • Cумма заказа должна пересчитываться при изменении значения полей для количества товара.
  • Когда поля ввода находится в фокусе — соответствующая строка таблицы должна подсвечиваться.
  • Если в поле количество товара не введено количество или введено «0» — соответствующая строка таблицы должна «гаснуть».
  • Если все поля не заполнены — кнопка отправки заказа должна быть недоступна.
Наименование Цена Кол-во
Apple MacBook Pro 15 MB471 94 577
Apple MacBook Air MB003 53 924
Apple MacBook 13 MB466 51 727
Итого 209 105 4

Код примера

<form class="zf" action="." id="form-cart">
	<table class="cart">
		<thead>
			<tr>
				<th>Наименование</th>
				<th class="price">Цена</th>
				<th class="quantity">Кол-во</th>
			</tr>
		</thead>
		<tbody class="zf zf-fieldset" onclick="return { oValid : { sLogic : 'or', aFrom : [{ sName : 'product[1]', rPattern : /[1-9]/, bCheckForEmpty : true }, { sName : 'product[2]', rPattern : /[1-9]/, bCheckForEmpty : true }, { sName : 'product[3]', rPattern : /[1-9]/, bCheckForEmpty : true }] } }">
			<tr>
				<td>Apple MacBook Pro 15 MB471</td>
				<td class="price">94 577</td>
				<td class="quantity"><input class="zf zf-number" type="text" name="product[1]" size="3" maxlength="3" onclick="return { oDependedClasses : { aData : [[/[1-9]/, 'empty', true]] } }" /></td>
			</tr>
			<tr>
				<td>Apple MacBook Air MB003</td>
				<td class="price">53 924</td>
				<td class="quantity"><input class="zf zf-number" type="text" name="product[2]" value="1" size="3" maxlength="3" onclick="return { oDependedClasses : { aData : [[/[1-9]/, 'empty', true]] } }" /></td>
			</tr>
			<tr>
				<td>Apple MacBook 13 MB466</td>
				<td class="price">51 727</td>
				<td class="quantity"><input class="zf zf-number" type="text" name="product[3]" value="3" size="3" maxlength="3" onclick="return { oDependedClasses : { aData : [[/[1-9]/, 'empty', true]] } }" /></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th class="total">Итого</th>
				<th class="sum">209 105</th>
				<th class="quantity">4</th>
			</tr>
			<tr class="zf-buttons">
				<th colspan="3"><input class="zf zf-submit" type="submit" value="Оформить" /></th>
			</tr>
		</tfoot>
	</table>
</form>

В примере используется небольшой трюк — так как кнопка отправки заказа должна быть недоступной только если все поля одновременно пустые, то объект валидности создается не у каждого из виджетов, отвечающего за кол-во товара (в этом случае, кнопка бы отключалась если бы в любом из полей было пустым), а у одного (который зависит от всех виджетов) — в данном случае их контейнера.

Функции по пересчету суммы заказа выполняет дополнительный объект — объект пользовательского класса Cart.

Cart.js, 1,47 КБ

Также, в этом примере видно, что ZForms не опирается на какой-либо конкретный стиль верстки.