Блог программиста UMI CMS

Дополнительные поля в форме заказа интернет-магазина UMI.RU

Рубрика: Сайт в аренду umi.ru, Тонкости UMI CMS

Интернет-магазин на сервисе юми.ру — очень мощная вещь. Огромный функционал, полностью охватывающий процесс продажи в сети, позволяет за минимальное количество времени создать полноценно работающий, ПРОДАЮЩИЙ сайт. И это очень важно для вашего бизнеса.

Но, в процессе работы магазина очень важно минимизировать человеческие затраты на обработку заказа на стороне магазина. В идеале конечно свести эти затраты в 0.

Зачастую, для этого важно иметь как можно более детальные данные на самом первом шаге — заказе.

К сожалению, стандартная форма заказа может не содержать тех полей, что нужны для полного оформления всех документов: например реквизиты юридических лиц.

В этом случае вам поможет функция umiRuCustomOrder из модуля umi_ru_form.

Вот как в общем выглядит вызов функции:

$('Место для вставки кода корзины').umiRuCustomOrder({
'html': 'код полей корзины в формате HTML',
'before_submit': 'функция, вызываемая перед сабмитом формы и заполняющая поля в нужном формате'
});

При вызове функции есть несколько важных моментов:

1. html код должен добавляться всегда внутрь формы. При этом стандартные поля формы скрываются, а вместо них показываются те, что содержатся в параметре html.
2. функция before_submit не просто проверяет что все поля заполнены. Она еще и заполняет стандартные поля формы определенными значениями, необходимыми для правильной отправки формы на сервер.

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

$('.system_basket_fields .field.field_cust_info').umiRuCustomOrder({
'html': '<div class="row span12"><div class="span6"><label>Имя</label><input type="text" placeholder="Имя" name="first_name" value="" /></div><div class="span5"><label>Эл.почта</label><input type="text" placeholder="Электронная почта" name="mail" value="" required="required" /></div><div class="span6"><label>Телефон</label><input type="text" placeholder="Телефон" name="phone" value="" required="required" /></div><div class="span5"><label>Адрес доставки</label><input type="text" placeholder="Адрес доставки" name="address" value="" required="required" /></div><div class="span6"><label>Оплата</label><input type="radio" checked="checked" name="payment" value="courier" /> Оплата по банковской карте курьеру или в шоу-руме<br /><input type="radio" name="payment" value="yandex" /> Оплата банковской картой, электронными деньгами, через терминалы и прочее прямо на сайте</div><div class="span5"><label>Примечания</label><textarea name="info" placeholder="Если у вас есть дополнительные пожелания - впишите их сюда"></textarea></div></div>',
'before_submit': function(data){ var result = { name:'', phone:'', adres:'', mail:'', info:'', error:'', focus_on_error:'' }; result.name = $(this).find('.basket_custom_fields input[name = first_name]').val(); result.phone = $(this).find('.basket_custom_fields input[name = phone]').val(); result.mail = $(this).find('.basket_custom_fields input[name = mail]').val(); result.adres = $(this).find('.basket_custom_fields input[name = address]').val(); var res = []; res.push('Способ оплаты:'); if($(this).find('.basket_custom_fields input[name = payment]:checked').val() == 'courier'){ res.push('Картой курьеру или при получении'); }else{ res.push('Через сайт'); } res.push('Дополнительно:'); res.push($(this).find('.basket_custom_fields textarea[name = info]').val()); result.info = res.join("\n"); if(!validateEmail($(this).find('.basket_custom_fields input[name = mail]').val())){ result.error = 'Неверный формат E-mail адреса'; result.focus_on_error = '.basket_custom_fields input[name = mail]'; } return result; }
});

А вот пример того, что получается в итоге:

К сожалению, сразу после сохранения и код html и код JS-функции приобретают именно такой вид, как показано выше. Чтобы внести небольшую ясность, я постараюсь представить их в более читаемом виде.

Вот код формы:

<div class="row span12">
  <div class="span6">
    <label>Имя</label>
    <input type="text" placeholder="Имя" name="first_name" value="" />
  </div>
  <div class="span5">
    <label>Эл.почта</label>
    <input type="text" placeholder="Электронная почта" name="mail" value="" required="required" />
  </div>
  <div class="span6">
    <label>Телефон</label>
    <input type="text" placeholder="Телефон" name="phone" value="" required="required" />
  </div>
  <div class="span5">
    <label>Адрес доставки</label>
    <input type="text" placeholder="Адрес доставки" name="address" value="" required="required" />
  </div>
  <div class="span6">
    <label>Оплата</label>
    <input type="radio" checked="checked" name="payment" value="courier" />
    Оплата по банковской карте курьеру или в шоу-руме<br />
    <input type="radio" name="payment" value="yandex" />
    Оплата банковской картой, электронными деньгами, через терминалы и прочее прямо на сайте</div>
  <div class="span5">
    <label>Примечания</label>
    <textarea name="info" placeholder="Если у вас есть дополнительные пожелания - впишите их сюда"></textarea>
  </div>
</div>

А вот код, который отвечает за преобразование данных из формы в нужный вид:

function(data) {
    var result = {
        name: '',
        phone: '',
        adres: '',
        mail: '',
        info: '',
        error: '',
        focus_on_error: ''
    };
    result.name = $(this).find('.basket_custom_fields input[name = first_name]').val();
    result.phone = $(this).find('.basket_custom_fields input[name = phone]').val();
    result.mail = $(this).find('.basket_custom_fields input[name = mail]').val();
    result.adres = $(this).find('.basket_custom_fields input[name = address]').val();
    var res = [];
    res.push('Способ оплаты:');
    if ($(this).find('.basket_custom_fields input[name = payment]:checked').val() == 'courier') {
        res.push('Картой курьеру или при получении');
    } else {
        res.push('Через сайт');
    }
    res.push('Дополнительно:');
    res.push($(this).find('.basket_custom_fields textarea[name = info]').val());
    result.info = res.join("\n");
    if (!validateEmail($(this).find('.basket_custom_fields input[name = mail]').val())) {
        result.error = 'Неверный формат E-mail адреса';
        result.focus_on_error = '.basket_custom_fields input[name = mail]';
    }
    return result;
}

Теперь гораздо лучше видно, что при формировании данных заполняется определенный массив по определенным правилам. Тут важно помнить, что поле email является не только обязательным при заполнении заказа, но еще и должно быть заполнено в определенном формате.

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

Если это решение поможет вам при работе с арендными сайтами — это будет просто великолепно.

Есть у вас возникли вопросы — смело их задавайте! Я понимаю, что рассказать за 5 минут все тонкости работы с этой конкретной функцией невозможно.

Ну и конечно же пользуйтесь арендными сайтами — это то, что дает высокую эффективность при низких издержках, а разве не это важно в любом бизнесе?