I am having a problem with a new OpenCart site I am building...
I spliced a Html theme with an opencart theme.... The Html theme uses prototype as a library and OpenCart uses the jQuery library. So I went in and used: jQuery.noConflict(); in all my OpenCart files that use the jQuery library (which is all OpenCart JS)
It fixed everything on my site except this: http://beta.justicejewelers.com/index.php?route=product/category&path=79 - If you click on "add to cart" from this screen its fine... However if you click "add to cart" on the sample product 1 for example its going to take you to the product page to select a size.... hit add to cart there and nothing happens.... Also happens to products without options....
Any ideas?
Also here is what I am calling in the header:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script type="text/javascript" src="js/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="catalog/view/theme/sellegance/js/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<script src="catalog/view/theme/sellegance/js/modernizr.full.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" src="catalog/view/theme/sellegance/js/jquery.elastislide.js"></script>
<script type="text/javascript" src="catalog/view/theme/sellegance/js/jquery.cycle.js"></script>
<!-- NEW SCRIPTS -->
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/banner_pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mix.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
TypeError: Cannot call method 'after' of null [http://beta.justicejewelers.com/index.php?route=product/product&product_id=50:1111]
At the line 1111:
$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
replace $ with jQuery.
P.S. You should invoke jQuery.noConflict() only once after jquery is included.
P.P.S. Include your CSS files before any JS files - this will speedup page loading.