категория: , Дорабатываем
✎ Опубликовано: 30.05.2015 ✎ Обновлено: 12.06.2015 ☕ Просмотров: 15432 ✉ Комментарии: 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) т.к. из-за нее показ опций будет недоступен. Если все же нужны переключения список-сетка, или же требуется помощь в установке этого функционала на сайт, обращайтесь, посмотрю в индивидуальном порядке.
Да, можно использовать и 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 блока цены для определенного товара.
Код не полный, но это направление в котором надо делать доработки и после выбора опции будет обновляться цена.
Бывают случаи, когда в списке товаров нужно кроме основного изображения вывести и дополнительные. Например, интернет-магазин фейерверков.
В стандартной реализации Opencart не предусмотрен вывод производителя товара в категории, но в некоторых ситуациях он просто необходим.
В CMS Opencart очень много есть преимуществ перед аналогами. Однако эта система имеет и свои недостатки. Самым серьезным из которых, как я считаю, являются – дубли страниц.
В одном из проектов интернет-магазина керамики заказчик захотел видеть в функционале магазина «Вывод коллекций плитки определенного производителя».
Читая информацию о рекламе в facebook я нашел кое что интересное
Чистый и валидный HTML и CSS код, Хорошие показатели Google Page Speed, Более 20 модулей в комплекте, Профессиональная техническая поддержка - это только часть того что есть в шаблоне
Исправляем странный баг в Opencart в удаляется товар при копировании. Этот баг присутствует в google chrome
Также в статье хочу выразить благодарность не только Виталию а и другим крутым авторам дополнений с кем приходилось иметь дело
Чтобы принимать Биткоин и Лайткоин в OpenCart, вам не нужно заполнять утомительные документы, проходить проверку и ждать несколько дней. Установите бесплатный модуль и просто введите адрес своего Биткоин и/или Лайткоин кошелька. Тогда все входящие платежи
Монобанк - прогрессивный банк без отделений в котором дают кредитные карточки с хорошим грейс периодом а также возможностью заработать открыв в нем депозит. Именно о нем и пойдет речь
Мы знаем что поисковые роботы любят текст на страницах. Однако публикуя тексты помните предназначена ли эта страница для такого текста
Небольшой пример как можно сделать автоматически содержание описания со скролом при клике на заголовок
Обзор платежного шлюза fondy который позволяет сделать онлайн оплату на сайте за любые товары или услуги
Как оптимизировать сайт для google page speed - обзор основного функционала сервиса от гугл для проверки скорости загрузки страницы
Для того что бы вывести кастомную информацию не надо много кода. Достаточно применить правильный подход и пару строк кода. Читаем в статье.
Как мне "посчастливилось" пощупать UMI CMS особенно со стороны переноса данных и почему меня до сих пор тошнит при слове UMI
В этом обзоре будут выявлены все плюсы и минусы каждого фильтра. Всего в обзоре будет 7 фильтров который продаются и развиваются. По завершению будет дана рекомендация какой же выбрать
Коллеги, давайте предоставлять хороший сервис и поднимать планку качества. Небольшая история как я обращался к разным разработчикам