[Решено]Выбор опций в списке товаров

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

С коробки 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) т.к. из-за нее показ опций будет недоступен.