Опенкарт из коробки имеет сложную и запутанную форму заказа. В реалиях русского Е-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"  />
        <?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>

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

 
    <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>

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

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

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

<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="1" 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>
Для магазина торгующего физическими товарами этого вполне достаточно, в итоге получаем простую и понятную форму заказа Убираем ненужные шаги при оформлении заказа на OpenCart
Убираем ненужные шаги при оформлении заказа на OpenCart

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

Комментарий в блоке доставки - это логично, часто покупатель пишет уточнения по времени доставки или как лучше найти адрес, но комментарий при оплате совершенно лишнее поле. Находим в файле \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_method; ?></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_method; ?></h4>
          </div>
          <div class="panel-collapse collapse" id="collapse-payment-method">
            <div class="panel-body"></div>
          </div>
        </div>	

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

Форма заказа на опенкарт без оплаты и доставки
Форма заказа на опенкарт без оплаты и доставки

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

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

Форма заказа с модулем Simple + Filterit
Форма заказа с модулем Simple + Filterit