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

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

Coдepжaниe cтaтьи

Заказ без регистрации
Убираем лишние поля (фамилия, факс, компания и т.д.)
Убираем шаг 3 — Адрес доставки
Модули для страницы заказа

Вот так страница заказа выглядит по-умолчанию

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

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

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

Для этого вам необходимо найти в файле 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>

<label>

<?php if ($account == 'register') { ?>

<?php } else { ?>

<?php } ?>

<?php echo $text_register; ?></label>

</div>

<?php if ($checkout_guest) { ?>

<label>

<?php if ($account == 'guest') { ?>

<?php } else { ?>

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

<label>

<?php if ($account == 'register') { ?>

<?php } else { ?>

<?php } ?>

<?php echo $text_register; ?></label>

</div>

<?php if ($checkout_guest) { ?>

<label>

<?php if ($account == 'guest') { ?>

<?php } else { ?>

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

$(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']

1	$_['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>

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

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

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

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

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

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

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

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

<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) { ?>

<label>

<?php if ($shipping_address) { ?>

<?php } else { ?>

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

<?php if ($shipping_required) { ?>

<label>

<?php if ($shipping_address) { ?>

<?php } else { ?>

<?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');}

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

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

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

и меняем на

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

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

<p>

</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() {

$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;
  }

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>

$(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 } ?>

<?php if ($agree) { ?>

<?php } else { ?>

<?php } ?>

<?php if ($agree) { ?>

<?php } else { ?>

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

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

</div>

</div>

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

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

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

(41 оценок, среднее: 4,27 из 5)

Загрузка...