Kind time of day dear visitor of our site. If you are on this page, then you are probably interested in the possibility of outputting product options in the category (list) of goods. This task very often occurs when a customer orders development of an online store, in this connection I will describe here implementation of this method, because there is nothing complicated here and after reading and following this instruction you can easily display all available options of the product in the category opencart.
By default, opencart allows you to select the appropriate option only in the product card itself, but we also need the output of options in the goods list on the category page, in fact we need to copy the existing design of the product card options and place it in the category, the usual copying of course nothing will give and need to be changed a little and add code, so that the options are not just displayed but also that there would be an opportunity to make a purchase of the goods without leaving the category page.
Options in the category is very convenient especially for some kind of one-type products for which the client does not need to look at the description and characteristics of the product, and he can add all the items of interest to the basket without leaving the general list.
What else can be said, this method of outputting options in the category will work exactly on the version of opencart 1.5 ... Since it was on this version that the client bought from me ready-made online store and for him I wrote an instruction for options. Of course this method can be used for two or other versions, but with small changes, but in fact everything remains the same.
In general, I'm not going to breed here what's what, everyone decides whether they need options in the category or not, I'll just publish a ready-made solution here that will allow you to add product options to the category, and so proceed.
We will make changes only in three files:
- catalog/language/russian/product/category.php (language file)
- catalog/controller/product/category.php (category controller)
- catalog/view/theme/ΠΠ°Ρ_ΡΠ°Π±Π»ΠΎΠ½/template/product/category.tpl (Well, the very template TPL category)
First, open the controllerΒ catalog/controller/product/category.php file and make the required changes:
We find the code:
|
1 |
$this->data['products'][] = array( |
And immediately before it we add:
|
1 |
$options = $this->model_catalog_product->getProductOptions($result['product_id']); |
In the same place a little bit below we look for the code:
|
1 |
'product_id' => $result['product_id'], |
and after it we add:
|
1 |
'options' => $options, |
Next, look for the following piece of code:
|
1 |
$this->data['text_limit'] = $this->language->get('text_limit'); |
After which we add the following:
|
1 |
$this->data['text_select'] = $this->language->get('text_select'); |
Everything is finished with the controller and now you can proceed with editing the next file.
The second one opens the template file of the category of your theme (template) Opencart, namely open the fileΒ catalog/view/theme/ΠΠ°Ρ_ΡΠ°Π±Π»ΠΎΠ½/template/product/category.tpl
We find a piece of code:
|
1 |
<div class="description"><?php echo $product['description']; ?></div> |
After that, we will display a block with a list of options, namely:
|
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> |
After we look for a piece of code:
|
1 |
html += ' <div class="description">' + $(element).find('.description').html() + '</div>'; |
And after it we add the following:
|
1 |
html += ' <div class="options">' + $(element).find('.options').html() + '</div>'; |
Further after the line:
|
1 |
html += '<div class="description">' + $(element).find('.description').html() + '</div>'; |
Add the following:
|
1 |
html += ' <div class="options">' + $(element).find('.options').html() + '</div>'; |
After we look for the code:
|
1 |
<?php echo $content_bottom; ?></div> |
And we add after it a few styles and JS code:
|
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> |
And the most recent item will need to be found on the page:
|
1 |
addToCart |
And replace it with:
|
1 |
add_bc |
Everyone with the template file finished.
The last third file will be the catalog/language/russian/product/category.php file in which we will need to add one single line of translation at any place, namely:
|
1 |
$_['text_select'] = 'Choose'; |
You can insert it for example after:
|
1 |
$_['text_model'] = 'Model:'; |
That's all we had to do, now all the available options will be in your category and the buyer will be able to choose them without leaving the category page.
Of course, each of you has different store templates, and maybe something will look a bit different, but the general principle always remains the same, just as there is no example of CSS styles because they are here to nothing because of different templates, each kind of option already tweaks under itself.
Good luck to you, try it and you will succeed.
No Comment
You can post first response comment.