OpenCart Подробные инструкции по работе с 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" />
<?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=" " 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="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>
Для магазина торгующего физическими товарами этого вполне достаточно, в итоге получаем простую и понятную форму заказа.
Убираем поле комментариев в блоке с оплатой
Комментарий в блоке доставки — это логично, часто покупатель пишет уточнения по времени доставки или как лучше найти адрес, но комментарий при оплате совершенно лишнее поле. Находим в файле \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. У меня несколько вариантов оплаты и доставки для Москвы, Питера и отдельно по России. Плюс, цена доставки и способ оплаты меняются от типа товаров и их количества. Выглядит вот так (при выборе варианта с курьерской доставкой, появляется строка ввода адреса):
