jquery tabs failing in this theme

[PowerGistics]

Here’s the situation:
I previously had jquery tabs working on all of the product pages of my site.

ex. http://powergistics.fmtemp.com/?page_id=5#!/12-Shelf-Wall-Mount-Tower/p/43766591/category=11212142

I had jquery ui being pulled in through the header.php, and my function pulled in via the footer.php

I installed the agile theme and copied the same code into the same locations on the header and footer files, and tabs do not work any more. I get no jquery errors, and I have confirmed the function is running, because I have a console.log that kicks just fine.

When trying to simply run $(“#tabs”).tabs(); in the browser console, it basically says the function tabs doesn’t exists.

I have tried using alternate jquery versions and got the same results. And as I said, this was already working on the site via an alternate theme.

The closest thing to an error I’ve found, is Chrome produces the following error, which may not even be relevant to my issue.

Failed to load resource: the server responded with a status of 404 (Not Found)
/wp-content/themes/agile/woocommerce/css/woocommerce-mod.css.map

I really need help with this. Feel free to ask if you need any additional info.

Thanks

[Raghavendra]

We are using tabs() function as part of JQuery Tools framework with the theme – http://jquerytools.github.io/. You can probably try removing the same from the theme and see if the JQuery UI framework will work since the two framework can potentially conflict with each other as per your description.

Pls comment out or remove the line 598 in framework/framework.php file –

wp_enqueue_script('jquery-tools', MO_SCRIPTS_LIB_URL . '/jquery.tools.min.js', array('jquery'), '1.2.7', true);

and then remove or comment the lines 637 to 647 to avoid a script error in main.js due to missing JQuery Tools plugin-

    $("ul.tabs").tabs(".pane");

    $(".accordion").tabs("div.pane", {
        tabs: 'div.tab',
        effect: 'slide',
        initialIndex: 0
    });

    $(".social-list li a[title]").tooltip();

    $(".single-page-template .page_section a.edit-button[title]").tooltip();

[PowerGistics]

I appreciate the help with this, unfortunately it doesn’t seem to have worked. I’ve tried commenting out the specified areas, then I tried the opposite and remove my code and simply altered the tab target of your built in jquery shown above.

When I try to simply run $(“#tabs”).tabs(); in the console, I get “undefined is not a function” in both situations. I assume if I removed jquery ui, and the jquery tool that is included by default has the tabs functionality, it should be able to at least run the function. Because it cannot, I believe it may be another issue. Any alternate ideas?

Thank You

[Raghavendra]

Did you follow the minimal setup required for the tabs to work with JQuery Tools? Pls see here for an example –

http://jquerytools.github.io/demos/tabs/index.html

Looks like it expects a parameter in the tabs() function which refers to the panes div.

BTW, why not just use our Tabs shortcodes which will take care of all the details for you. It is well documented in the documentation –

https://www.livemeshthemes.com/agile/tab-shortcodes/

[PowerGistics]

I would prefer to not have to rework each individual product page if it can be avoided, which is what it would take to use the shortcodes, and I don’t think it would help anyway. I say this because I created a test page, and got the tabs to work!

I’ve now managed to conclude this issue is more directly related to the particular store being used on the site. The site uses “Ecwid Store”, which I don’t expect you to know, but if you could just take a look at the 2 following pages and see if you can determine why the tabs would not function on the product page, but does on the basic test page I created, I would be most grateful. Like I said previously, regular jquery tabs worked on these product pages, so perhaps there is a jquery tools confliction with the store itself. I’m just having trouble finding what would break it.

Working: http://powergistics.fmtemp.com/?page_id=6000#
Not Working: http://powergistics.fmtemp.com/?page_id=5#!/12-Shelf-Wall-Mount-Tower/p/43766591/category=11212142

I appreciate your help thus far, and I hope you can see something here that I am not. I feel like I’m in the final stretch and stuck spinning my wheels.

Thank You

[Raghavendra]

I am sorry – I could not figure out exact where the tabs are in your second linked page. And I do not see any script errors on both of these pages and hence not sure exactly how it is supposed to work. Then I searched on the net and saw this page –

http://www.ecwid.com/demo#!/Binary-Mom/p/3002/category=1002

and see a tab on the top. But your page does not seem to have the required HTML for the tab at the top of the product page.

[PowerGistics]

I apologize for the confusion. The tabs on the second link are just below the product image “Description” & “Specifications” should be tabs.

Looking at the example link you provided, I don’t believe they are using the same tabs functionality I am shooting for, so I do not believe it is related.

The current setup is me attempting to use your default tabs functionality with jquery tools. I simply altered the function targets to reflect my html. Below is the function in the main.js

original:$(“ul.tabs”).tabs(“.pane”);
current: $(“#tabs > ul”).tabs(“#tabs > div”);

You can see the tabs are working in the first link. (tab1, tab2, tab3)
http://powergistics.fmtemp.com/?page_id=6000#

But the same html setup, on the second link, is not working. (Description, Specifications)
http://powergistics.fmtemp.com/?page_id=5#!/12-Shelf-Wall-Mount-Tower/p/43766591/category=11212142

I hope this clears up the what I am seeing and trying to accomplish.

Thank You

[Raghavendra]

I just copied the HTML from your product page, created a new page with the same HTML and then pasted the below code into js/main.js file at line number 799 –

$('#tabs > ul').tabs('#tabs > div');

and the tabs actually work well(I changed double quotes to single quotes and that’s the only change I made since my editor complained about double quotes for some reason). Can you share a temp login to your site as a private message if you are still unable to resolve this?

[PowerGistics]

This reply has been marked as private.

[Raghavendra]

This reply has been marked as private.

[PowerGistics]

This reply has been marked as private.

[Raghavendra]

Unfortunately, I don’t think we can make this work. Looks like the product content is being loaded by a script dynamically and I do not know of a way to apply the above code since the script is on their server –

http://app.ecwid.com/script.js?5922036&data_platform=wporg

When our scripts execute, there is no tabs content as such. You can view the source for the page and there is nothing until the script takes over and populates the data.

Not sure how to proceed on this. My suggestion would be style a little differently instead of using tabs. You can perhaps still make it all look nice without tabs. May be it won’t be that user friendly (in some ways) but if you clearly mark the sections (looks like it already does), the user should do fine. You may need to just hide the description/specification links using CSS and leave the text as it is since the specs will show up after the description anyway.

You may also consider this tabs solution which is CSS only –

http://css-tricks.com/css3-tabs/

[Author]

Posts