Работа- досуг

Изображения в карточке товара opencart

2022-10-25

Интернет-магазин на opencart уже из коробки работает достаточно сносно, но пользоваться им не комфортно. Я уже писал ранее о некоторых доработках интерфейса, и они добавляли комфорта пользователю.
В этой статье хочу поделиться небольшой информацией об улучшении карточки товара Opencart.
Информация для opencart 2.3.

Любой товар может иметь основное изображение и несколько дополниетьных картинок. Это хорошо, но со стороны пользователя выглядит это все уныло и бесполезно: показывается основная картинка, а снизу показываются маленькие. Если нажать на маленькую картинку - она открывается на весь экран и их можно листать, а потом закрывать, что вобщем-то никому не нужно.

Стандартное отображение товара в карточке opencart

Результатом модификации должно стать отображение списка миниатюр, при наведении на котороые изменяло бы основное изображение товара, а при нажатии так бы и открывало бесполезную галерею.

Все изменения будут происходить в файле product.tpl по адресу catalog/view/theme/default/template/product.
Итак, вот так выглядит код стандартного отображения изображений товара:

Как видно все изображения товара отображаются в виде горизонтального списка. Этот код нужно немного изменить.

Теперь картинки отображаются вертикально, и результат почти готов. Осталась самая малось - приукрасить css и добавить скрипт на смену картинки товара при наведении. Файл стилей находится по адресу docs/catalog/view/theme/default/stylesheet/stylesheet.css

После этих изменений, вернемся в файл product.tpl, и добавим новый обработчик события. Для этого перед функцией:

$(document).ready(function() {
	$('.thumbnails').magnificPopup({

Добавим такой код:

$(document).ready(function() {
	$('.thumbnail').hover(function(){
	var background = (this).parentElement.href;
	$(this).parent().parent().parent().css({
	'background-image' : 'url(' + background + ')'
	})
	});
});

На этом доработка окончена. Скачать файлы к статье можно здесь.

модифицированое отображение картинок товара opencart

Посмотреть как работает отображение картинок товара в новом исполнении можно тут.