5

I've got a WordPress theme that's giving me issues with the Backbone JS module. According to https://issues.civicrm.org/jira/browse/CRM-17352, it's because CiviCRM isn't running Backbone in no_conflict mode. Unfortunately, I'm not familiar enough with all of this to figure out where the no_conflict() call would be placed in the code.

According to Backbone isn't loading on Civi 4.6.11/WP 4.4.1, Andrew West suggests dequeue-ing the theme's loading of Backbone, and enqueue-ing the CiviCRM backbone. I get the concept, understand how to limit the if statement to the civicrm base page, and already have the child theme, but I'm unclear of how I tell it to enqueue the specific version of Backbone for CiviCRM?

EDIT: Adding var Backbone = Backbone.noConflict() to wp-content/plugins/civicrm/civicrm/packages/backbone/backbone.js blows up in an impressive array of 15 errors on the Manage Online Event page, with Backbone Undefined. Scary thing is that it seemed to render more of the page, but still not correct.

Improve this question
1
  • if I understood correctly, the issue raised because there are two backbone versions being loaded? If so, why not just dequeue the theme's backbone version in Civi's page and let Civi load it's own?
    – Andrei
    May 24, 2016 at 22:49

3 Answers 3

Reset to default
1

If anyone new is having this problem, the solution is to upgrade to CiviCRM 4.7.31+. CiviCRM ships with the BackboneJS library; so do certain WordPress themes. Sometimes that causes a conflict. Conflict mitigation was added in 4.7.31.

Improve this answer
3

Assuming the file you want to load is the one located in the CiviCRM plugin folder at 'civicrm/packages/backbone/backbone-min.js', then you'd use:

wp_enqueue_script( 'your_backbone_handle', CIVICRM_PLUGIN_URL . 'civicrm/packages/backbone/backbone-min.js', array(), CIVICRM_PLUGIN_VERSION );

See https://developer.wordpress.org/reference/functions/wp_enqueue_script/

The only slight issue with this is that the constant CIVICRM_PLUGIN_VERSION is not updated with each minor dot release (it should be) which means that you may need to manually bump this each time you upgrade CiviCRM in case it ships with a new version. Replace it with your own version numbering in that case.

Disclaimer: I'm not sure if this is the only Backbone-related file you need to enqueue. Also, this may not solve the issue with your theme but it is the method by which you should target CiviCRM's copy of Backbone :-)

Improve this answer
6
  • Random rabbit trail induced by grep and locate on the above line: Changing the priority of all the backbone lines to 90+ did nothing for me. File changed was: civicrm/civicrm/CRM/UF/Page/ProfileEditor.php
    – G H
    May 24, 2016 at 13:12
  • Sorry, but I don't understand :-(
    – Christian Wach
    May 24, 2016 at 14:18
  • Ugh ... Not quite. Got it to load with wp_enqueue_script( 'crm.backbone', '/wp-content/plugins/civicrm/civicrm/packages/backbone/backbone-min.js', array(), 4.7); in the child theme function.php file. It's giving the same error as before, so this isn't helping. I know it's reloading the whole thing because there is an additional error thrown for an unrelated variable when this line is in. Leaving the line in and changing the theme to a known working theme removes both errors. So the page is apparently loading as it should be and not getting stomped on as expected. Next try: crm.backbone.js
    – G H
    May 24, 2016 at 16:06
  • First comment reply: I did a grep and locate on the backbone-min.js line and it pointed towards the ProfileEditor.php file which had a number of addscript lines with high priorities for the backbone includes. I dropped those down to 90, hoping that it would supersede the theme, assuming that the theme loaded them at 100. It was a hack that didn't work.
    – G H
    May 24, 2016 at 16:10
  • Nope, pointing the wp_enqueue_script at crm.backbone.js also did not work. Added ReferenceError: CRM is not defined error and page looks the same. I'm probably just doing it all wrong.
    – G H
    May 24, 2016 at 16:16
2

FWIW, if you want to extend an analogy from the jQuery.noConflict(), you might try patching js/noconflict.js. The theory is to load files in this order:

  1. Civi's version of each upstream library (jquery, backbone)
  2. Civi's *.js files (which reference the upstream library)
  3. noconflict.js (which obscures Civi's version)
Improve this answer
3
  • This is what I would to see happen, over the question. I'll try to see if I can't muddle my way through.
    – G H
    May 26, 2016 at 18:28
  • BTW, is this one of those things where the goal is to move towards Angular.js?
    – G H
    May 26, 2016 at 18:30
  • If anyone's found a solution to this, please share. For me, I've worked around the whole problem be using the plugin 'Theme Test Drive' wordpress.org/plugins/theme-test-drive which works for the moment. A more elegant solution would be most welcome.
    – Graham
    Oct 14, 2016 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.