How to Add Magento JQuery/Ajax Add-To-Cart

So, Ajax being the thing and all, I was hunting for a way to add an item to the cart using an Ajax call in Magento.  Recently, I noticed there was a module that apparently does this, but either I hadn’t seen that or it didn’t exist yet when I wrote this, so I hacked my way through it.

PHP isn’t my primary language – I come from the ASP, ASP.Net, C# world, but Magento was compelling enough that I’ve taken the leap.  I’m sure there are lots of things I could be doing better/differently here so if you’ve got some suggestions, I’m all ears!

Add to Cart Page

So first I needed an “Add to Cart” page (called – addToCart.php) that could be called from the client.  This page returns a result in JSON format.  The actual page also returns related items so we can try to cross sell the user, but I’ve removed that in this sample to make it simpler.


include_once '../app/Mage.php';


// usage /scripts/addToCart.php?product_id=838&amp;amp;amp;amp;amp;amp;amp;amp;amp;qty=1
// product_id OR sku is required

// get query string
if (!isset($_GET['sku'])) { $sku = ''; } else { $sku = $_GET['sku']; }
if (!isset($_GET['product_id'])) { $product_id = ''; } else { $product_id = $_GET['product_id']; }
if (!isset($_GET['qty'])) { $qty = '1'; } else { $qty = $_GET['qty']; }

if ($sku != ""){
$product_id = Mage::getModel('catalog/product')->getIdBySku("$sku");
if ($product_id == '') {
$session->addError("Product Not Added
The SKU you entered ($sku) was not found.");

$request = Mage::app()->getRequest();

$product = Mage::getModel('catalog/product')->load($product_id);

$session = Mage::getSingleton('core/session', array('name'=>'frontend'));
$cart = Mage::helper('checkout/cart')->getCart();

$cart->addProduct($product, $qty);



$result = "{'result':'success'}";

echo $result;

} catch (Exception $e) {
$result = "{'result':'error'";
$result .= ", 'message': '".$e->getMessage()."'}";
echo $result;

Buy Now Button

Then I need a “Buy Now” button that doesn’t do a post to the server that I can attach my jQuery code to.  I’ve added the sku as an attribute to the anchor because I have this in a page that has more than one product on the page and I need to know which product has been selected.

<a href="#" sku="<?php echo $this->__($product->sku) ?>"><img src="/media/upload/image/product-details/buy-now.jpg" border=0 alt="<?php echo $this->__('Buy Now') ?>"></a>

Client Script

Finally, I need the client script that gets attached to the button and calls the server “addToCart.php” page.

/* Cart */
jQuery(document).ready(function($) {
$.ui.dialog.defaults.bgiframe = true;

var buyNow = $(e.currentTarget);
var listingItem = $(buyNow).closest(".listing-item");
var colorSelector = $("#colorSelector", listingItem);
var product_id = colorSelector.val();

if (product_id == ""){
showDialog("Please select a color.", "Missing Information");
return false;

var stockStatus = $("option:selected", colorSelector).attr("stockstatus");
if (stockStatus == "out of stock"){
showDialog("Sorry, that colour is currently unavailable.", "Out of Stock")
return false;

var qty = $("#quantity", listingItem).val();

if (qty == ""){
qty = "1";

var obj = this;

var params = "product_id=" + product_id + "&amp;amp;amp;amp;amp;qty=" + qty;

var result = $.getJSON("/scripts/addToCart.php", params, function(data, textStatus){

if (textStatus == "error"){
showDialog("There was an error adding this item to your cart.  Please call customer service for assistance.", "Error");

if (data.result == "error"){
showDialog("Sorry, an error occurred while adding the item to your cart.  The error was: '" + data.message + "'");

} // end add to cart

function showDialog(msg, title){
$("#dialog").dialog( 'destroy' );

buttons: {
"Ok": function() {
// , closeOnEscape: true
// , show: 'slide'

$('#dialog').dialog('option', 'title', title);

Few things probably need some explanation:
1. I’ve attached the function to ALL add to cart buttons using the “add-to-cart” class.  (There are multiple products on the page.)
2. Each product has a color selector that has the product_id as the value in the drop down.  There’s also an additional attribute called “stockstatus” that will let me know if the color is out of stock.  My customer didn’t want to hide the out of stock colors, but I obviously can’t let anyone order them.
3. I put a little animated gif (the “ajax loader”) on the page and that gets displayed when the ajax call is being made.
4. If there is an error, I display it using the jQuery UI library and a little showdialog helper function.
5. There’s a feedback panel that shows related items, but I’ve removed that in this code just to make it easier to follow.
So there it is.  Hope this helps someone.  And if there are better ways to do this, I’d love to hear them!
[Update:  I removed the reference to common.php in the code above because it’s not needed.  It had some common user functions in it that aren’t necessary for this sample]

jQuery UI Dialog: Part 2 – The Modal Dialog

This is part 2 of my series on the jQuery UI Dialog. Part 1 – The Default Dialog covered the most basic usage of the dialog widget. In this second part I will demonstrate a simple modal dialog.

A modal dialog is a dialog that takes focus, and disables the rest of the application until it is closed. They are used to force the user to acknowledge something, or to gather some input. It is worth pointing out that modal dialogs can be annoying for users so you should consider carefully if it is absolutely necessary. User Account Control (UAC) in Windows Vista and Windows 7 is an example of an annoying usage of modal dialogs.

The dialog widget is usually configured by passing the dialog() method an anonymous object containing a set of key value pairs that describe the options required. The anonymous object is created using javascript’s object literal notation. My favourite javascript author, Douglas Crockford, describes the notation:

In the object literal notation, an object description is a set of comma-separated name/value pairs inside curly braces. The names can be identifiers or strings followed by a colon.

A simple code example is:

var myObject = {
    firstProperty: 'value 1',
    secondProperty: 2

The options I will use to create a modal dialog are:

height The height of the dialog
modal Boolean indicating if the dialog should be modal
overlay Creates a partially transparent modal overlay layer. Very web 2.0.

View a Demo

And here is the code:

<!-- See part 1 for html preamble -->
    <p>Some text on the page.</p>

    <div>Content of div</div>

    <script type="text/javascript">

        $(document).ready(function() {

            $('.make_me_a_dialog').dialog({ bgiframe: true,
                height: 200,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5



jQuery Sticky Tooltip Script

Sticky Tooltip is jQuery plugin that allows you to add a rich HTML tooltip to elements on your webpage. Tooltip is revealed when the mouse rolls over them. The tooltip can be “stickied”, or kept visible on the screen by clicking right mouse button or pressing “s” on the keyboard.

The contents for each tooltip are defined using regular HTML, making them very easy to customize. You can further customize it using option variables: x and y offset from mouse cursor for tooltips;  duration of fade effect in milliseconds; enable or disable sticky tooltip; border color of tooltip; customize tooltip status messages.

Developed by Dynamic Drive; jQuery Sticky Tooltip Script is available for download for Free. You can find further information, demo & download on Dynamic Drive Website.

Create a jQuery Popup Bubble

How to add a cool popup bubble to an RSS feed link using jQuery.



$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");



<a id="rss-icon" href="feed-link">RSS Feed</a>
<em>Subscribe to our RSS Feed</em></div>

CSS Here

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;

div.rss-popup em {
background: url(bubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;

#rss-icon {
width: 42px;
height: 42px;
background: url(icon.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;


Excellent jQuery MultiTab View Widget For Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just after the ]]></b:skin> tag .

<script src='' type='text/javascript'/>

<script type='text/javascript'>

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F&#3A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{}))


<script type='text/javascript'>

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });



<style type='text/css'>
padding:5px 0px 0px 0px;
margin:0px 0px;
border:1px solid #fff;

.tabnav li {
display: inline;
list-style: none;

.tabnav li a {
text-decoration: none;
text-transform: uppercase;
font-weight: normal;
padding: 6px 8px;
font-family:Georgia,Century gothic, Arial, sans-serif;
color: #2C2F32;
text-decoration: none;

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #42484d;
color: #C7C7C7;

.tabdiv {
padding: 5px 5px 5px 5px;
font-family:Georgia,Century gothic, Arial, sans-serif;
.tabdiv a:link,.tabdiv  a:visited {
.tabdiv a:hover{
color: #2676A1;
.tabdiv ul{
margin:0px 5px;
padding:0px 0px;

.tabdiv ul li{
padding:2px 2px ;
margin:2px 0px;
.tabdiv li a:link,.tabdiv li a:visited{
padding: 0px 0px 0px 0px;

.tabdiv li a:hover {
color: #222;
.ui-tabs-hide {
display: none;

4.Now again scroll down where you see below code:

<div id='sidebar-wrapper'>

5.Now copy below code and paste it just after <div id=’sidebar-wrapper’> .

<!-- Tabzine -->
<div class='widgets' id='tabzine'>
<ul class='tabnav'>
<li class='pop'><a href='#tab11'>Video</a></li>
<li class='fea'><a href='#tab22'>Recent</a></li>
<li class='rec'><a href='#tab33'>Popular</a></li>

<!-- tab1 -->
<div class='tabdiv' id='tab11'>
<b:section class='sidebar5' id='sidebar5' preferred='yes'>
<b:widget id='HTML223' locked='false' title='' type='HTML'/>

<!-- tab2 -->
<div class='tabdiv' id='tab22'>
<b:section class='sidebar4' id='sidebar4' preferred='yes'>
<b:widget id='HTML323' locked='false' title='' type='HTML'/>
<!-- tab2 -->

<!-- tab3 -->
<div class='tabdiv' id='tab33'>
<b:section class='sidebar3' id='sidebar3' preferred='yes'>
<b:widget id='HTML423' locked='false' title='' type='HTML'/>
<!-- /tab3 -->

<!-- /Tabzine -->

Look at the picture below.

Add code as this picture
Add code as this picture

6.Now save your template.

7.Go to Layout–>Page Elements.You can see your tab widget as the picture below.
jquery multi tab widget

8.Now you can add contents to your tab widget.Your final result will look like this:
jquery multi tab widget


How to expand collapse (toggle) div layer using jQuery

In almost all of my projects, I have been using jQuery to toggle the layer. So, I thought of sharing how easy it is to expand div layer and collapse panel using jQuery. When user clicks on the header, the content gets displayed by sliding down and when you again click on the header, the content collapses.

Step 1:

Include jQuery Library in head section of your html file.

<script type="text/javascript" src=""></script>

Step 2:

Come up with your own html elements in body section. I chose div ‘layer1′ to be the main container where collapsible/expandable content would reside.

Next, class ‘heading’ is given to header while div ‘content’ holds the show hide layer for that heading

Like this:

<p>Header-1 </p>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

Step 3:

CSS: Now it totally depends on you to write css for your heading, div. Here’s my version of CSS for this example.

.layer1 {
margin: 0;
padding: 0;
width: 500px;

.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
.content {
padding: 5px 10px;
p { padding: 5px 0; }

Step 4:

Again lets go to head section to add few more javascript codes.

<script type="text/javascript">
jQuery(document).ready(function() {
  //toggle the componenet with class msg_body

Thats it!! Expandible-Collapsible panel is ready. You may like to view a DEMO.

Author:    Anish Blon

6 Steps to creating a featured products jQuery slider for Magento

This tutorial has come out of necessity for a homepage featured product slider, I had tried quite a few different tutorials but never achieved what I was looking for. Magento is a great open-source ecommerce package, but Im a little surprised that featured products isn’t a feature built-in. Hopefully this tutorial will help. Help support open source!


Step 1: Create a Feature Products Category.
Make sure the category is directly under your root category, or this will not work.
(see screenshot). Take note of the category ID, you will need this later.

3graces category screenshot

Step 2: Create a feature products block
You will need to create featured-products.phtml and place it in /app/design/frontend/yourtheme/template/catalog/product/

Use the following code in featured-products.phtml:

 * Magento
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to so we can send you a copy immediately.
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to for more information.
 * @category   design_default
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (
 * @license  Open Software License (OSL 3.0)
 * Product list template
 * @see Mage_Catalog_Block_Product_List

.featured-bg {
	background: url(/skin/frontend/3graces/default/images/hp_featured_product_bg.gif);
	width: 146px;
	height: 144px;

.featured-bg div {
	position: relative;
	top: 10px;
	left: 20px;

.featured-bg div img {
	width: 100px;

#slider ul, #slider li {
	margin: 0;
	padding: 0;
	list-style: none;

#slider li {
	width: 470px;
	height: 175px;
	overflow: hidden;

span#prevBtn {


span#nextBtn {


/* numeric controls */

ol#controls {
	margin: .1em 0;
	padding: 0 0 5px 0;
	height: 20px;

ol#controls li {
	margin: 0 5px 0 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 20px;
	line-height: 20px;

ol#controls li a {
	float: left;
	height: 20px;
	line-height: 20px;
	border: 1px solid #ccc;
	background: #EDE4E7;
	color: #555;
	padding: 0 5px;
	text-decoration: none;

ol#controls li.current a {
	background: #8B3892;
	color: #fff;

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
	outline: none;

span.price {
	font-size: 14px !important;

/* // Easy Slider */

<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
    <?php echo $this->__('There are no products matching the selection.') ?>
<?php else: ?>

<?php // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if($i++%7==0): ?>
            	<div id="slider">
			    <?php endif ?>
			            <li><div id="featured-product"color: rgb(0, 0, 0); font-weight: bold;"><?php echo $i ?>">
		<div style="width:270px;float:left;">
			                    <h2>Featured Product</h2>

			        <?php echo $this->htmlEscape($_product->getName()) ?><br>
			        <?php echo $this->htmlEscape($_product->getDescription()) ?>
			        <span><?php echo $this->getPriceHtml($_product, true) ?></span>
			        <p><?php echo $_product->getDescription() ?></p>
			        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><img src="skin/frontend/3graces/default/images/hp_moredetails_btn.gif"></a>

            <div style="width:150px;float:left;">
                    <div><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(90, 90); ?>" width="90" height="90" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                    </a>  </div>              
		    			<div /></div>

		    <?php if ($i%7==0 && $i!=$_collectionSize): ?>

		    <?php endif ?>
    <?php endforeach ?>

    <script type="text/javascript">decorateGeneric($$('.grid-row'), ['last', 'odd', 'even']);</script>
<?php endif; ?>

Step 3: Add necessary files to /js directory which is located at the root.
If it doesnt already exist, create a /jquery directory within the /js directory. So your path will look like this: root/js/jquery. Add the following files to the new directory.

  • easySlider1.7.js
  • jquery.1.2.3.js
  • add jquery no conflict which prevents jQuery from screwing up prototype which is built into Magento. Make sure that it is added to the very end of the jQuery library file.

Step 4: Update page.xml to reflect new /js files that were added. The path to page.xml is: /app/design/frontend/yourtheme/layout/page.xml

<action method="addJs"><script>jquery/jquery.js</script></action>
<action method="addJs"><script>jquery/easySlider1.7.js</script></action>

Step 5: Update header.phtml to call Slider function. The path to header.phtml is: /app/design/frontend/yourtheme/template/page/html/header.phtml

<script type="text/javascript">
		auto: true,
		continuous: true,
		numeric: true,
		speed: 		1000

Step 6: Add the featured products block to your homepage using the Magento CMS. The category ID can be obtained from the category ID of the featured products category that you setup in Step 1.

{{block type="catalog/product_list" category_id="173" template="catalog/product/featured-products.phtml"}}

Voila! You now should have a featured products slider powered by jQuery and Easy Slider on your homepage. Any products that you add to the featured products category, will show up in this slider. And each subsequent product that is added, will increase the numbered navigation along the bottom.

jQuery Youtube Playlist Plugin – Youtube Playlist

Using the plugin

The plugin acts on a simple unordered list containing links to YouTube videos, e.g.

<div id="ytvideo"></div>
    <li><a href="">Video 1</a></li>
    <li><a href="">Video 2</a></li>
    <li><a href="">Video 3</a></li>
$(function() {

Plugin options

Option – (default)

holderId – (ytvideo)
The ID of the element (usually a div) into which the YouTube video will be inserted

playerHeight – (300)
The height of the embdedded youtube video

playerWidth – (450)
The width of the embdedded youtube video

addThumbs – (false)
Use true to add video thumbnails to each list item

thumbSize – (small)
Size of added thumbnails. Default is small, use large for larger thumbnails

showInline – (false)
If this option is true, the list item containing the link will be replaced with the YouTube video. See the gallery demo for an example of this.

autoPlay – (false)
true or false, whether or not to autoplay videos

showRelated – (true)
Set to false to stop related videos being shown at the end of the embedded video


Intro look at jQuery Tools enhancement for setFlash and CakePHP 1.3

Actually the main focus of this post will be how to creatively use JavaScript and Session::setFlash() to make your app a little more sexy.
(Slightly tweaked to use CakePHP 1.3, although there is nothing special here that you couldn’t do with other versions of cake).
First, I wanted to point out an awesome little library, called jQuery Tools, which comes with a set of really nice widgets, a whopping 5KB in size and its own CDN for easy loading.
To proceed further let’s consider an Articles Controller, where we are adding a new article.
This is something that you should’ve seen at least a few hundred times…

class ArticlesController extends AppController {
public function add() {
if (!empty($this->data)) {
if($this->Article->save($this->data)) {
$this->Session->setFlash(‘Article saved!’, ‘modal’, array(‘class’ => ‘modal success’));
} else {
$this->Session->setFlash(‘Article was not saved!’, ‘modal’, array(‘class’ => ‘modal problem’));

Here we are using a pretty standard approach to write a message to the session by using $this->Session->setFlash().
What usually happens then, is a redirect to some other place where the message is displayed.
In our case the message will be displayed in the same view, using a nice-looking modal/dialog.
Another point to note, is that once the message is displayed to the user, we’ll automatically hide it (let’s say after three seconds).
To further extend the app you might consider disabling (or converting to plain-text) the form fields, and possibly displaying an “Edit” link… though these features are brewing in my app, I thought it would be too much to cover in one example.
Alright, now that we are looking at our familiar add() action, let’s see what tweaks we should do achieve the desired goals listed above.
In our layout, we’ll need to load both the jQuery and jQuery Tools libraries.
This is a snippet to do so using the existing CDN’s (and in CakePHP 1.3 style):

<?php echo $this->Html->script(array(‘’,
‘’)); ?>

$this->Html->script() replaced CakePHP 1.2 approach of using $javascript->link(), the rest should be pretty obvious.
Next, let’s consider the view for our add() action:

<?php $this->Session->flash(); ?>

echo $this->Form->create();

echo $this->Form->input(‘Article.title’);
echo $this->Form->input(‘Article.body’);

echo $this->Form->end(‘Add Aricle’);


One thing you’ll notice is the way helpers are referenced in CakePHP 1.3… while $form->input() still works, the approach above is “safer” and more consistent. (Take a look here for more details).
Let’s get back to this line of code for a second…

$this->Session->setFlash(‘Article saved!’, ‘modal’, array(‘class’ => ‘modal success’));

The main difference in CakePHP 1.3, is that modal, the second param, represents an element (unlike a layout in previous versions).
Therefore for this setup to work properly you’ll need to create app/views/elements/modal.ctp
Let’s see what it looks like:

“> <?php echo $message; ?>

$message is replaced by whatever we place in the first argument to the setFlash() method (which happens to be “Article saved!”, in our case).
As you’ve probably guessed $class gets replaced with the appropriate value from the array of passed params.
Now, if we have successfully saved the article the add.ctp view gets re-displayed with our message showing up and the element rendered. (This all happens automagically by using $this->Session->flash()).
This could be already fine in itself, but it’s just not sexy enough… so we add a little jQuery and jQuery Tools magic to make things a little more fun.

$(document).ready(function() {

//with this approach you can assign the jQuery Tools API to be used later
//otherwise you could use a standard one-liner:
var flashMessage = $(‘#flash-message’).expose({api: true});

//now that we have a direct access to the API through the “flashMessage” object
//we can call the jQuery Tools methods
//such as load(), which is required to show/expose our modal

//now that the modal is displayed we can create a simple way to automatically
//remove it after 3 seconds
flashMessage.onLoad(function() {
setTimeout(function() {
}, 3000);


By including this script we will achieve exactly what our goals are. Display the message in a nice modal/overlay fashion, wait 3 seconds and then auto-hide the message from the user and make our page act as before again.
If you care, please take a look at the comments in the code, to see some nice features of jQuery Tools, i.e. the ability to access any tool’s API. (Please refer to jQuery Tools site for more details).
Overall, we are just relying on the jQuery goodness and overriding our boring flash() behavior, with something quite a bit more interesting.
Well, there you have it, aimed with these tools you are ready to bake sexy CakePHP 1.3 apps 😉
Just a little CSS for the modal:

.modal {
width: 350px;
padding: 60px;
margin: 50px 50px;

.success {
border: 1px solid #004000;

.problem {
border: 1px solid #800000;

Slightly tweaked to use CakePHP 1.3 although there is nothing special here that you couldnt do with other versions of cake