admin Опубликовано 12 марта, 2022 Поделиться Опубликовано 12 марта, 2022 Часто бывает, что продаваемый товар в интернет магазине не нуждается в отдельной странице. Вот как, например, гвозди. Зачем конкретному типу гвоздю или саморезу, шурупу и т.д. создавать отдельную страницу (карточку товара) если в этом нет необходимости. Гораздо проще выводить все списком или же сеткой на странице категории с возможностью выбора опций и добавления в корзину. С коробки 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) т.к. из-за нее показ опций будет недоступен. 0 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.