[MOD] Add Product Options to Categories

[lg1]

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: 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';

After

Code: Select all

$this->data['continue'] = HTTP_SERVER . 'index.php?route=common/home';

Then find

Code: Select all

this->data['products'][] = array(

Add this above

Code: Select all

$options = $this->model_catalog_product->getProductOptions($result['product_id']);

Then add this as the first item above where it says name

Code: Select all

'id'    => $result['product_id'],
'options' => $options,


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)

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();
                });
             }
          });
                });
       });

After this on (catalog/view/theme/default/template/product/category.tpl)

Code: Select all

<?php if ($products[$j]['rating']) { ?> ... <?php }?>

Add the following code

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>

 

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

[qahar]

thanks to share, i've been added this to my collection..

[gujjar]

Thanks "lg1" exactly what i was looking for.
Can you help mé because i cant find document.load in cart.tpl and also 
Where is this Line "<?php if ($products[$j]['rating']) { ?> ... <?php }?>"
I am using v1.4.8b.. Thanks..

[lg1]

No problem glad to help someone.

Document.load is about the middle in 1.48b you will see this

$('.cart_remove').live('click', function ()

Put the cart $('.add_to_cart').each(function()... above that

And rating is right near the bottom. Above where it says stars...

Sorry my mistake that bit is (catalog/view/theme/default/template/product/category.tpl)

[gujjar]

ok this really helped every thing is in its position .. but i m getting an error when i click on add to cart button.
when click the button it gives me an alert that my product is added to the cart and i click ok ..
But in my cart at the left it shows...
"Notice: Undefined index: product_id in C:\catalog\controller\module\cart.php on line 110Notice: Undefined index: quantity in C:\catalog\controller\module\cart.php on line 110" item 0

[lg1]

My guess is one of the steps is wrong, i think after id

you need to do

'id' => $result['product_id'],
'options' => $options,

Sorry that i keep forgeting things, you know how it goes set and forget

[gujjar]

'options' => $options,

is already in category.php i dont need to add it.. and i m littel concerned why i m getting error in cart.php because did no changes in there

[lg1]

Do view source on the category page i think your (or i) have forgotten to put something somewhere.

Otherwise i might have to send you my files

[gujjar]

I think it would be lot easier if you send me your files so i can compare them and see what is the error..

can you see here actually it seems like there is no "href" its just showing an alert box may be this is the problem...
i added the link in it and it took me to the product page ....

"<a onclick="alert('<?php echo $products[$j]['name']; ?> added to the cart')" id="add_to_cart_<?php echo $j;?>" rel="" class="button add_to_cart"><span>Add to Cart</span></a>"

[lg1]

That section is from the thread i referenced, have a look at the link

[gujjar]

ok i searched a lot but got no results any help the error i m getting is coming from cart.php...

the link is working fine. it seems like its not getting what is product_id .. any help

can u give me your files that are working for you... Thnaks

[lg1]

I sent you a message, but seems weird since the same code works fine on other pages like manufactures.

Maybe when you find the solution post it here

I might have forgotten to say

Code: Select all

$options = $this->model_catalog_product->getProductOptions($result['product_id']);

In the control file, but that should be it

[jty]

copy of my files for guijjar is attached. Version 1.4.9

guijjar, as per normal, backup your existing files before replacing with the ones in the attached zip.
there are 3 files. you need to put them in the correct folders.
My code is similar to the ones posted here. Similar but not exact. I've also commented out reviews so you need to put it back in.

lg1, I'm sorry I didn't reply to your PM. I was sick at the time and my brain wouldn't think. Thanks for sharing your solution here.

[gujjar]

thank you very much.... it worked like a charm u r great...

and i m sorry for making this all trouble.. GET WELL SOON...

[jty]

It's a pleasure guijjar and no trouble at all. I was only picking on you to show you how to get help faster without confusing us. LOL.
Have you checked my category.tpl on IE8. I had a look at it last night and it looks wonky in IE8, no problem on Firefox, Chrome and Opera. Only gone stupid in stupid IE8
Maybe it's something else I did. Anyway, check it out on IE8.

[lg1]

I have no problems with mine on IE8. What issues are you having.

[gujjar]

Its working fine on IE8 i have no problems.. what kind of problem r u having

[jty]

problem solved. I broke it while doing another unrelated mod
For some strange reason, putting a comment at the very top of header.tpl makes IE8 go stupid. Nothing to do with this mod.

[gujjar]

great thats nice u fixed it..

[jones]

And please let me know how to use this mod to latest product at the home ?
thanks in advance