Русский
Українська
English
Доброго времени суток уважаемый посетитель нашего сайта. Если ты находишься на данной странице то наверняка тебя заинтересовала возможность вывода опций товара в категорию (список) товаров. Данная задача очень часто у меня возникает когда клиент заказывает разработку интернет магазина, в связи с этим я опишу здесь реализацию данного способа, ведь сложного здесь ничего нет и после ознакомления и следуя данной инструкции вы без труда сможете отобразить все доступные опции товара в категории opencart.
По умолчанию opencart дает возможность выбора соответствующей опции только в самой карточке товара, но нам же нужен именно вывод опций в списке товаров на странице категории, по сути нам нужно скопировать существующую конструкцию опций карточки товара и поместить ее в категорию, обычное копирование конечно же ничего не даст и нужно будет немного изменить и добавить код , что бы опции не просто показывались но и еще что бы была возможность делать покупку товара не уходя со страницы категории.
Опции в категории очень удобно особенно для каких то однотипных товаров для которых клиенту не обязательно смотреть описание и характеристики товара, и он сможет не уходя с общего списка добавить все интересующие его позиции в корзину.
Что еще можно сказать, данный метод вывода опций в категории будет работать именно на версии opencart 1.5... Так как именно на данной версии клиент купил у меня готовый интернет магазин и именно для него я писал инструкцию для опций. Данный способ конечно же можно использовать и для двойки или же других версий, но с применением небольших изменений но по сути все остается таким же.
В общем, я не буду здесь разводить что и к чему, каждый сам решает нужны ли ему опции в категории или же нет, я просто опубликую здесь готовое решение которое позволит вам добавить опции товара в категорию, и так приступим.
Изменения мы будем вносить всего в три файла:
- catalog/language/russian/product/category.php (языковый файл)
- catalog/controller/product/category.php (контролер категории)
- catalog/view/theme/Ваш_шаблон/template/product/category.tpl (Ну и сам шаблон TPL категории)
Первым открываем файл контролера catalog/controller/product/category.php и вносим требуемые изменения:
Находим код:
|
1 |
$this->data['products'][] = array( |
И сразу же перед ним добавляем:
|
1 |
$options = $this->model_catalog_product->getProductOptions($result['product_id']); |
Там же чуть ниже ищем код:
|
1 |
'product_id' => $result['product_id'], |
и после него добавляем:
|
1 |
'options' => $options, |
Далее ищем следующий кусок кода:
|
1 |
$this->data['text_limit'] = $this->language->get('text_limit'); |
После которого добавляем следующее:
|
1 |
$this->data['text_select'] = $this->language->get('text_select'); |
Все с контролером закончили и теперь можно приступать к правке следующего файла.
Вторым отрываем файл шаблона категории вашей темы (шаблона) Opencart, а именно открываем файл catalog/view/theme/Ваш_шаблон/template/product/category.tpl
Находим кусок кода:
|
1 |
<div class="description"><?php echo $product['description']; ?></div> |
После которого и выведем блок с списком опций а именно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<div class="options"> <?php if ($product['options']) { ?> <div id="option_<?php echo $product['product_id']; ?>"> <br /> <?php foreach ($product['options'] as $option) { ?> <?php if ($option['type'] == 'select') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <?php if ($option['required']) { ?> <span class="required">*</span> <?php } ?> <b><?php echo $option['name']; ?>:</b><br /> <select name="option[<?php echo $option['product_option_id']; ?>]"> <option value=""><?php echo $text_select; ?></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> <br /> <?php } ?> <?php if ($option['type'] == 'radio') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <?php if ($option['required']) { ?> <span class="required">*</span> <?php } ?> <b><?php echo $option['name']; ?>:</b><br /> <?php foreach ($option['option_value'] as $option_value) { ?> <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /> <label for="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 } ?> </label> <br /> <?php } ?> </div> <br /> <?php } ?> <?php if ($option['type'] == 'checkbox') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <?php if ($option['required']) { ?> <span class="required">*</span> <?php } ?> <b><?php echo $option['name']; ?>:</b><br /> <?php foreach ($option['option_value'] as $option_value) { ?> <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /> <label for="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 } ?> </label> <br /> <?php } ?> </div> <br /> <?php } ?> <?php if ($option['type'] == 'image') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <?php if ($option['required']) { ?> <span class="required">*</span> <?php } ?> <b><?php echo $option['name']; ?>:</b><br /> <table class="option-image"> <?php foreach ($option['option_value'] as $option_value) { ?> <tr> <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td> <td><label for="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 } ?> </label></td> </tr> <?php } ?> </table> </div> <br /> <?php } ?> <?php if ($option['type'] == 'time') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <?php if ($option['required']) { ?> <span class="required">*</span> <?php } ?> <b><?php echo $option['name']; ?>:</b><br /> <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="time" /> </div> <br /> <?php } ?> <?php } ?> </div> <?php } ?> </div> |
После ищем кусок кода:
|
1 |
html += ' <div class="description">' + $(element).find('.description').html() + '</div>'; |
И после него добавим следующее:
|
1 |
html += ' <div class="options">' + $(element).find('.options').html() + '</div>'; |
Далее после строки:
|
1 |
html += '<div class="description">' + $(element).find('.description').html() + '</div>'; |
Добавим следующее:
|
1 |
html += ' <div class="options">' + $(element).find('.options').html() + '</div>'; |
После ищем код:
|
1 |
<?php echo $content_bottom; ?></div> |
И добавляем после него немного стилей и JS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<style type="text/css"> .product-list .options { z-index:999999999; margin-top:-70px; margin-left:420px; } .product-list .description { line-height: 15px; margin-bottom: 5px; width:410px; color: #4D4D4D; } .product-grid .options { } </style> <script type="text/javascript"> function add_bc(product_id) { data = $('#option_'+product_id+' input[type=\'text\'], #option_'+product_id+' input[type=\'radio\']:checked, #option_'+product_id+' input[type=\'checkbox\']:checked, #option_'+product_id+' select, #option_'+product_id+' textarea'); $.ajax({ url: 'index.php?route=checkout/cart/add', type: 'post', data: data.serialize() + '&product_id=' + product_id, dataType: 'json', beforeSend: function(){ }, success: function(json) { $('.success, .warning, .attention, information, .error').remove(); if (json['error']) { if (json['error']['warning']) { $('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); $('.warning').fadeIn('slow'); } for (i in json['error']) { $('#option-' + i).after('<span class="error">' + json['error'][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> |
И самым последним пунктом нужно будет найти на странице:
|
1 |
addToCart |
И заменить его на:
|
1 |
add_bc |
Все с файлом шаблона закончили.
Последним третьим файлом будет файл catalog/language/russian/product/category.php в котором нам нужно будет в произвольном месте добавить одну единственную строчку перевода а именно:
|
1 |
$_['text_select'] = 'Выбрать'; |
Вставить можно к примеру после:
|
1 |
$_['text_model'] = 'Модель:'; |
Вот собственно и все что нам нужно было сделать, теперь все доступные опции будут у вас в категории и покупатель сможет их выбрать не покидая самой странице категории.
Конечно же у каждого из вас разные шаблоны магазина, и возможно что то будет иметь немного другой вид но общий принцип всегда остается одинаковым, так же здесь нет примера CSS стилей так как они здесь ни к чему из за разных шаблонов, каждый вид опций уже подправляет под себя.
Общим удачи вам, пробуйте и у вас все получится.
6 комментариев
Единственный способ который работает) спасибо
Рад что статья оказалась Вам полезной.
Сделайте пожалуйста такое решение для Opencart 3. Очень нужен выбор опций на странице категорий
В ближайшее время постараюсь написать инструкцию для Opencart 3
Здравствуйте, как продвигаются дела с инструкцией для опенкарт 3? Я в целом сделала вывод опций, но скрипт в подвал добавляю, не работает, видимо другая структура нужна.
К сожалению инструкцию для тройки еще не писал, на все не хватает времени.