Good morning magento community,
I hope you are all very well today,
My intentions is to use jQuery tabs in the frontend of Magento. I have followed the tread http://www.magentocommerce.com/boards/viewthread/6104/ which has got me started and chinesedream gave me some very valuable input, for that I am very grateful.
I did however notice this post: http://www.magentocommerce.com/boards/viewthread/19050/ where on the 29th of September chinesedream asked again about the jQuery tabs, which made me think that the later versions of magento there has changed something and his tabs no longer work.
Here is my jQuery script - note I am using the noconflict
<script> var $j = jQuery.noConflict(); $j(document).ready(function($j){ // Use jQuery with $(...) $j("#example > ul").tabs({fx:{opacity:"toggle"}}); }); </script>
I then created a static page in magento where I am trying to get the tabs to work, call it a demo, from where I can take the changes and implement this in the front end. I used the code find on the following page jQuery page: http://docs.jquery.com/UI/Tabs
For some reason this does not want to work. I have tried using the magento modern theme which does give me tabs, but some parts of the theme has not been done properly (like the 3 column layout) and I reverted back to the default theme which I am now working on.
I am sorry for the designer and do not mean that he/she did a bad job, the theme looks great!
Currently I have this: see the screen shot attached to this post, and I am asking the knowledgeable members of the community for some input and advice.
Here is my code in the test page:
<div id="example" class="flora"> <ul class="ui-tabs-nav"><!-- class should be added by jQuery but doesnt work yet -->
<li class="ui-tabs-selected"><!-- class should be added by jQuery but doesnt work yet --><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$('#example > ul').tabs();</code></pre> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div>
I hope we can solve this as the tabs is needed for proper navigation.
Thank you and chat soon,
Just to be clear is your problem that the tabs do not change? Have you tried the direct code from the simple jQuery UI Tabbed pane example on the jQuery website? I know yours is very similar but…
I just cooked up something delicious here man! It’s working like a beuty! Busy porting my changes to a working example and then we’ll all have tabs for Africa!
Will check back soon with my changes, and thanx for your reply btw.
I see some weirdness with regards to the jQuery tabs.
I have it working perfectly in the CMS pages.
In the view.phtml when I mod the code and add the id’s to the div’s this doesn’t work.
In the product short description field in the admin panel if I add the code there, the tabs works again. In the product description in the admin panel, when I add the code there, the tabs doesn’t work. This makes me think there is some cleaning going on behind the scenes. Anyone can fill in the gaps?
Hi Firespire, sorry I have just saw your another post asking me for the CSS code. The forum doesn’t work very well, the notify feature needs to be selected and I don’t have a habit of doing that, so I often don’t see the follow up/response of my post.
Anyhow, I will write a jquery Ajax tabs tutorial for magento when I get a chance, but here is a quick setup based on my working site.
1) Place these two files in the ‘page.xml’ - make sure they are placed AFTER the prototype code. See the path: I created a ‘jquery’ folder’ in the js folder, so all my jquery codes go in there.
2) Per and thanks to laurent’s wiki post, place the noConflict right in the bottom of the jquery-1.2.6.pack.js. - only follow this step if you prefer using your jquery file, otherwise download my version.
3) Very important thing: in order for the jquery-1.2.6 to work, you must download the latest version of scriptaculous script \ - the version 1.16 magento didn’t come with the last version of v1.8.1
4) Place the following code in the view.phtml, or place it in your template (2columns-left.html for exampl) or header.phtml if you use the tab throughout the site.
I then created a static page in magento where I am trying to get the tabs to work, call it a demo, from where I can take the changes and implement this in the front end. I used the code find on the following page jQuery page: http://docs.jquery.com/UI/Tabs
For some reason this does not want to work. I have tried using the magento modern theme which does give me tabs, but some parts of the theme has not been done properly (like the 3 column layout) and I reverted back to the default theme which I am now working on.
I am sorry for the designer and do not mean that he/she did a bad job, the theme looks great!
Well, to be fair to Ohminu (the modern theme designer I believe) and the magento theme. The modem theme tabs works very well and can be implemented to default theme, you just need to know how to deploy it correctly. The reason I am not using it and wasted weeks to figure how to do the jQuery version was because when I disable the javascript from my browsers, the modern theme’s tab stop working, but with jQuery’s one, it still works.
It seems silly to care this little pitfall when there are so many functions that also won’t work with js disable(OPC, add to cart in the listing page for example), but I am in the process of building my fully accessible Magneto theme, that I hope eventually I an get rid of all js scripts that came with default theme and the function won’t works when JS disable.
I have learned some new tricks with jQuery and especially how to make jQuery and prototype play nice with each other, especially since they both play in the $ area. The trick is to keep prototype happy and leave him playing with the $ but with jQuery we are going to be using noConflict mode
To do this we have to do the following:
You have to call the jQuery noConflict mode before you call prototype.js so I do it like this.
I then also add this javascript which is where the jQuery magic happens.
<script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ // Use jQuery with jQuery(...) jQuery("#example > ul").tabs({fx:{opacity:"toggle"}}); }); </script>
Note that I call the noConflict first and then instead of using jQuery with $ I use jQuery with the variable jQuery
So that’s my tabs sorted out. I do have one little issue though, and I am hooping someone in the community can help me out here.
The tabs work perfect when:
- I add the tab code in the admin panel to a static page
- I add the tab code to the short description in the admin panel by the edit product section
However, the tabs DOES NOT work when:
- I add the tab code to my view.phtml (product page)
- I add the tab code to the product long description
I would like this to work. Essentially I want to get magento ready and working with the jQuery framework so that I can add the coolness anywhere on my frontside. So it’s important that this jQuery work in all instances. For your information, my dropdown menu works and so does the slider so at this stage it looks like a great implementation, since I am working on my own theme now my changes will be preserved. Which is a key here as we all like the latest version of magento but we don’t want to do our work over.
I have been using the method chinesedream states in post #8 for quite some time while developing my theme and it works great. However, I cannot call a static block with it. I have tried literally everything I can think of but it just doesnt call. And I know how to create/call static blocks throughout my pages. Why doesn’t it seem work under the tabs? Maybe I missed something…
I can’t seem to get this to work on my site using the default theme. I followed the instructions from post #8 exactly. I even double and triple checked everything and it still won’t work.
Could it be because I installed the Shadow box contribution before I installed this? The shadowbox contribution that I installed didn’t use JQuery....I found the instructions for that here......http://www.magentocommerce.com/wiki/adding_shadowbox_to_magento
Could my problem be related to shadow box? If so, is there a better install of shadowbox using the Jquery library? And does anyone have instructions for that install?
I experienced this problem with 1.2.6 of jquery, was pulling out my hair. I upgraded to 1.3.2 and it is fixed. Before the problems were selectors were not iterating right. If I selected a single element I could operate on it but if a select for instance returned a bunch of check boxes when I tried to set an attribute like set checked to true it was setting a property on the jquery object but not the DOM element. It was doing this with or without noconflict, no matter what include order. The conflict only happened with sciptilacious was included. Upgrading my jquery everything works as expected.
