Javascript error when using Exp:resso Store in a Safecracker entry form

Question

EE 2.5.5, Exp:resso Store 1.6.3

The Store Product Details field works fine in the Control Panel, but when using it in a SafeCracker form, I get the following javascript error (from themes/thirdparty/store/cp.min.js):

Uncaught TypeError: Object [object Object] has no method 'sortable' 

Here's the template code I'm using:

{exp:safecracker channel="signups" entry_id="18" return="foobar" }
    {field:product_details}
{/exp:safecracker}

Is there anything else I should be doing to get Store to work with SafeCracker?

Answer 1

This appears to be a bug in Store introduced by newer versions of EE and/or SafeCracker. We will have a fix out for it shortly.

In the meantime, you can fix it yourself fairly easily by opening ft.store.php, and around line 37, replace this line:

$this->EE->cp->add_js_script(array('ui' => 'datepicker'));

with this:

$this->EE->cp->add_js_script(array('ui' => array('datepicker', 'sortable')));

That will tell SafeCracker that it needs to load the jQuery UI Sortable library, which is included by default in the EE control panel (hence why it is working fine for you in the CP).

Answer 2

Are you including your own version of jQuery by chance? This error looks like store is looking for jQuery UI Sortable and it's not present on the jQuery object, which can happen if: you load jQuery, plugins, then load jQuery again, thus overriding the original.

You can disable safecracker's auto jQuery load: http://ellislab.com/expressionengine/user-guide/modules/safecracker/#include-jquery