Лаборатория Кода, Маркетинг-Код

Покупки в интернет-магазинах. Пишем скрипт быстрого заказа товара (на примере osCommerce)

Форма быстрого заказа интернет-магазина

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

В статье рассмотрены основные принципы организации быстрого заказа товаров без регистрации, приведены иллюстрации. Это может наглядно продемонстрировать работу данного типа модулей интернет-магазинов и послужить заказчикам веб-услуг и владельцам сайтов в качестве ознакомительного экскурса. Кроме того, материал содержит пошаговую фрагментацию функционального кода, и может оказаться полезным для веб-разработчиков в практическом применении.

Давно известна закономерность: чем меньше в форме регистрации полей, тем охотнее пользователи её заполняют — тем охотнее осуществляет покупки в интернет-магазине. Не удивительно, что всё более популярной становится практика создания формы быстрого заказа на сайте, где посетитель может указать лишь необходимые данные для доставки (имя, адрес, телефон), минуя необходимость заполнения имейлов, паролей, почтовых индексов (где они не нужны) и пр. В то же время, стоит учитывать фактор физического местонахождения магазина / склада. Рационально использовать форму быстрого заказа именно в том городе, где расположен магазин с товаром (например — Москва). При этом, для жителей других городов оставить полную регистрацию, где они смогут указать почтовый индекс, способ доставки и другую необходимую информацию.

Принципы организации быстрого заказа товара без регистрации

Итак, мы определились с целями и задачами, теперь перейдем к средствам реализации. Форму быстрого заказа я писала для интернет-магазина, разработанного на движке osCommerce v.2.3 (чит. также «Тюнинг osCommerce v.2.3, или прокачка интернет-магазина для дизайнерских и seo-целей«), хотя аналогичный скрипт можно написать под любую другую CMS. По сути, всё, что нам нужно для отправки заказа товара на имейл продавца — это ID товара, который предполагается извлечь со страницы, на которой будет размещена кнопка быстрого заказа (страница товара, страница категории товаров). Задумка конструкции такова — данная кнопка «Быстрый заказ» вызывает модульное окошко, в котором пользователю предлагается следующее.

  1. Подтвердить локацию («Да, я из Москвы»), или опровергнуть («Нет, я НЕ из Москвы»). При опровержении, в том же окошке должно появиться извинительное сообщение и кнопка «Зарегистрироваться» — для полной регистрации на сайте. При подтверждении, переходим к пункту 2:
  2. Указать имя, адрес в Москве и контактный телефон. При желании, можно также отправить произвольный комментарий. После нажатия кнопки «Заказать» / «Купить», в скрипте складывается письмо с данными заказа (включая скрытый ID товара), которое отправляется на имейл администратора сайта — менеджера продаж интернет-магазина (позже менеджер может отзвониться покупателю, уточнить адрес и удобное время доставки). Покупателю выводиться сообщение: «Заказ успешно отправлен».

Быстрый заказ для интернет-магазины - кнопка на странице товара

Рис. 1. Быстрый заказ для интернет-магазина. Кнопка быстрого заказа на странице товара. При нажатии открывается модульное окошко поверх страницы (см. рис. 2).

Быстрый заказ в интернет-магазине. Опровержение локации - Нет, НЕ в Москве

Рис. 2. Быстрый заказ в интернет-магазине. Опровержение локации — «Нет, я НЕ в Москве». Далее — переход к инструкции пройти полную регистрацию, заполнив все необходимые данные покупателя (рис. 3).

Другой город - покупка возможна только при регистрации .

Рис. 3. Другой город — покупка возможна только при регистрации.

Быстрый заказ для интернет-магазина без регистрации

Рис. 4. Быстрый заказ для интернет-магазина без регистрации (город Москва). Переходим к форме заказа товара (рис. 5):

Быстрый заказ в интернет-магазине без регистрации. Форма заказа товара

Рис. 5. Быстрый заказ в интернет-магазине без регистрации. Форма заказа товара.

Скрипт быстрого заказа для интернет-магазина

С интерфейсом определились, теперь пройдемся по коду для данной реализации.

У нас будет 1 основной php-файл — страница, которая будет вызываться в модульное окошко. Назовем его bistriy_zakaz_s_sayta.php. Вспомогательные функции, как то: проверка полей, брейк-тайм (время сессии — скажем, 5 мин, — в течении которого невозможно отправить заказ с того же компьютера дважды) будем использовать по аналогии с формой обратной связи, уже существующей в движке. Собственно, их мы прописывать не будем, а только вызывать. Для этого, прежде всего, запросим рабочие файлы движка:

<?php
  require('includes/application_top.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONTACT_US);

Теперь будем проверять, получены ли данные с формы быстрого заказа (если заказ произведен). Если мы обнаруживаем наличие пересылаемых данных, производим их обработку:

  //определяем, получены ли данные с формы?
  //Если да, производим их обработку и складываем данные для письма:
  if (isset($HTTP_GET_VARS['action']) && ($HTTP_GET_VARS['action'] == 'send') && isset($HTTP_POST_VARS['formid']) && isset($HTTP_POST_VARS['products_id']) && ($HTTP_POST_VARS['formid'] == $sessiontoken)) {
    $error = false;

    $name = tep_db_prepare_input($HTTP_POST_VARS['name']);
    $phone_num = tep_db_prepare_input($HTTP_POST_VARS['phone']);
    $adress_moscow = tep_db_prepare_input($HTTP_POST_VARS['adress_moscow']);
    $prod_link = tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . tep_db_prepare_input($HTTP_POST_VARS['products_id']));
    $enquiry = iconv('cp1251','utf-8','Получен заказ на товар: '). '
    ' . $prod_link . '

    '.iconv('cp1251','utf-8','Контактное лицо (имя): ') . $name . '
    '.iconv('cp1251','utf-8','Телефон: ') . $phone_num . '
    '. iconv('cp1251','utf-8','Адрес в Москве: ') . $adress_moscow .'
    '. iconv('cp1251','utf-8','Сообщение: ') . tep_db_prepare_input($HTTP_POST_VARS['enquiry']);

  // брейк-тайм
    $actionRecorder = new actionRecorder('ar_contact_us', (tep_session_is_registered('customer_id') ? $customer_id : null), $name);

    if (!$actionRecorder->canPerform()) {
      $error = true;
      $actionRecorder->record(false);
      $messageStack->add('contact', sprintf(ERROR_ACTION_RECORDER, (defined('MODULE_ACTION_RECORDER_CONTACT_US_EMAIL_MINUTES') ? (int)MODULE_ACTION_RECORDER_CONTACT_US_EMAIL_MINUTES : 5)));
    }
  //запрос к базе данных по id-товара (из формы отправки)
  $product_info_query = tep_db_query("select p.products_id, p.products_model, p.products_image, p.products_price, p.products_tax_class_id, pd.products_name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_id = '" . (int)$HTTP_POST_VARS['products_id'] . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "'");

    if ($error == false) {
  //если ошибок нет, отправляем письмо:
       tep_mail(STORE_OWNER, STORE_OWNER_EMAIL_ADDRESS, iconv('cp1251','utf-8','Быстрый заказ с интернет-магазина'), $enquiry, $name, STORE_OWNER_EMAIL_ADDRESS);
      $actionRecorder->record();

  //устанавливаем сессию Москва, чтобы при следующем заказе не спрашивать покупателя о локации:
      session_start();
      $_SESSION['moscow'] = '1';
  //сообщаем об успехе отправки быстрого заказа и перенаправляем на соответствующую страницу с сообщением
      tep_redirect(tep_href_link('bistriy_zakaz_s_sayta.php', 'action=success'));
    }
  }
  //завершение условия о полученных данных формы.

В противном случае, — если отправки формы быстрого заказа не производилось, — создаем запрос к базе данных для получения первоначальных сведений о товаре (картинка товара, название, цена).

Здесь нужно обратить внимание, что ID товара мы получаем в GET-переменной, которая определяется на странице товара и задается в URL для модульного окна. Если данная переменная вдруг окажется пустой, нужно, чтобы скрипт вывел ошибку (проследим это в строках 53-59).

Особой обработки потребуют такие данные, как цена, ведь товар может задействоваться в сейле. В этом случае, мы должны указать обычную цену и специальную — со скидкой. (Строки 63-67.)

  else{
  //если данные формы не получены, то предоставляем пустую форму быстрого заказа для заполнения
  //Делаем запрос к базе данных по ID товара, полученным со страницы товара, в GET-переменных ($HTTP_GET_VARS['products_id']):
  $product_info_query = tep_db_query("select p.products_id, p.products_model, p.products_image, p.products_price, p.products_tax_class_id, pd.products_name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "'"); }

  //проверяем, удачно ли прошел запрос к БД

  if (!tep_db_num_rows($product_info_query)) {
  //запрос выдал нулевой результат - переводим на страницу ошибки
    tep_redirect(tep_href_link('bistriy_zakaz_error.php'));
  } else {
  //запрос успешен - продолжаем
    $product_info = tep_db_fetch_array($product_info_query);
  }

  //производим обработку данных
  //специальная цена (скидки)
  if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
    $products_price = '<del>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</del> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
  } else {
    $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
  }
?>

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

В шапке подключим основные стили сайта, а также js-скрипты и jquery-библиотеку.

Дополнительно, пропишем стили для двух блоков, определяющих взаимодействие с пользователем на шаге уточнения локации. Внешне это выглядит так, будто перед нами разные страницы (сравните рис. 2 и рис. 5). Но это муляж. На самом деле, в первом случае основная форма просто загорожена пластом блока, растянутым по ширине и высоте окошка.

Собственно, изначально, перед посетителем откроется блок подтверждения / опровержения города местонахождения (см. рис. 2). Класс «displaymoscow» и id #moscow. Его положение на странице зададим в стилях как абсолютное и с z-индексом 1800 над остальным содержимым страницы. (Подробнее о z-индексах и прочих фокусах с блоками читайте здесь: «Создание сайтов и целевая CSS-верстка. HTML и CSS сниппеты«.)  Тот же класс (displaymoscow) используется для второго блока #moscownot, изначально скрытого на странице.

Пропишем динамику в <script>.

При нажатии на кнопку «Да, я из Москвы» (#tdb1), блок #moscow переходит в режим hide(), т.е. становится скрытым, открывая содержимое страницы и саму форму быстрого заказа. (См. рис. 4-5, строки кода 125-126)

При нажатии на кнопку «Нет, я НЕ в Москве» (#tdb2), блок #moscow переходит в режим hide(), а вот блок #moscownot, напротив, выходит в режим show() т.е. выходит на первый план, предлагая пройти полную регистрацию. (См. рис. 2-3, строки кода 128-130)

Стоит обратить внимание на строку 135: блоки «Москвы» выводятся только при условии, что заказ еще не отправлен, а также — если не произведена сессия «moscow» (в случае прошлых заказов с данного компьютера). А иначе нам не нужно подтверждение местонахождения — посетитель уже подтвердил его ранее.

Еще одна деталь — кнопка «Зарегистрироваться». Указываем у ссылки атрибут target=»_top». Мы работаем в модульном окне через frame, и ссылки должны быть соответствующими.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Быстрый заказ: <?php echo $product_info['products_name']; ?></title>
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style>
html,body{
margin:0;
padding:0;
}
body {
  background: #fff url('workimages/bg_foot.jpg') no-repeat right 34px;
  color: #000;
  font-size: 13px;
  text-align:left;
}
h2 {
  font-size: 20px;
  line-height:34px;
  margin-bottom: 0;
  font-weight:bold;
  color: #333;
  padding-top:0px;
  padding-bottom: 12px;
  margin:0;
}
.contentContainer,.contentText,.contentText table,.contentText table td{background:transparent!important;}
.contentContainer{padding:10px 20px;}
p{color:#524d4e;
font-size:15px;}

input,textarea,.fieldKey{font-size:15px!important;}
.fieldKey{width:180px;}
.fieldValue{width:360px;}

.ovr2{width:100%;
height:110px;
overflow:auto;
margin-bottom:10px;}

.displaymoscow{
width:560px;
padding:10px 20px;
height:400px;
background: #fff url('workimages/bg_foot.jpg') no-repeat right 34px;
position:absolute;
z-index:1800;
}
.displaymoscow#moscownot{display:none;}
</style>
<script type="text/javascript">
jQuery(function($) {
$('#tdb1').click(function() {
              $('#moscow').hide(); return false;});

$('#tdb2').click(function() {
              $('#moscow').hide();
              $('#moscownot').show(); return false;});
</script>
</head>
<body>
 <?php
 if(!isset($HTTP_GET_VARS['action']) OR !$_SESSION['moscow'] == 1)
 //выводим блок #moscow, если заказ не отправлялся, а также - при отсутствии сессии "moscow" 
 { ?>
<div class="displaymoscow" id="moscow">
<h2>Быстрый заказ очков и оправ на StarOptic</h2>
<p> </p><p>Внимание! Сервис быстрого заказа доступен <B>только</B> для жителей Москвы. Это связано с тем, что для жителей других городов требуется более детальная информация.</p>
<p> </p><p> </p>
  <div style="float: right;">
    <?php echo tep_draw_button('Да, я из Москвы', 'check', null, 'primary'); ?>
    <?php echo tep_draw_button('Нет, я НЕ в Москве', 'info', null, 'disabled'); ?>
  </div>
</div>

<div class="displaymoscow" id="moscownot">
<h2>Быстрый заказ очков и оправ на StarOptic</h2>
 <p>Пожалуйста, пройдите регистрацию на сайте, чтобы осуществлять покупки в нашем интернет-магазине.</p>
  <p> </p><p> </p>
  <div style="float: right;">
    <span class="tdbLink"><a id="tblnew" target="_top" href="http://staroptic.ru/ochki-linzi-opravi/create_account.php">Зарегистрироваться</a></span><script type="text/javascript">$("#tblnew").button({icons:{primary:"ui-icon-extlink"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
  </div>
</div>
<?php
}?>

Следующим шагом мы посмотрим, отправлялся ли заказ. Если да, то выводим сообщение об успешной отправке.

<h2>Быстрый заказ очков и оправ на StarOptic</h2>

<?php
  if ($messageStack->size('contact') > 0) {
    echo $messageStack->output('contact');
  }
  //если заказ отправлен, выводим сообщение об успешной отправке
  if (isset($HTTP_GET_VARS['action']) && ($HTTP_GET_VARS['action'] == 'success')) {
?>

<div class="contentContainer" style="width:560px">
  <div class="contentText">
  <p>Заказ успешно отправлен в отдел обслуживания магазина. Наш менеджер свяжется с Вами по контактному телефону для уточнения деталей заказа и времени доставки.</p>
  </div>
</div>

<?php
  }

Иначе выводим форму быстрого заказа:

  else { //иначе (если заказ еще не отправлялся) выводим форму быстрого заказа:
?>

<?php echo tep_draw_form('bistriy_zakaz_s_sayta', tep_href_link('bistriy_zakaz_s_sayta.php', 'action=send'), 'post', '', true); ?>

<div class="contentContainer" style="width:560px">
  <div class="contentText">

  <?php
  if (tep_not_null($product_info['products_name'])) {
?>
    <div class="ovr2">
    <table border="0" width="100%" cellspacing="0" cellpadding="2">

      <?php
  if (tep_not_null($product_info['products_image'])) {
?>
   <tr>
   <td class="fieldKey">
   <?php
    //выводим картинку товара. Функция im_resam_min отвечает за вывод мини-изображения
    echo '<a target="_top" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id']) . '"><img src="' . im_resam_min(DIR_WS_IMAGES . $product_info['products_image']) . '" alt="'.$product_info['products_name'].'" width="160" /></a>'; ?>
    </td>
    <td class="fieldValue">
    <?php
    echo '<b>' . $products_price . ' <a target="_top" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id']) . '">'.$product_info['products_name'].'</a></b> ' . '<br /><b>Доставка</b>: Доставка по Москве в пределах МКАД (при заказе от 3500 руб) бесплатно. Подроднее об условиях доставки <a href="http://staroptic.ru/ochki-linzi-opravi/oplata-i-dostavka-c-178.html" target="_blank">читать здесь</a>'); ?>
    <input type="hidden" name="products_id" value="<?php echo $product_info['products_id']; ?>"><input type="hidden" name="products_name" value="<?php echo $product_info['products_name']; ?>"></td></tr>
<?php
  }
?>
</table>
</div>
<table border="0" width="100%" cellspacing="0" cellpadding="2">

<?php
  } else{
?>
 <table border="0" width="100%" cellspacing="0" cellpadding="2" style="display:none;">
<?php
  }
?>
     <tr>
        <td class="fieldKey">Ваше имя:</td>
        <td class="fieldValue"><?php echo tep_draw_input_field('name'); ?></td>
      </tr>
      <tr>
        <td class="fieldKey">Ваш телефон:</td>
        <td class="fieldValue"><?php echo tep_draw_input_field('phone'); ?></td>
      </tr>
      <tr>
        <td class="fieldKey">Адрес в Москве:</td>
        <td class="fieldValue"><?php echo tep_draw_input_field('adress_moscow'); ?></td>
      </tr>
      <tr>
        <td class="fieldKey" valign="top">Сообщение:</td>
        <td class="fieldValue"><?php echo tep_draw_textarea_field('enquiry', 'soft', 20, 2); ?></td>
      </tr>
    </table>
  </div>

  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', null, 'primary'); ?></span>
  </div>
  <br />
</div>
</form>

<?php
  }?>
</body></html>

Скрипт быстрого заказа завершён.

Вызов окна быстрого заказа на странице товара

На странице товара прописываем вызов окна быстрого заказа. Для этого нам нужно рядом с кнопкой «Добавить в корзину» создать вторую кнопку «Быстрый заказ» и сформировать ссылку вида: http://[интернет-магазин]/bistriy_zakaz_s_sayta.php?products_id=[ID товара] .

Кроме того, ссылка должна открываться в модульном окне (мною используется fancybox) в iframe.

<span class="tdbLink"><a id="tblnew" class="iframe" href="bistriy_zakaz_s_sayta.php?products_id=<?php echo $product_info['products_id'] ?>">Быстрый заказ</a></span><script type="text/javascript">$("#tblnew").button({icons:{primary:"ui-icon-newwin"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>

По аналогичной схеме следует создать кнопки быстрого заказа товара и на страницах категорий.

Этот материал опубликован в Лаборатория Кода, Маркетинг-Код и тегирован , , , , . Bookmark the permalink.

3 отзывов на Покупки в интернет-магазинах. Пишем скрипт быстрого заказа товара (на примере osCommerce)

  1. RAIDIX говорит:

    Огромное спасибо за скрипт, все получилось.

  2. Владимир говорит:

    Добрый день. Подскажите, а данный скрипт можно встроить в самописный сайт? Спасибо!

    • N.Volodina говорит:

      Здравствуйте. Да, можно. Только заменить некоторые специфические параметры oscommerce на свои.

Добавить комментарий для Владимир Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>