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