CiviContribute price lists won't calculate - YooTheme conflict

[asdl]

I'm creating a WordPress (3.9.1) / YooTheme (Moustache 1.0.4 / Warp 7.2.4) site using WordPress CiviCRM 4.4.5.

Using CiviMember I created a price list, then used that list in CiviContribute for an online Membership payment page. It previews beautifully in the CiviContribute preview, but not in when I select the front-end CiviContribute element and put the shortcode on a WordPress page in Test Mode. Then the page displays and the options can be selected but no calculation takes place, and no amount appears in the Total field.

The page is live at

http://biddefordpoolyachtclub.org/membership-renewal/

If I switch the theme to a default WordPress theme like Twenty Fourteen, it works fine.

I've tried it with all WP plugins (except CiviCRM itself) turned off, and have the same problem.

Any idea what's blocking the page from working right?

I posted the problem four days ago on the YooTheme forum and not a single person has responded - I think the CiviCRM part is too daunting.

YooTheme frameworks Warp and Widgetkit are working fine. PHP is 5.4.17

We're quite far down our development path at this point - customized the theme and gotten various stakeholders' approvals on the look and feel, so we're loathe to change themes. And this is the first Civi glitch we've hit - basic membership pages work, as do CiviEvent pages (even ones with price lists).

Suspect it has something to do with conflicting JavaScipt/JQuery libraries and how they're being called, but no idea how to find or control them...

[diegov]

Yes, it looks very like Jquery/Javascript conflict.

You could try to address it like you'd do with any problem like that, no matter what component produces it. You can try to use a plugin to handle the conflicts, like Plugin Organizer (http://wordpress.org/plugins/plugin-organizer/faq/) or try to enable noconflict mode using something like this code in your page:

Code: [Select]

jQuery.noConflict();
jQuery(document).foundation();

[asdl]

Thanks for the suggestions. I added the noConflict code to the template but same problem (though it did solve one weird typographic issue!).

Over at the YooTheme support forum, they offered this advice:

Firebug shows this error:

TypeError: jQuery(...).foundation is not a function 
http://biddefordpoolyachtclub.org/membership-renewal/?page=CiviCRM&q=civicrm/contribute/transact 
Line 1059
As it seems your extension CiviCRM loads its own comparatively old jquery library 1.8.3 (Nov. 2012):

<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/jquery-1.8.3.min.js?r=s0u32">
Please check if there is an update using a more recent library. Alternatively take a look the settings of your extension to see if there is an option to turn off the loading of the jQuery library, so the one that is loaded by the theme will be used.

Is there a way in CiviCRM to turn off the jQuery library loading, or to update the library being used?

A

[asdl]

Thanks for looking at this diegov.

Is there any chance of a CiviCRM update with a more recent jquery library?

And would CiviCrM ever look at adding a plugin option to turn off jQuery library loading (if only for debugging)?

So I tried substituting the newest version of jQuery (1.11.1) for the 1.8.3 one in use by renaming the old one with a .bak extension and renaming the new one with the old name jquery-1.8.3.min.js,  but it didn't change anything. Then I tried to take all of CiviCRM's jQuery out of commission by giving all the jQuery files in /wp-content/plugins/civicrm/civicrm/packages/   a  .bak extension and oddly it had no effect at all.

How can that be - how can CiviCRM be getting its jQuery if they're renamed/misnamed?

[asdl]

What does this mean?
Looking at page

https://biddefordpoolyachtclub.org/membership-renewal-2/

in Chrome Inspect Element Console, I see 9

   Uncaught ReferenceError: cj is not defined

errors, and 1

   Uncaught ReferenceError: CRM is not defined

error. 

Plus a

   Invalid App Id: Must be a number or numeric string representing the application id.
   FB.getLoginStatus() called before calling FB.init().

[asdl]

So I've saved the View Source from the bad - non-working - YooTheme page

   https://biddefordpoolyachtclub.org/badPageCode.txt

and a good - working - TwentyFourteen page

   https://biddefordpoolyachtclub.org/goodPageCode.txt

and the reason the bad YooTheme page isn't working jumps right out:

there are 23 CiviCRM jQuery libraries that don't load.

In the bad YooTheme page, the Civi JavaScript just starts right in with the undeclared variable "cj" after the <script> tag at line 141

In the good TwentyFourteen page, 23 Civi jQuery libraries and 7 Civi CSS files load after the first <script> tag at line 44.

So what's keeping those from loading in YooTheme? Why do Twenty Fourteen and RocketTheme Gantry let them load?

[asdl]

Just posted this over at YooTheme support:

 I've got it working.

It's only a patch and will fall apart the next time YooTheme or CiviCRM update anything - but it shows how to make it work, and I hope it will show YooTheme's engineers how to fix their software, which shouldn't block well-designed open source software from loading.

After realizing YooTheme/Warp was blocking the CiviCRM plugin from loading the libraries it needs to operate, I resorted to YooTheme's JS and CSS customization file hierarchy to import all Civi's libraries, as outlined here:
http://www.yootheme.com/themes/documentation/developers/customization
and more nicely here:
http://www.yootheme.com/support/question/53368?order=created

So I ended up with a /styles/bpyc/layout/theme.config.php file like this:

   <?php
   require(__DIR__.'/../../../layouts/theme.config.php');
   // add script
   $this['asset']->addString('js', 'var CRM = {"config":{"userFramework":"WordPress","resourceBase":"\/wp-content\/plugins\/civicrm\/civicrm\/","lcMessages":"en_US"}};
   ');
   $this['asset']->addFile('js', '/wp-content/plugins/civicrm/civicrm/packages/jquery/jquery-ui-1.9.0/js/jquery-1.8.3.min.js?r=s0u32');
   etc.
   $this['asset']->addFile('css', '/wp-content/plugins/civicrm/civicrm/packages/jquery/css/jquery.autocomplete.css?r=s0u32');
   etc.
   
filled with 23 jQuery and JS entries, 7 CSS entries, two code statements.

I was lucky to find the hint to use "addString" for adding straight code rather than "addFile" here:
http://www.yootheme.com/support/question/9799

I would like to hear from YooTheme that they're going to address this problem, or I'm going to have to start looking elsewhere as I've got more CiviCRM projects coming up...

[asdl]

I'm a little tired of hearing myself talk, but here's the final installment:

Short-lived elation - turned out the added code was conflicting with Widgetkit.

Commenting out JS and CSS lines in the YooTheme theme.config.php brought it down to one file that made the Civi calculation work and YooTheme's Widgetkit not work - the Civi JS noConflict file: <script>var cj = jQuery.noConflict(true);</script>

When I changed it to  <script>var cj = jQuery.noConflict();</script> (took out the "true" value) Civi and Widgetkit worked.

Maybe Civi should change the "noconflict.js" file to not have a "true" value?

Am still loading the 7 CSS files through YooTheme's custom layout but at least everything works for now.

[diegov]

Hehehe, lots of self talk, it happens, at least your process is registered here so others can benefit from it.

I'm not that good with Javascript, but I think the "true" statement should have it value there...

Congratulations for making it work!