ПЗ Караулова В.С. (Разработка, создание и внедрение интернет-магазина строительных и отделочных материалов), страница 9

<div id="msCart">

</br><table class="table table-striped" cellpadding="10" width="100%">

<tr class="header_b">

<th class="image span2 col-md-2">&nbsp;</th>

<th class="title span4 col-md-4">[[%ms2_cart_title]]</th>

<th class="count span2 col-md-2">[[%ms2_cart_count]]</th>

<th class="weight span1 col-md-1">[[%ms2_cart_weight]]</th>

<th class="priceb span1 col-md-1">[[%ms2_cart_price]]</th>

<th class="remove span2 col-md-2">[[%ms2_cart_remove]]</th>

</tr>

[[+goods]]

<tr class="footer_b">

<th class="total" colspan="2">[[%ms2_cart_total]]:</th>

<th class="total_count">

<span class="ms2_total_count">[[+total_count]]</span>

[[%ms2_frontend_count_unit]]</th>

<th class="total_weight">

<span class="ms2_total_weight">[[+total_weight]]</span>

[[%ms2_frontend_weight_unit]]</th>

<th class="total_cost">

<span class="ms2_total_cost">[[+total_cost]]</span>

[[%ms2_frontend_currency]]</th>

<th>&nbsp;</th></tr>

</table>

<form method="post"></br>

<button class="btnb btn-default" type="submit" name="ms2_action" value="cart/clean" title="[[%ms2_cart_clean]]">[[%ms2_cart_clean]]</button>

</form>

</div>

Представленный выше код формирует таблицу с названиями полей, таблицу итоговых данных о находящихся в корзине товарах.

Исходный код измененного чанка tpl.msCart.row приведен ниже.

<p></p><tr id="[[+key]]">

<td class="image"><img src="[[+thumb:default=`[[++assets_url]]components/minishop2/img/web/ms2_small.png`]]" /></td>

<td class="title">

<a href="[[~[[+id]]]]">[[+pagetitle]]</a><br/>

<small><i>[[+option.color]] [[+option.size]]</i></small>

</td>

<td class="count">

<form method="post" class="ms2_form form-inline" role="form">

<input type="hidden" name="key" value="[[+key]]"/>

<div class="form-group">

<input type="number" name="count" value="[[+count]]" max-legth="4" class="input-sm form-control"/>

[[%ms2_frontend_count_unit]]

<button class="btn btn-default" type="submit" name="ms2_action" value="cart/change">

<i class="glyphicon glyphicon-refresh"></i></button>

</div></form></td>

<td class="weight"><span>[[+weight]]</span>

[[%ms2_frontend_weight_unit]]</td>

<td class="priceb"><span>[[+price]]</span>

[[%ms2_frontend_currency]][[+old_price]]</td>

<td class="remove">

<form method="post" class="ms2_form">

<input type="hidden" name="key" value="[[+key]]">

<button class="btnn btn-default btnn" type="submit" name="ms2_action" value="cart/remove" title="[[%ms2_cart_remove]]"><img src="/images/del.png"></button>

</form></td></tr>

Данный код вносит информацию о добавленном товаре в таблицу, реализованную предыдущим кодом.

За форму оформления заказа отвечает сниппет msOrder модуля miniShop2. Стандартные чанки оформления данных заказчика и адреса доставки (tpl.msOrder.outer), вариантов доставки (tpl.msOrder.delivery), способов оплаты (tpl.msOrder.payment), вывод данных по заказу (tpl.msOrder.success) так же содержат незначительные изменения.

Html-код чанка tpl.msOrder.outer представлен ниже.

<form class="form-horizontal ms2_form" id="msOrder" method="post">

<div class="row_b">

<div class="span6 col-md-6">

<h4>[[%ms2_frontend_credentials]]:</h4>

<p><div class="form-group input-parent">

<label class="col-sm-4 control-label" for="email">

<span class="required-star">*</span>

[[%ms2_frontend_email]]</label>

<div class="col-sm-6">

<input type="email" id="email" placeholder="[[%ms2_frontend_email]]" name="email" value="[[+email]]" class="form-control [[+errors.email]]">

</div></div></p>

<p><div class="form-group input-parent">

<label class="col-sm-4 control-label" for="receiver">

<span class="required-star">*</span>

[[%ms2_frontend_receiver]]</label>

<div class="col-sm-6">

<input type="text" id="receiver" placeholder="ФИО" name="receiver" value="[[+receiver]]" class="form-control [[+errors.receiver]]">

</div></div></p>

<p><div class="form-group input-parent">

<label class="col-sm-4 control-label" for="phone">

<span class="required-star">*</span>

[[%ms2_frontend_phone]]</label>

<div class="col-sm-6">

<input type="text" id="phone" placeholder="[[%ms2_frontend_phone]]" name="phone" value="[[+phone]]" class="form-control [[+errors.phone]]">

</div></div></p>

<p><div class="form-group input-parent">

<label class="col-sm-4 control-label" for="comment"> [[%ms2_frontend_comment]]</label>

<div class="col-sm-6">

<textarea name="comment" id="comment" placeholder="[[%ms2_frontend_comment]]" class="form-control [[+errors.comment]]">[[+comment]]</textarea>

</div></div></p></div>

<div class="span6 col-md-6" id="payments">

<h4>[[%ms2_frontend_payments]]:</h4>

<div class="form-group">

<label class="col-sm-4 control-label opl">

<span class="required-star">*</span>

[[%ms2_frontend_payment_select]]</label>

<div class="col-sm-6 paym"> [[+payments]]</div>

</div></div></div>

<div class="row">

<div class="span6 col-md-6" id="deliveries">

<h4>[[%ms2_frontend_deliveries]]:</h4>

<div class="form-group">

<label class="col-sm-4 control-label vart">

<span class="required-star">*</span>

[[%ms2_frontend_delivery_select]]</label>

<span class="col-sm-6 delv">[[+deliveries]]</span>

</div>

*Стоимость доставки зависит от расстояния.</br>

Менеджер скажет Вам точную стоимость.

</div>

<div class="span6 col-md-6" id="address">

<h4>[[%ms2_frontend_address]] (по Владивостоку):</h4>

<div class="form-group input-parent adr">

<div class="col-md-6 ">

<p><div class="col-md-4">

<label class="col-sm-4 control-label" for="street">

<span class="required-star">*</span>

[[%ms2_frontend_street]]</label>

<input type="text" id="street" placeholder="[[%ms2_frontend_street]]" name="street" value="[[+street]]" class="form-control [[+errors.street]]">

</div></p>

<p><div class="col-md-4">

<label class="col-sm-4 control-label" for="street">

<span class="required-star">*</span>

[[%ms2_frontend_building]]</label>

<input type="text" id="building" placeholder="[[%ms2_frontend_building]]" name="building" value="[[+building]]" class="form-control [[+errors.building]]">

</div></p>

<p><div class="col-md-4"><label class="col-sm-4 control-label" for="room">

<span class="required-star">*</span>Подъезд</label>

<input type="text" id="building" placeholder="Подъезд" name="room" value="[[+room]]" class="form-control [[+errors.room]]">

</div></p></div></div></div></div>

</br><button type="button" name="ms2_action" value="order/clean" class="btno btn-default ms2_link ">

<i class="glyphicon glyphicon-remove"></i>

[[%ms2_frontend_order_cancel]]</button>

<div class="well2">

<hr width="100%">

<div class="col-md-offset-2">

<h3>[[%ms2_cart_total]]:

<span id="ms2_order_cost">[[+order_cost:default=`0`]]</span>

[[%ms2_frontend_currency]]</h3>

<center><button type="submit" name="ms2_action" value="order/submit" class="btnz btn-default btn-primary ms2_link">[[%ms2_frontend_order_submit]]</button></center>

</div></div></form>

Здесь, HTML-код формирует необходимые поля для заполнения.

Html-код чанка tpl.msOrder.delivery представлен ниже.

<div class="checkbox">

<label class="delivery input-parent">

<input type="radio" name="delivery" value="[[+id]]" id="delivery_[[+id]]" data-payments='[[+payments]]' [[+checked]]>

[[+logo:default=`[[+name]]`]] <!--&mdash; <i>[[+price]] [[%ms2_frontend_currency]]</i>-->

[[+description]]

</label></div>

Данный код реализует выбор между вариантами доставки.

Html-код чанка tpl.msOrder.payment представлен ниже.

<div class="checkbox">

<label class="delivery input-parent">

<input type="radio" name="delivery" value="[[+id]]" id="delivery_[[+id]]" data-payments='[[+payments]]' [[+checked]]>

[[+logo:default=`[[+name]]`]] <!--&mdash; <i>[[+price]] [[%ms2_frontend_currency]]</i>-->

[[+description]]

</label></div>

Данный код реализует выбор между вариантами оплаты.

Html-код чанка tpl.msOrder.success представлен ниже.

[[!msGetOrder?id=`[[+id]]`]]

<h3 class="suc">[[%ms2_frontend_order_success]] </h3>

<h3 class="suc">Менеджер свяжется с Вами в ближайшее время.</h3>

<div id="msCart">

<table class="table table-striped" cellpadding="10" width="100%">

<tr class="header_b">

<th class="image span2 col-md-2">&nbsp;</th>

<th class="title span4 col-md-4">[[%ms2_cart_title]]</th>

<th class="count span2 col-md-2">[[%ms2_cart_count]]</th>

<th class="weight span1 col-md-1">[[%ms2_cart_weight]]</th>

<th class="priceb span1 col-md-1">[[%ms2_cart_cost]]</th>

</tr>

[[+goods]]

<tr class="footer_b">

<th class="total" colspan="2">[[%ms2_cart_total]]:</th>

<th class="total_count">

<span class="ms2_total_count">[[+cart_count]]</span>

[[%ms2_frontend_count_unit]]</th>

<th class="total_weight">

<span class="ms2_total_weight">[[+cart_weight]]</span>

[[%ms2_frontend_weight_unit]]</th>

<th class="total_cost">

<span class="ms2_total_cost">[[+cart_cost]]</span>

[[%ms2_frontend_currency]]</th>