Иконки способов оплаты и доставки
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> Оплата при получении';
Если все сделано правильно, то в итоге получится такой результат:
Это был первый способ - быстрый и простой. Во втором случае придется править язык и модель варианта, и настроить отображение в 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, то в нем можно настроить иконки прямо из админки, нужно выбрать "Переопределить текст варианта".
Еще желательно убрать стандартные переключатели, т.к. они кажутся лишними. Лучше будет чтобы вместо переключателей использовались сами иконки.
Для этого добавим классы к лейблам переключателей в 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; }
Теперь все выглядит максимально эффектно, при переключении иконка становится зеленой и увеличивается в размере. Вы можете посмотреть работу иконок при заказе на тестовом домене.