Jump to content

[FREE MODULE] Custom CSS / JS from BackOffice


get3code

Recommended Posts

Hello, probably not many times someone was looking for a module that would add some css styles or javascript code directly to the template without ftp. It is an ideal solution for people who do not have access to ftp and want to make visual changes or add their own javascript code directly from the administration panel.

The module I share is free. With this module, you can add your own CSS and JavaScript code from the PrestaShop admin backend. Just install the module and go to setup to add your code. The module uses the CodeMirror editor.

  • two language versions EN/PL
  • compatibility in version 1.6 / 1.7 / 8.0
  • two editor templates (light and dark)

the module saves data in the database without creating additional files.

  • # version 1.0.4 - added break line in codemirror
  • # version 1.0.5 - fix for codemirror editor
  • # version 1.0.6 - javascript support in footer and header, the ability to save data to the database or to a file
  • # version 1.0.7 - additional field to set code editor height
  • # version 1.0.8 - add axios for edit file and remove limit line
  • # version 1.0.9 - add show and hide code area

get3addons_1_0_9.zip

Edited by get3code (see edit history)
  • Like 4
  • Confused 1
Link to comment
Share on other sites

hace 9 horas, get3code dijo:


Hello, probably not many times someone was looking for a module that would add some css styles or javascript code directly to the template without ftp. It is an ideal solution for people who do not have ftp access and want to make visual changes or add their own javascript code directly from the admin panel.

The module I provide is free. With this module, you can add your own CSS and Javascript code from the PrestaShop admin backend. Just install the module and go to configuration to add your code. The module uses the CodeMirror editor.

  • two language versions EN / PL
  • compatibility on version 1.6 / 1.7 / 8.0
  • two editor templates (light and dark)

the module saves data in the database without creating additional files.

get3addons.zip 94.8 kB · 2 downloads

 

Not work.

Not load editor.

PS 801 - PHP 8.1.16

Link to comment
Share on other sites

Try this. I removed configuration detection.

 

 

I tested on 4 different servers with 4 different versions of PHP and Prestashop. It works on everyone. Check if you have an F12 debugger chrome conflict.

 

The editor loads from the javascript library. If a module generates an error in the prestashop backend, the library may fail to load. That's why it's good to check the debugger for errors in the console.I will add a text editor without loading javascript in the next version of the module.

Edited by get3code (see edit history)
Link to comment
Share on other sites

hace 5 minutos, get3code dijo:

Especially for you, I added a text code editor. if you have problems with javascript in the backend. Version 1.0.3 is already with this addition.

Many thanks.

It's strange, I have CodeMirror working with javascript loaded perfectly in other stores.
I don't have any problem with backoffice debugging on js load.

By the way, with the size of the edit box it is impossible to work.

Thank you.

image.png.e6ec907d65ccca3d274e810d30958ab7.png

Link to comment
Share on other sites

  • 2 weeks later...
8 hours ago, get3code said:

I added an additional field to change the height. It is in version 1.0.7

Thank you! :D That's exactly what i was looking for. Now it will be my most used module!

Two things:

1. Can the google code be put in the javascript header?

2. Maybe you can put a 'close tab' in the settings of the module, so the first thing we see when entering the module is the CSS tab. This would be a little nicer for those of us who have long lines of code and change all the time.

again Thank you!

Link to comment
Share on other sites

13 minutes ago, dresiosue said:

Thank you! :D That's exactly what i was looking for. Now it will be my most used module!

Two things:

1. Can the google code be put in the javascript header?

2. Maybe you can put a 'close tab' in the settings of the module, so the first thing we see when entering the module is the CSS tab. This would be a little nicer for those of us who have long lines of code and change all the time.

again Thank you!


1. Yes you can put javascript code without script tags
2. I will add this functionality in the next version of the module

Link to comment
Share on other sites

3 minutes ago, get3code said:


1. Yes you can put javascript code without script tags
2. I will add this functionality in the next version of the module

The module cuts my code at line 273. I just lost 700 lines of code for not backing up properly before pasting code from one module to another :rolleyes:

Example my entire code is 1000 lines, but when I put save buttom the code cuts at line 273.

Link to comment
Share on other sites

2 minutes ago, get3code said:

If you have checked to load from database then there is a character limit in the database. You must have this option turned off.

I have not activated. But still when I put more than 273 and choose "save" the code cuts at that line

 

Captura de pantalla 2023-03-23 a las 12.48.48.png

Link to comment
Share on other sites

Ok, I changed the module. Unfortunately, prestashop has character limits. I had to add ajax to save data to files on an ongoing basis. In the near future I will add additional functionalities such as hiding elements. Current version with ajax - 1.0.8

Link to comment
Share on other sites

5 minutes ago, get3code said:

Ok, I changed the module. Unfortunately, prestashop has character limits. I had to add ajax to save data to files on an ongoing basis. In the near future I will add additional functionalities such as hiding elements. Current version with ajax - 1.0.8

Thanks, I was able to recover the lost code, I'll try the new version and let you know ^_^

Link to comment
Share on other sites

  • 4 months later...
  • 1 month later...
  • 5 months later...

Quick question as I am new to prestashop, about five months.

This module will allow us to upload onto servers, .js and .CSS files.  So if I build a html that runs it's own .js and .CSS, if I connect and rebuild the folder layout and add the .MP3 and .PNG files in the same sub folder as to the html, .js and .CSS that are created I can created my own style and functions and have prestashop load and display the code in prestashop environment.  Is that right?  If it is then OMG there is no limits to this little baby...  Just have to workout hooks and uploads and themes are a thing of the past.

Link to comment
Share on other sites

9 hours ago, ateve said:

Quick question as I am new to prestashop, about five months.

This module will allow us to upload onto servers, .js and .CSS files.  So if I build a html that runs it's own .js and .CSS, if I connect and rebuild the folder layout and add the .MP3 and .PNG files in the same sub folder as to the html, .js and .CSS that are created I can created my own style and functions and have prestashop load and display the code in prestashop environment.  Is that right?  If it is then OMG there is no limits to this little baby...  Just have to workout hooks and uploads and themes are a thing of the past.

Hello, this module will add independent files loaded from the module. Managed from the administrator level. So you don't need ftp access. The module has default hooks set (header and footer). It is not possible to change them. There is no need to define other hooks.

Link to comment
Share on other sites

  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...