v1.6-v1.7 Particles Animation Background Prestashop

[TX1000]

Here is how to add Animated Particles to Prestashop



1. Create you desired particles here: https://vincentgarreau.com/particles.js (DEMO)
2. Click "Download current config (json) from that website.
3. Upload "particlesjs-config.json" + "particles.min.js" to your prestashop folder:
/themes/classic/assets/js/particles.json

4. Insert the the code i commented out in "layout-both-columns.tpl" file
(Or upload file to path: /themes/YOURTHEME/templates/layouts)

5. Give any element ID "particles-js"

6. Particles will now show inside that element. Im using it as a background, looks nice!

Extra tip: You can give particles-js CSS (position: fixed)

Please give a like if this was useful for you

 

[d-shilko]

(Or upload file to path: /themes/YOURTHEME/templates/layouts)

Hello.
it is bad practice.
I made module that implement you idea

all configuration in app.js and front.css (I'm lazy to build module config)

 

[TomCenter]

Does it works on mobile ?

 

[urernamer]

but why?

 

[TX1000]

Does it works on mobile ?

Yeah it works perfectly on mobile.

Post automatically merged: Nov 8, 2021

but why?

Because it looks cool and can attract users. Looks techy

Post automatically merged: Nov 8, 2021

Hello.
it is bad practice.

I made module that implement you idea

all configuration in app.js and front.css (I'm lazy to build module config)

Ok interesting, but i think its very easy and convient way without editing existing prestashop files. Its just to upload 2 files, and insert a small line of code in layout-both-columns to activate

 

[pk2res]

Thank you !

 

[d-shilko]

Yeah it works perfectly on mobile.

Post automatically merged: Nov 8, 2021

Because it looks cool and can attract users. Looks techy

Post automatically merged: Nov 8, 2021

Ok interesting, but i think its very easy and convient way without editing existing prestashop files. Its just to upload 2 files, and insert a small line of code in layout-both-columns to activate

layout-both-columns.tpl different for different theme. Use your layout-both-columns.tpl it is way to broke the site
U can yourself compare layout-both-columns.tpl in few theme.

 

[huggy]

that's awesome

 

[Elpho]

amazing module

 

[TX1000]

layout-both-columns.tpl different for different theme. Use your layout-both-columns.tpl it is way to broke the site
U can yourself compare layout-both-columns.tpl in few theme.

Thanks for letting me know. I was not aware of this, but then they can just insert that small line of code i commented out into their own layout file

 

[hxcode]

thx for sharing

 

[Leeladevi Mani]

thx for sharing

 

[sadsdf]

Thank you !

 

[thomas777]

ohh. nice.. i wil try in my app.js............

 

[lulu11]

Yeah it works perfectly on mobile.

 

[Sillumin]

Thank you very much! It can be useful module!