Убираем ненужные шаги при оформлении заказа на OpenCart

Привет, друзья! Каждый, кто впервые создает интернет-магазин на OpenCart рано или поздно столкнется с вопросом регистрации и оформления заказов. И, давайте, сегодня более детально поговорим о том, как можно убрать ненужные шаги при оформлении заказа и сделать форму намного проще.

Опенкарт из коробки имеет сложную и запутанную форму заказа. В реалиях русского Е-commerce нам нужен максимально простой заказ, в идеале, — это имя, номер телефона и адрес доставки\пункта самовывоза. В 90% случаев после оформления заказа оператор интернет-магазина перезванивает покупателю и уточняет остальные детали.

Начать стоит с того, что в стандартной настройке OpenCart, пользователь после того как отправляет товар в корзину и нажимает «Оформление заказа» сталкивается с 6 шагами оформления. В них легко можно запутаться, а многие покупатели просто могут передумать делать заказа и уйти к конкурентам, где все намного проще и быстрее. Кроме того, многие пользователи не любят и даже боятся разглашать в интернете свои личные данные.

Давайте посмотрим, как можно упростить форму заказа.

Заказ без регистрации

По-умолчанию опенкарт предлагает зарегестрироваться.

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

Для этого вам необходимо найти в файле catalog/view/theme/default/template/checkout/login.tpl следующие строки:

<div class="radio">
  <label>
  <?php if ($account == 'register') { ?>
  <input type="radio" name="account" value="register" checked="checked" />
  <?php } else { ?>
  <input type="radio" name="account" value="register" />
  <?php } ?>
  <?php echo $text_register; ?></label>
  </div>
  <?php if ($checkout_guest) { ?>
  <div class="radio">
  <label>
  <?php if ($account == 'guest') { ?>
  <input type="radio" name="account" value="guest" checked="checked" />
  <?php } else { ?>
  <input type="radio" name="account" value="guest" />
  <?php } ?>
  <?php echo $text_guest; ?></label>
  </div>

и заменить их на

<div class="radio">
  <label>
  <?php if ($account == 'register') { ?>
  <input type="radio" name="account" value="register" />
  <?php } else { ?>
  <input type="radio" name="account" value="register" />
  <?php } ?>
  <?php echo $text_register; ?></label>
  </div>
  <?php if ($checkout_guest) { ?>
  <div class="radio">
  <label>
  <?php if ($account == 'guest') { ?>
  <input type="radio" name="account" value="guest" checked="checked" />
  <?php } else { ?>
  <input type="radio" name="account" value="guest" checked="checked" />
  <?php } ?>
  <?php echo $text_guest; ?></label>
  </div>

Обновите страницу и теперь радио-кнопка «Оформить заказ без регистрации» всегда будет выбрана по умолчанию. Теперь скроем этот блок чтобы покупатель нажимая на кнопку «Оформить заказ» моментально переходил к непосредственному вводу персональных данных. Здесь все тоже достаточно просто. Для этого мы открываем все тот же файл catalog/view/theme/default/template/checkout/login.tpl и в начале добавляем скрипт:

<script>
$(document).ready(function(){
setTimeout(function(){
$('#button-account').trigger('click');
},400);
});
</script>

В завершении нужно полностью скрыть этот шаг, открываем: /catalog/view/theme/default/template/checkout/checkout.tpl и находим первую секцию вот такого:

<h1><?php echo $heading_title; ?></h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">

заменяем на:

<h1><?php echo $heading_title; ?></h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default" style="display:none;">

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

Теперь нам нужно подправить перевод в файле: /catalog/language/ru-ru/checkout/checkout.php иначе нумерация шагов будет начинаться с шага 2.

Девятая строка:

$_['text_checkout_payment_address']

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

В этом же файле можно поменять названия других блоков, полей ввода и плейсхолдеров.

Убираем лишние поля (фамилия, факс, компания и т.д.)

Именно на этом шаге отсеивается большинство покупателей. Создатели опенкарта пытались предусмотреть все возможные ситуации и сделали в этом блоке целых 12 пунктов, которые надо заполнить! Для своих магазинов я оставляю 5 из них:

Убираем лишние поля

Открываем фаил: /catalog/view/theme/default/template/checkout/guest.tpl. Нам нужно с помощью css скрыть поля ввода и вручную проставить параметр value, что бы при клике на «продолжить» opencart не ругался на незаполненные поля.

Например поле фамилия:

<div class="form-group required">
<label class="control-label" for="input-payment-lastname"><?php echo $entry_lastname; ?></label>
<input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-payment-lastname" class="form-control" />
</div>

меняем на:

<div class="form-group required" style="display:none;">
<label class="control-label" for="input-payment-lastname"><?php echo $entry_lastname; ?></label> 
<input type="text" name="lastname" value="&nbsp" placeholder="<?php echo $entry_lastname; ?>" id="input-payment-lastname" class="form-control" />
</div>

Таким способом убираем поля — фамилия, факс, компания, адрес, индекс.

Я обычно убираю поле индекса. Те кто его помнят, обычно пишут в поле адреса, а те кто не помнят — матерятся, лезут гуглить и могут бросить оформление заказа. Оставляйте на свое усмотрение.

Отдельная история с полями страны и региона, в них нужно подставить настоящие значения.

Меняем

<div class="form-group required">
<label class="control-label" for="input-payment-country"><?php echo $entry_country; ?></label>
<select name="country_id" id="input-payment-country" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($countries as $country) { ?>
<?php if ($country['country_id'] == $country_id) { ?>
<option value="<?php echo $country['country_id']; ?>" selected="selected"><?php echo $country['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>

на

<div class="form-group required" style="display:none;">
<label class="control-label" for="input-payment-country"><?php echo $entry_country; ?></label>
<input type="text" value="176" name="country_id" id="input-payment-country" class="form-control">
</div>

Значение 176 — это Российская Федерация

В блоке региона меняем

<div class="form-group required">
<label class="control-label" for="input-payment-zone"><?php echo $entry_zone; ?></label>
<select name="zone_id" id="input-payment-zone" class="form-control">
</select>
</div>

на

<div class="form-group required" style="display:none;">
<label class="control-label" for="input-payment-zone"><?php echo $entry_zone; ?></label>
<input type="text" value="2761" name="zone_id" id="input-payment-zone" class="form-control">
</div>

Значение 2761 — это код Московского региона.

Меняем местами поля город и адрес

Поля город и адрес в нашем блоке расположены нелогично — сначала идет поле адреса, а потом города. Исправим это.

Находим и вырезаем блок

<div class="form-group required">
<label class="control-label" for="input-payment-city"><?php echo $entry_city; ?></label>
<input type="text" name="city" value="<?php echo $city; ?>" placeholder="<?php echo $entry_city; ?>" id="input-payment-city" class="form-control" />
</div>

вставляем его перед блоком

<div class="form-group required">
<label class="control-label" for="input-payment-address-1"><?php echo $entry_address_1; ?></label>
<input type="text" name="address_1" value="<?php echo $address_1; ?>" placeholder="<?php echo $entry_address_1; ?>" id="input-payment-address-1" class="form-control" />
</div>

Скрываем галочку — «Мой адрес доставки совпадает с платежным»

Все в том же файле guest.tpl находим блок

<?php if ($shipping_required) { ?>
<div class="checkbox">
<label>
<?php if ($shipping_address) { ?>
<input type="checkbox" name="shipping_address" value="1" checked="checked" />
<?php } else { ?>
<input type"checkbox" name="shipping_address" value="1"/> 
<?php } ?>
<?php echo $entry_shipping; ?></label>
</div> 
<?php } ?>

меняем на

<?php if ($shipping_required) { ?>
<div class="checkbox" style="display:none;">
<label>
<?php if ($shipping_address) { ?>
<input type="checkbox" name="shipping_address" value="1" checked="checked" />
<?php } else { ?>
<input type="checkbox" name="shipping_address" value="2" checked="checked"/>
<?php } ?>
<?php echo $entry_shipping; ?></label>
</div>
<?php } ?>

теперь наша форма заказа выглядит вот так:

Делаем поле email необязательным и скрывем его

Часто email абсолютно лишнее поле, например, когда у вас сайт по доставке пиццы. В файле \catalog\controller\checkout\guest.php находим и удаляем:

if ((utf8_strlen($this->request->post['email']) > 96) || !filter_var($this->request->post['email'], FILTER_VALIDATE_EMAIL)) {
$json['error']['email'] = $this->language->get('error_email');}

А в файле /catalog/view/theme/default/template/checkout/guest.tpl меняем

<div class="form-group required">
<label class="control-label" for="input-payment-email"><?php echo $entry_email; ?></label>
<input type="text" name="email" value="<?php echo $email; ?>" placeholder="<?php echo $entry_email; ?>" id="input-payment-email" class="form-control" />
</div>

на

<div class="form-group required" style="display:none;">
<label class="control-label" for="input-payment-email"><?php echo $entry_email; ?></label>
<input type="text" name="email" value="<?php echo $email; ?>" placeholder="<?php echo $entry_email; ?>" id="input-payment-email" class="form-control" />
</div>

Убираем шаг 3 — Адрес доставки

Это блок заставляет пользователя вводить данные из прошлого шага еще раз. Убираем, в файле /catalog/view/theme/default/template/checkout/checkout.tpl находим код

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><?php echo $text_checkout_shipping_address; ?></h4>
</div>

и меняем на

<div class="panel panel-default" style="display:none;">
<div class="panel-heading">
<h4 class="panel-title"><?php echo $text_checkout_shipping_address; ?></h4>
</div>

Для магазина торгующего физическими товарами этого вполне достаточно, в итоге получаем простую и понятную форму заказа.

Убираем поле комментариев в блоке с оплатой

Комментарий в блоке доставки — это логично, часто покупатель пишет уточнения по времени доставки или как лучше найти адрес, но комментарий при оплате совершенно лишнее поле. Находим в файле \catalog\view\theme\default\template\checkout\payment_method.tpl код и удаляем его

<p><strong><?php echo $text_comments; ?></strong></p> 
<p>   
<textarea name="comment" rows="8" class="form-control"><?php echo $comment; ?></textarea>
</p>

Отключаем выбор способа доставки

Открываем /system/library/cart.php, находим функцию:

public function hasShipping() {
$shipping = false;

foreach ($this->getProducts() as $product) {
if ($product['shipping']) {
$shipping = true;

break;
}
}

return $shipping;
}

В самом начале функции добавляем строчку с отключением доставки, в итоге получается:

public function hasShipping() {
return false;
		
$shipping = false;

foreach ($this->getProducts() as $product) {
if ($product['shipping']) {
$shipping = true;

break;
}
}

return $shipping;
}

Отключаем оплату

Отключаем выбор способа оплаты. Заходим в админку, открываем: «Мено» -> «Модули / Расширения» и в выпадающем списке выбираем «Оплата». Отключаем все способы кроме «Оплата при доставке». Заходим в настройку этого способа оплаты и проверяем его настройки:

Нижняя граница: 0
Статус заказа после оплаты: Complete
Географическая зона: Все регионы
Статус: Включено
Порядок сортировки: 0

Далее открываем файл: /catalog/view/theme/default/template/checkout/payment_method.tpl в самом верху файла добавляем скрипт, который автоматически нажимает кнопку «Далее»:

<script>
$(document).ready(function(){
setTimeout(function(){
$('#button-payment-method').trigger('click');
},1000);
});
</script>

Чтобы джаваскрипт смог нажать кнопку «далее», нужно установить галочку в пункте «Я прочитал Terms & Conditions и согласен с условиями». Находим этот кусочек кода:

<?php if ($agree) { ?>
<input type="checkbox" name="agree" value="1" checked="checked" />
<?php } else { ?>
<input type"checkbox" name="agree" value="1" />
<?php } ?>
<?php if ($agree) { ?>
<input type="checkbox" name="agree" value="1" checked="checked">
<?php } else { ?>
<input type="checkbox" name="agree" value="1">
<?php } ?>

И меняем его на:

<input type="checkbox" name="agree" value="1" checked="checked" />

<input type"checkbox" name="agree" value="1" checked="checked" />

Теперь полностью скрываем этот шаг из блоков на странице заказа, открываем файл: /catalog/view/theme/default/template/checkout/checkout.tpl, находим следующий код:

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><?php echo $text_checkout_payment_address; ?></h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-method">
<div class="panel-body"></div>
</div>
</div>

Меняем его на:

<div class="panel panel-default" style="display:none;">
<div class="panel-heading">
<h4 class="panel-title"><?php echo $text_checkout_payment_address; ?></h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-method">
<div class="panel-body"></div>
</div>
</div>

Теперь наша форма заказа выглядит вот так:

Форма заказа

Модули для страницы заказа

Для своих магазинов по-началу я использовал вариант приведенный выше, но потом перешел на связку модулей Simple и Filterit. У меня несколько вариантов оплаты и доставки для Москвы, Питера и отдельно по России. Плюс, цена доставки и способ оплаты меняются от типа товаров и их количества. Выглядит вот так (при выборе варианта с курьерской доставкой, появляется строка ввода адреса):

Модули для страницы заказа