Maryando Posted January 17, 2020 Share Posted January 17, 2020 Hi guys please excuse me my newbie question. Although I'm able to add any CSS to my Prestashop, I'm not able to find the way to modify the HTML content. So using DevTools I can see the classess and call them using CSS, but I have 3 buttons with the same class. I would like to change their classes. I have copied the code and searched using Notepadd++ all files on my Prestashop /root but I can't find any html content that is displayed using Google DevTools. Thank you so much for your time! Best Regards Link to comment Share on other sites More sharing options...
Rhobur Posted January 18, 2020 Share Posted January 18, 2020 It is easy, go to themes/your_theme/templates and in there are the template files used to render your shop; find the one you need and add your classes or new HTML tags. Tip: if you enable debug, then you'll see the templates name in the DevTools Elements tab. 1 Link to comment Share on other sites More sharing options...
Maryando Posted January 18, 2020 Author Share Posted January 18, 2020 (edited) Hi Rhobur! Thanks so much, the Tip you shared is exactly what I'm looking for. Unfortunately I'm not able to see the template name or localisation in DEBUG mode. I have cleared all cache, cache is off anyway, but still DevTools are not showing me the .tpl files localisation or name. All I can see in the DevTools/Sources is the link to the page I'm looking for even CSS files are named like themes/warehousechild/assets/cache/theme-911b761070.css so the DevTools are showing me only cached version of the file only, I can't see the real source. In case of CSS I don't need to necessarily know where the file is exactly stored, as I have own custom.css files for that, but would be nice to see all those file names and localisation, this will elevate my work in Prestashop on another level, and opens a huge possibilities of editing literary anything... Maybe this works only when the site is developed locally? I have the site on live server right now so maybe this is the case? Can you advice me feather please? Many thanks and thank you for your time! Best Regards. Edited January 18, 2020 by Maryando (see edit history) Link to comment Share on other sites More sharing options...
Rhobur Posted January 18, 2020 Share Posted January 18, 2020 set the cache to off so you can see the real files not the minified ones. 1 Link to comment Share on other sites More sharing options...
MarlexLadag Posted January 18, 2020 Share Posted January 18, 2020 set all smart cache off. 1 Link to comment Share on other sites More sharing options...
Maryando Posted January 18, 2020 Author Share Posted January 18, 2020 (edited) I had the cache OFF but "Smart cache for CSS" was on so this resolves my CSS issue. Now I can see all CSS files so thanks so much for this! But HTML source is still not revealed. When I see JS in the code I can click on it and choose REVEAL THE SOURCE and I will see there the JS is file is located, well the JS which is loaded to the HTML template file but I can't still see where the HTML/TPL file I have loaded to the browser is stored edit: @ML Software Services, I was posting exactly in the same moment yes this working now! Thanks so much but I'm still not able to see where HTML code belongs to Edited January 18, 2020 by Maryando (see edit history) Link to comment Share on other sites More sharing options...
Rhobur Posted January 18, 2020 Share Posted January 18, 2020 with Debug on and the cache off you should see something like the attached, note the green parts refering to .tpl files, those are your template files; a template file extension is .tpl. You can add your changes there. 1 Link to comment Share on other sites More sharing options...
Maryando Posted January 18, 2020 Author Share Posted January 18, 2020 (edited) I have all cache off now and debug on. This is the code I can see in the DevTools as you can see I have marked with the red box the 3 buttons I will need to change their classes or add an ID to them to have individual control over them. I can't add any changes to the DevTools as thy won't be saved so I'm still confused how you guys handling the tasks like this ones but I'm sure there is a way. Edited January 22, 2020 by Maryando (see edit history) Link to comment Share on other sites More sharing options...
Rhobur Posted January 18, 2020 Share Posted January 18, 2020 well, as a last resort you can always look for some element with uncommon class like the "dropdown-new-zoom" near your button and look for that recursive in your themes/your_theme/ and see what .tpl file is it in. I am sure your IDE has a recursive find tool to look for something in your project, otherwise you can search in the terminal/console depending on your OS. 1 Link to comment Share on other sites More sharing options...
Maryando Posted January 18, 2020 Author Share Posted January 18, 2020 Ok. Thank you, but how you see the code you showed me the screenshot before? Is this in local environment? Because if yes this is the case for sure. Please let me know. Thanks Link to comment Share on other sites More sharing options...
Rhobur Posted January 18, 2020 Share Posted January 18, 2020 It is the code you see in the DevTools > Elements the same as in your screenshot and tpl info it is shown only if you use PRestashop 1.7+ of course not in any of the 1.6+ versions (which are not officially supported anymore) 1 Link to comment Share on other sites More sharing options...
Maryando Posted January 18, 2020 Author Share Posted January 18, 2020 NO I have the latest version of PS but still can't see the same code as you Can you confirm you are not in local environment? Thanks Link to comment Share on other sites More sharing options...
Maryando Posted January 22, 2020 Author Share Posted January 22, 2020 I have installed the new shop and now I'm able to see the .tpl files source in the DevTools however I can only see the .tpl files sources assigned to the modules installed in the shop. I'm still not able to see where all the HTML code pieces are located Link to comment Share on other sites More sharing options...
MarlexLadag Posted January 22, 2020 Share Posted January 22, 2020 Maybe you better use vscode as IDE or other IDEs, it will be easier for you to locate files. Views are all in themes. May I know if you have specific page that you want to edit? 1 Link to comment Share on other sites More sharing options...
Rhobur Posted January 22, 2020 Share Posted January 22, 2020 On 1/18/2020 at 5:34 PM, Rhobur said: well, as a last resort you can always look for some element with uncommon class like the "dropdown-new-zoom" near your button and look for that recursive in your themes/your_theme/ and see what .tpl file is it in. I am sure your IDE has a recursive find tool to look for something in your project, otherwise you can search in the terminal/console depending on your OS. Do as I advised above. 1 Link to comment Share on other sites More sharing options...
Maryando Posted January 22, 2020 Author Share Posted January 22, 2020 Hello! I'm wasn't looking for the IDE solution, as this require your site to be in local environment, however I have downloaded my site to a local machine and downloaded the VSC. I must admit that this software is amazing I'm able to find literally anything right now just by searching the class or just anything. Is much faster than other IDE I was using before. Many thanks! I think this solved my problems. All I need to take care of is the local development for the next time as it will be much easier for editing. May I ask what software are you using to develop PrestaShop locally? Something like WAMP server or there are better solutions? I tried WAMP one day but PS site transferred to the live server was terribly messed up with database so I decided to develop on the live server which is probably bad idea and it is slow process. Anyway thank you so much for your valuable help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now