Иконки способов оплаты и доставки

2023-05-04

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

Самый простой способ добавить иконки к названиям вариантов доставки/оплаты это закинуть картинки иконок в папку image/catalog(или можно также загрузить картинки через стандартный загрузчик) и дописать в файл языка способа оплаты/доставки <img src="путь к картинке"> в переменную $_['text_title'].Должно получиться например так -
$_['text_title'] = '<img src="/image/catalog/nalichka.png"> Оплата при получении';
Файлы языков оплат находятся в папке /catalog/language/ru-ru/extension/payment
Файлы языков доставок в папке /catalog/language/ru-ru/extension/shipping
Например файл cod - это Оплата при получении, а файл flat - Фиксированная стоимость доставки.

Вместо картинок можно использовать иконки FontAwesome, для этого в нужно изменить текст например так - $_['text_title'] = '<i class="fa fa-bus" aria-hidden="true"></i> Оплата при получении';

Если все сделано правильно, то в итоге получится такой результат:

Значки оплаты и доставки opencart

Это был первый способ - быстрый и простой. Во втором случае придется править язык и модель варианта, и настроить отображение в checkout. Я не планирую использовать отдельные изображения, использоваться будут только иконки от FontAwesome
. 1. Добавляем в файл языка новое поле text-icon и значение иконки, например:
$_['text_icon'] = 'fa-solid fa-money-bill-1-wave';

2. Добавляем в модель варианта, перед 'title' => $this->language->get('text_title'), новый индекс:
'icon' => $this->language->get('text_icon'),

3. Теперь изменяем view в папке - catalog\view\theme\default\template\checkout\ файлы payment_method.tpl и shipping_method.tpl для оплаты и доставки соответственно.
В файле payment_method.tpl найти строку '<?php echo $payment_method['title']; ?> и перед ней добавить
<?php if (isset($payment_method['icon'])) echo "<i class=\"".$payment_method['icon']."\"></i>";?>
В файле shipping_method.tpl найти строку <?php echo $quote['title']; ?> - <?php echo $quote['text']; ?> и перед ней вставить
<?php if (isset($quote['icon'])) echo "<i class=\"".$quote['icon']."\"></i>";?>

Дальше можно добавлять иконки используя первый, второй шаги.
Я считаю, что хоть этот способ и более длинный, но более правильно структурирован.
Кстати если вы используете модуль Simple, то в нем можно настроить иконки прямо из админки, нужно выбрать "Переопределить текст варианта".

Иконки оплаты в Simple opencart

Еще желательно убрать стандартные переключатели, т.к. они кажутся лишними. Лучше будет чтобы вместо переключателей использовались сами иконки.
Для этого добавим классы к лейблам переключателей в payment_method.tpl и shipping_method.tpl, должно получиться <label class="payment-method"> и <label class="shipping-method"> соответственно.
Также в файле стилей catalog/view/theme/default/stylesheet/stylesheet.css нужно добавить такие стили:

.radio .shipping-method, .radio .payment-method{ /*Убираем отступ*/
	padding-left: 0;
}
input[name="shipping_method"], input[name="payment_method"] { /*Скрываем стандартный*/ 
	display: none;                                           /*переключатель*/
}
input[name="shipping_method"]:checked + i, input[name="payment_method"]:checked + i {
	color: green;                                      /*Украшаем выбранную иконку*/
	font-size: 16px;
	padding:3pt;
}

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

Заменить радиокнопки иконками