• Главная
• Дорабатываем
• Выбор опций в списке товаров

Выбор опций в списке товаров на странице категории

категория: , Дорабатываем

✎ Опубликовано: 30.05.2015 ✎ Обновлено: 12.06.2015 ☕ Просмотров: 10365 ✉ Комментарии: 11

Часто бывает, что продаваемый товар в интернет магазине не нуждается в отдельной странице. Вот как, например, гвозди. Им не надо отдельная страница

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

С коробки Opencart умеет выводить товары и сеткой и списком, также есть функция прямого добавления в корзину без перехода на страницу товара. Казалось бы, зачем что-то придумывать, если все уже работает, нужно ведь удалить ссылку входа на сам товар и у нас будет все как задумано. Но не совсем так все просто. Дело в том, что если товар имеет обязательные опции, то вместо добавления в корзину вы перейдете на страницу товара где и будет предложено выбрать определенную опцию и только после того товар можно будет купить, что совершенно неудобно.

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

Итак, задача понятная, сделать вывод опций в списке товаров на странице категории. Выводить будем только в виде select (список), так как чекбоксы, радио и т.д. не логично для наших целей. По этому опциям нужно ставить тип – список.

Первым делом нам надо сделать выборку всех опций в контроллере, что бы их передать на шаблон. Для этого открываем catalog/controller/product/category.php находим строку

$this->data['products'][] = array(

Эта строка заполняет циклом данные о каждом товаре, который будет выведен в категории. Перед ней вставляем

$options = array();

foreach ($this->model_catalog_product->getProductOptions($result['product_id']) as $option) { 
	if ($option['type'] == 'select') { 
		$option_value_data = array();
		
		foreach ($option['option_value'] as $option_value) {
			if (!$option_value['subtract'] || ($option_value['quantity'] > 0)) {
				if ((($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) && (float)$option_value['price']) {
					$price = $this->currency->format($this->tax->calculate($option_value['price'], $result['tax_class_id'], $this->config->get('config_tax')));
				} else {
					$price = false;
				}
				
				$option_value_data[] = array(
					'product_option_value_id' => $option_value['product_option_value_id'],
					'option_value_id'         => $option_value['option_value_id'],
					'name'                    => $option_value['name'],
					'image'                   => $this->model_tool_image->resize($option_value['image'], 50, 50),
					'price'                   => $price,
					'price_prefix'            => $option_value['price_prefix']
				);
			}
		}
		
		$options[] = array(
			'product_option_id' => $option['product_option_id'],
			'option_id'         => $option['option_id'],
			'name'              => $option['name'],
			'type'              => $option['type'],
			'option_value'      => $option_value_data,
			'required'          => $option['required']
		);					
	}
}	

После находим строку

'tax'         => $tax,

После нее вставляем

'options'         => $options,

Теперь наш массив будет содержать все опции товара. После чего нам надо сделать их вывод и возможность выбора при покупке товара на странице категории.

Для этого открываем catalog/view/theme/default/template/product/category.tpl

и находим строку

<?php foreach ($products as $product) { ?>

И в любое место в этом цикле *вставляем вывод опций товара

<?php if ($product['options']) { ?>
	<div class="options opt_<?php echo $product['product_id']; ?>">
	<input type="hidden" name="product_id" value="<?php echo $product['product_id']; ?>" />
		<?php foreach ($product['options'] as $option) { ?>
			<div class="option_item">
			<?php if ($option['required']) { ?>
			<span class="required">*</span>
			<?php } ?>
			<b><?php echo $option['name']; ?>:</b>
			<select name="option[<?php echo $option['product_option_id']; ?>]">
			<option value="">Выберите</option>
			<?php foreach ($option['option_value'] as $option_value) { ?>
			<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
			<?php if ($option_value['price']) { ?>
			(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
			<?php } ?>
			</option>
			<?php } ?>
			</select>
			</div>
		<?php } ?>
	</div>
<?php } ?>

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

<?php echo $footer; ?>

Перед ней вставляем функцию

<script type="text/javascript"><!--
function addToCartOpt(product_id){
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('.opt_'+product_id+' input[type=\'hidden\'], .opt_'+product_id+' select'),
		dataType: 'json',
		success: function(json) {
		$('.success, .warning, .attention, information, .error').remove();
		if (json['error']) {
		if (json['error']['option']) {
		for (i in json['error']['option']) {
		$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
		}
		}
		}
		if (json['success']) {
		$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
		$('.success').fadeIn('slow');
		$('#cart-total').html(json['total']);
		$('html, body').animate({ scrollTop: 0 }, 'slow');
		}
		}
	});
}

//--></script>

После изменяем строку

<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />

На новую кнопку добавления в корзину

<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCartOpt('<?php echo $product['product_id']; ?>');" class="button" />

После этих изменений в списке товаров на странице категории будет доступен выбор опций и непосредственно добавление в корзину покупок.

* Примечание к статье. Так как у каждого магазина свои шаблоны, дизайны и стили в статье не затрагивалось место куда (после или перед какой) строкой вставлять код вывода опций, указан только цикл, в который надо вставить код. Пробуйте на своем магазине и вставляйте туда, где это нужно. После, конечно же, надо задать стили отображения для выпадающего списка, согласно дизайну магазина, где также все индивидуально. И еще нюанс. Если на сайте не используется переключение сетка или список удалите функцию в javascript которая находится внизу файла function display(view) т.к. из-за нее показ опций будет недоступен. Если все же нужны переключения список-сетка, или же требуется помощь в установке этого функционала на сайт, обращайтесь, посмотрю в индивидуальном порядке.

Виктор 30.05.2015

Проделал. Круто! Заработало. Теперь ищу как сделать чтобы обновлялась цена в блоке! Переделал кстати на radio кнопки — убрал условие если селект и код вывода опции скопировал из продукта!

Ответ for-opencart.com 30.05.2015

Да, можно использовать и radio переключатели, также и другие типы: изображения, дату, даже файл. Нужно переделать под свои нужды. Как вариант, можно даже сделать полный функционал выбора опций в списке товаров. Для этого нужно скопировать код выбора опций в карточке товара и предварительно подредактировав вставить в место выбора в категории.

Для обновления цены надо сделать следующие доработки:

1. Выводим в select>option или в radio data атрибут стоимость, пример:

<input type="radio" name="option[230]" value="23" data-price="260">Текст опции

2. Делаем jquery обработчик события:

$(input[type="radio"]).click(function(){
  $('.price-id_product').text($(this).data('price'));
});

Где price-id_product - это это id блока цены для определенного товара.

Код не полный, но это направление в котором надо делать доработки и после выбора опции будет обновляться цена.

Кирилл 22.08.2015

Вы бы не могли мне сделать тоже самое вот только для радио переключателя именно нужно + вывод количества на витрину! О цене договоримся...

Ответ for-opencart.com 22.08.2015

Можно сделать, напишите полностью задание и оговорим.

Баха 21.10.2015

Можете подсказать как сделать такое на главной странице? что бы вместо цены было цена с опции?

Ответ for-opencart.com 21.10.2015

Да все по аналогии делаете только в модуле который выводится на главной.

Андрей 24.12.2015

После манипуляций опции появились в списке, но пропала цена что то аффтар не учёл

Ответ for-opencart.com 24.12.2015

Проверьте еще раз код, перед тем как публиковать, код тестируется. Версия opencart 1.5.x - 1.6.x?

Андрей 27.12.2015

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

Ответ for-opencart.com 27.12.2015

Там смотрите все по аналогии, формирование массива одинаковое.

Denis 10.10.2016

А для OcStore 2.1 в чём будет отличие? Заранее спасибо

Ответ for-opencart.com 10.10.2016

Будут некоторые отличия вместо $this->data будет $data и для добавления в корзине будет cart.add

Антон 10.10.2016

После манипуляций в контроллере пропадает цена, подскажите почему это возможно? уже устал ковыряться :(

Ответ for-opencart.com 10.10.2016

Смотрите внимательно, где-то либо ошибку допустили либо другия проблема.

Сергей 17.05.2017

А как сделать, что бы в Сетке - не было опций, а в Списке и Прайсе они были? Что и как для этого нужно изменить?

Ответ for-opencart.com 17.05.2017

Ну например в стилях прописать:

.product-grid .options{display:none;}

где options -это класс с опциями, а product-grid - это класс блока когда просмотр в режиме Сетка

Семен 01.12.2017

Здравствуйте. Большое спасибо, все работает, правда с небольшими изменениями т.к. (судя по коментариям с такой проблемой столкнулся не только я ) изначально после добавления кода в категориях пропала цена товара. Пришлось удалить строку $price = false; из кода добавляемого в catalog/controller/product/category.php

Ответ for-opencart.com 01.12.2017

Добрый день! Отлично! Спасибо за комментарий.

Дмитрий 24.02.2018

Не обновляет корзину, пишет что в ней товар, наводишь на нее, а там пусто! По F5 все норм!

Ответ for-opencart.com 24.02.2018

Смотрите по корзине уже, вернее по скрипту добавления что бы он обновлял, если в корзину идет значит все ок, просто надо под шаблон подредактировать код что бы вверху обновляло все.

Alex 15.04.2018

в ocstore 2.. не работает Выдает ошибку на этой строке foreach ($this->model_catalog_product->getProductOptions($result['product_id']) as $option

Ответ for-opencart.com 15.04.2018

А перед этим строка есть $this->load->model('catalog/product'); Смотрите по ошибке на что ругается