N13Design N13Design - 4 months ago 20
Ajax Question

Prestashop Endless Spinning Product Save Button

I was running Prestashop 1.6.1.1. The product save buttons would take about 45seconds to load. I upgraded to 1.6.1.3 and they now don't load at all. I tried rolling back and upgraded to 1.6.1.4. I deleted Smarty Cache, Deleted Chrome's history, cookies etc. I tried on multiple computers at work. I replaced admin/theme and controller folders with 1.6.1.4 directly.

When I inspect the Network requests I see a handful of the tabs are not loading and get 500 errors and one with 404. The product save buttons won't completely load until all the tabs have loaded. In Firefox when I chose to resend the request I get a good 202.

I'm experiencing this at work and at home. I contacted Hostgator about the issue. They tested and said the save button loaded for him, not quite sure I believe him. But if it worked for him as he said it sounds like a cookie/cache problem.

What am I missing?

Answer

It is a very common problem of Prestashop 1.6.x.x.

What is the background of it?

Prestashop has a complex product editing page consisting of multiple tabs where information is loaded asynchronously (using Ajax). The "Save" and "Save & stay" buttons keeps spinning until all tabs are loaded successfully. If you have got any error in one of these tabs data - it will keep spinning long or forever.

There are these solutions

  1. Try another browser. To be sure it is not related with your browser (Javascript is relative to the browser) - try another one.

  2. Fix your Prestashop. Possibly you have an error in your Prestashop. It can be broken or outdated modules, broken or invalid data in the database, modified core Prestashop files etc. It is not easy to debug and fix it.

  3. Add a trick*. Caution! Do it if you are sure you have no other options. By adding this trick you can get some Javascript warnings while saving a new product but it won't produce data loss.

*Adding a trick

You are not going to edit core Prestashop files, but use overrides.

[yoursiteroot] - is a root folder of your Prestashop site. It can be public_html/ or else.

[youradmin] - is an admin folder of your Prestashop installation. It can be a sequence of random characters like smbcl5blanwcxnfs/ or anything else. You can see it while logged to your admin panel in the URL line: http://www.yoursite.com/[youradmin]/index.php?....

  1. Using FTP copy all .tpl files

    from [yoursiteroot]/[youradmin]/themes/default/template/controllers/products

    to [yoursiteroot]/override/controllers/admin/templates/products

    If this folder doesn't exist - create it exactly with all its path folders.

    (Optionally you can copy the same index.php file from that folder to all new folders you have created. It is just for the security reasons.)

  2. Find at the bottom of all these freshly copied files the same lines:

    <button type="submit" name="submitAddproduct" class="btn btn-default pull-right" disabled="disabled"><i class="process-icon-loading"></i> {l s='Save'}</button>
    <button type="submit" name="submitAddproductAndStay" class="btn btn-default pull-right" disabled="disabled"><i class="process-icon-loading"></i> {l s='Save and stay'}</button>
    

    and change to:

    <button type="submit" name="submitAddproduct" class="btn btn-default pull-right"><i class="process-icon-save"></i> {l s='Save'}</button>
    <button type="submit" name="submitAddproductAndStay" class="btn btn-default pull-right"><i class="process-icon-save"></i> {l s='Save and stay'}</button>
    

    What exactly we have done with the code?

    Removed disabled="disabled".

    Replaced process-icon-loading with process-icon-save.

  3. Be sure in your site Backoffice settings Advanced parameters > Performance > Disable all overrides is set to No.

Disable all overrides is set to "No"

Done!

We hope Prestashop fix this awkward errors precaution in a future.

If you want to remove the trick - just remove all these added .tpl files.

Comments