Free PrestaShop module - Beautiful Preloader for PrestaShop.
Add a beautiful preloader to your site
Compatible with: PrestaShop 1.6, PrestaShop 1.7 and Thirtybees
You can find a spinner on the top right corner. The spinner on the demo is set to show on the index, category and product pages only. The spinner on the demo will show out after clicking a filter or a pagination button.
The module is for PrestaShop 1.6, PrestaShop 1.7 and Thirtybees, it can work on all sites no matter which theme you are using.
Features
- Preloader will be applied to all pages by default. You can change taht to display preloader on special pages.
- Show a spinner out when a filtering request is running for the Prestashop 1.7's native Facet search module.
- 2 predefined spinners, they are svg images, so they are customizable, you can change their colors and sizes. Why don't use font icons or images by default, because I guess svg images can be loaded faster than font icons and images, another reason is that svg images are customizable by using settings on the back office without editing image files. I got the predefined svg loading images from https://loading.io/ I will add more predefined spinner.
- Custom spinners. You can use a loading gif or a picture to be spinner, you can even use text to be spinner.
- Ability to adjust the position of spinner.
- Customizable overlay.
- Overlay can be disabled.
- It's possible to close preloader by clicking on overlay.
- Ability to set a timer to delay hiding preloader.
Screenshot
How to install on PrestaShop 1.6
Because of PrestaShop 1.6 doesn't have a hook right after the body tag, so you need to modify the /themes/your-theme/header.tpl file to add one to make this module work.
1 | {hook h="displayAfterBodyOpeningTag"} |
Here are some screenshots of how to do the modification on Panda v1, Transformer v3 and the default theme
Panda v1
Transformer theme v3
Default theme
Changelog
- V1.1.0 November 30, 2018. Add compatibility with PrestaShop 1.6.
- V1.0.0 March 14, 2018.
I will keep upgrading this module, let me messages, if you have feature requests.
hello thank you for this wonderful module
I have a problem
opacity does not take the whole page of my website
top of header loading is not hidden
how to solve this
Thanks for your help
Send me your site url, so I can take a look first, my email address is helloleemj@gmail.com
I have installed it on PS 1.7.5 without any coding. It works fine for pagination and filtering, but for products and categories the spinner just shows after the page opens. Can i fix that with coding?
Send your site url to helloleemj@gmail.com so I can take a look first.
Hi Johny
it would be good if the module worked in the order process
Thanks for your suggestion of improving the preloader module. I recently added a feature to the Easycheckout module to show a progress bar after the Order-to-pay button is clicked, that’s kind the same feature as you wanted. During that process, I studied dozens of payment modules, I found they used various ways to hand the click event of Order-to-pay button, some of them just redirect to order confirmation page, like Pay by back wire, some of them open a window, like paypal, some of them use ajax, like Stripe, so It’s difficult to make the preloader module to be compatible with them.
Hello friend, I loved your module, I have a query ... how can I add a new "preloader" from my website but I want it to be seen in the settings of: "Spinner style:" since there is "0" and the "1" but I want to add my own "preolader" would be the "2", I do not want to touch the html options of my website but they were inside the same module ... could you help me!
Use the "Custom preloader" option which is right below the "Spinner style" option. Check the #3 point in the "Features" section.
I did what you tell me, I activated the HTMLPurifier Library but it does not show me the created preloader.png.
You need to disable the HTMLPurifier Library, not activating it. Let me know more information, let what did you do, so I can give you more suggestions.