[MOD] Add Product Options to Categories
Posted: Mon Aug 23, 2010 6:49 pm
I finally figured this out and wanted to share it with everyone, i would be lying if i said this was easy for me to figure out, but now that i have it looks so simple. (This also works for manufacturers, just use the same code and should work fine)
Thanks to this thread for putting me on the right track: http://forum.opencart.com/viewtopic.php?t=12897
This mod, if done correctly will show all the options and an AJAX add to cart button if there are options or just a QTY and add to cart button if there are no options.
This involves changes several files.
So if you are reluctant to changing files this mod is not for you
Until we get to the options section you can pretty much follow the thread above. But i will post it below anyway
modify OPENCART_ROOT/catalog/controller/product/category.php
Add
After
Then find
Add this above
Then add this as the first item above where it says name
To get the AJAX add to cart you need to add this to the document.load on the cart.tpl
(\catalog\view\theme\default\template\module\cart.tpl)
After this on (catalog/view/theme/default/template/product/category.tpl)
Add the following code
It should then look like this
http://i38.tinypic.com/j7b60k.jpg

I hope you enjoy this and let me know how it goes, i havent done this before so its all new, hope to be posting other MODs in the future, i allready did the Fancybox sizechart and have done a fancybox login
Thanks to this thread for putting me on the right track: http://forum.opencart.com/viewtopic.php?t=12897
This mod, if done correctly will show all the options and an AJAX add to cart button if there are options or just a QTY and add to cart button if there are no options.
This involves changes several files.
So if you are reluctant to changing files this mod is not for you
Until we get to the options section you can pretty much follow the thread above. But i will post it below anyway
modify OPENCART_ROOT/catalog/controller/product/category.php
Add
Code: Select all
$this->data['action'] = HTTP_SERVER . 'index.php?route=checkout/cart';
Code: Select all
$this->data['continue'] = HTTP_SERVER . 'index.php?route=common/home';
Code: Select all
this->data['products'][] = array(
Code: Select all
$options = $this->model_catalog_product->getProductOptions($result['product_id']);
Code: Select all
'id' => $result['product_id'],
'options' => $options,
(\catalog\view\theme\default\template\module\cart.tpl)
Code: Select all
$('.add_to_cart').each(function(){
var _pa = $(this);
var _pid = _pa.attr('rel');
_pa.click(function () {
$.ajax({
type: 'post',
url: 'index.php?route=module/cart/callback',
dataType: 'html',
data: $('#product_'+_pid+' :input'),
success: function (html) {
$('#module_cart .middle').html(html);
},
complete: function () {
var image = $('#image_'+_pid).offset();
var cart = $('#module_cart').offset();
$('#image_'+_pid).before('<img src="' + $('#image_'+_pid).attr('src') + '" id="temp_'+_pid+'" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
params = {
top : cart.top + 'px',
left : cart.left + 'px',
opacity : 0.0,
width : $('#module_cart').width(),
heigth : $('#module_cart').height()
};
$('#temp_'+_pid).animate(params, 'slow', false, function () {
$('#temp_'+_pid).remove();
});
}
});
});
});
Code: Select all
<?php if ($products[$j]['rating']) { ?> ... <?php }?>
Code: Select all
<form action="<?php echo $action; ?>;" method="post" enctype="multipart/form-data" id="product_<?php echo $j;?>">
<?php if ($products[$j]['options']) { ?>
<?php foreach ($products[$j]['options'] as $option) { ?>
<div class="content"> <?php echo $option['name']; ?>: <select name="option[<?php echo $option['product_option_id']; ?>]" id="option[<?php echo $option['product_option_id']; ?>]" onchange="document.getElementById('price<?php echo $v ?>').selectedIndex=this.selectedIndex;
alert(document.getElementById('price<?php echo $v; ?>').value);">
<?php foreach ($option['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?></option>
<?php } ?>
</select></div>
<?php } ?>
</div>
<input type="hidden" name="quantity" size="3" value="1" />
</div>
<?php } else { ?>
<div class="content" style="height:25px"> QTY: <input type="text" name="quantity" size="3" value="" /> </div>
<?php } ?>
<input type="hidden" name="product_id" value="<?php echo $products[$j]['id']; ?>" />
<a onclick="alert('<?php echo $products[$j]['name']; ?> added to the cart')" id="add_to_cart_<?php echo $j;?>" rel="<?php echo $j;?>" class="button add_to_cart"><span>Add to Cart</span></a>
</form>
http://i38.tinypic.com/j7b60k.jpg

I hope you enjoy this and let me know how it goes, i havent done this before so its all new, hope to be posting other MODs in the future, i allready did the Fancybox sizechart and have done a fancybox login