PrestaShop: How to create a custom page without CMS

Recently, I had a Project where my client wanted a page with a custom form in their existing PrestaShop based eCommerce site. As of my experience in working with WordPress, my first obvious preference was to create a new CMS page and write the HTML tags and the JavaScript part in the page using the HTML editor provided in the page creator tool. This is where the problem showed up. Unlike WordPress, the HTML editor (known as TinyMCE) in PrestaShop does not accept JavaScript and some HTML tags. Doing a bit of research, I found this article which shows how to enhance the capability of this TinyMCE by adding a few lines of code in a TPL file. But when I went to the FTP location mentioned in the article, I found no such TPL file. This left me no choice but to manually create a custom page, a situation of which you are not going to get any useful tutorial or resource online. This is why I felt like sharing the way of performing this task.

So how exactly are you going to create a custom PrestaShop page without using the CMS? We are going to accomplish it in 3 steps:

Step 1 – Creating the PHP page: Create a PHP file that the users are going to browse (for ease of understanding, we are going to name the file as custom-page.php) and upload it to the root directory of your PrestaShop eCommerce site using FileZilla or any of your preferred FTP client. Here is the code inside the file:

Step 2 – Creating the PHP controller file: Create a controller for the PHP page made in step 1 (for ease of understanding, we are going to name the controller file as CustomPageController.php) and upload it to /controllers/front directory of your PrestaShop site. Here is the code inside the file:

Step 3 – Creating the TPL file: Create a TPL file for the page made in step 1 (we are going to name the TPL file as custom-page.tpl to match with the codes written in steps 1 and 2) and upload it to the active theme directory of your PrestaShop site. Here is the code inside the file:

Do not forget to enclose your CSS and JavaScript inside the {literal}{/literal} tags as shown above since TPL files cannot comprehend CSS and JavaScript without it. So, there you go. Now you know how to create a custom PrestaShop page without the CMS. Good Luck!

Advertisements

52 thoughts on “PrestaShop: How to create a custom page without CMS

  1. Hello I followed your tutorial, but when I hit the page index.php?page=custom-page nothing appear it brings the first page of the shop. Any advice? I use prestashop 1.6.0.9

    Like

  2. no my page doesn’t appear, I am not sure if css code is necessary, because I didnt use any. I am just try to display a “hello” message. My goal is to make a custom form. but first I need to see the page. thank you

    Like

      • Great article. I used your code to create my custom prestashop pages and it works well but I’m struggling with a couple of things. My new page has . I think this might also be causing some scripts not to load. {HOOK_HEADER} does not get loaded on this page and I’m wondering if its all related to that body tag not being set properly. Any help would be appreciated.

        Like

  3. Hello again. I saw that you also wanted to build a custom form. Could you help me on how I make it too. I know that is diffrent question from your post but I could not find any other tutorial for a custom form.
    thank you.

    Like

    • There are lots of ways depending on the functionality of your form. Just work on the custom-page.tpl file, see my comments in the code, use HTML for form elements, CSS for styles and JavaScript for functionality.

      Like

  4. Good post.

    If I go directly to xyz.com/custom-page.php It shows the content but the javascript for the nav menu and other resources don’t get loaded.

    And if i go to xyz.com/index.php?page=custom-page It shows the index page, and looks like the code in “CustomPageController” is not executed.

    ¿Why is repeated the part of include the custom-page.tpl in the Controller and in the custom-page,php?

    -CustomPageController:
    $this->setTemplate(_PS_THEME_DIR_.’custom-page.tpl’);

    -custom-page.php:
    $smarty->display(_PS_THEME_DIR_.’custom-page.tpl’);

    Like

  5. Hi Iftakhar, I have a question maybe you could answer, I have been doing a lot of research but no luck. Y created a custom html landing page, for a campaign, that I will link to my product page. I can upload the file to the root folder, and no problem it loads. But because it loads with my domain, and I will have it in different languages, I’d like to be able to load it with the /fr or /it in the domain, for SEO purposes. What do you think I should do?
    (I reached this post because I was looking at the possibility to fully customize a cms page, but I have not found a way to do it).

    Like

    • Hey sebacrispo, sorry for the late reply, haven’t been around here for quite a while. I haven’t worked with multi-language options before. But from your description, I would recommend you to do it with JavaScript. Write your code and then put it inside the script tag (enclosed by {literal}{/literal} tags of course) that I showed in the 3rd step. Good Luck!

      Like

  6. Great article. I used your code to create my custom prestashop pages and it works well but I’m struggling with a couple of things. My new page has . I think this might also be causing some scripts not to load. {HOOK_HEADER} does not get loaded on this page and I’m wondering if its all related to that body tag not being set properly. Any help would be appreciated.

    Like

  7. Looks like some of my comment was stripped out. The sentence that is cut off should say… The new page has class = page-not-found in the body tag.

    Like

  8. hi i want to add recharge facility to my prestashop website, how do i do it? i am total numb at coding php and other things, i have sample php pages of recharge api from recharge company who is giving me api for their recharge system. how do i do this ? can you guide me for the same.

    Like

  9. Hi I managed to create a new page and everything loads fine. But the problem with my html form is it has php POST in the input fields, which is also printed in the page. I understand that tpl will not allow using php code in it. Is there any other way i can accomplish this?
    For example next to my username it prints this php statement.

    Username :
    Can i not show it on the php page?

    Like

  10. Hello Iftakhar, Thank you for the wonderful post. I tried it the only problem that i am getting is that i am having the page title as “404 error” is there a way to fix the problem? thanx.

    Like

  11. Hi Guys,
    All works nicely

    I have only one issue, how change the TITLE of the page.
    Also because it’s a dynamic field.
    I had already added the “custom-page”, in the SEO and URLs

    Do you know how to fix it?
    PS: Cache cleared

    Like

    • Hey Andrea! Sorry for the late reply. I was busy with a lot of other stuffs. Is that the meta title you are referring to? If so, here is an easy way. Instead of loading the original header, make a new file with everything copied from the main header file, but replacing the title loading part with a manual title, and include it in the first php file I made. Let me know if it works. And of course, if you do figure out a more elegant approach, do share it with us. Good luck!

      Like

  12. Hi Iftakhar Hasan,

    Thanks for the great tuts..Everything is working fine except for 2 things:
    — The Title in the window tab still says 404 error even after clearing PS cache
    — The columns on the left is no longer showing (using default theme)

    Like

  13. Thanks for the great tutorial.

    I followed through using my own file names but the result was a totally blank page.
    So I went through again using the custom-page name without making changes to your code and ended up with the same result.

    My V1.6.0.10 site uses friendly URLs so to call the page I just use http://www.site.com/custom-page
    The page was linked in the Preferences->SEO & URLs

    Any suggestions?

    Like

  14. Adding this to the Controller Class helped me to get rid of the 404 Error. Also the left menu is now shown:

    public $php_self = ‘custom-page’;
    public $ssl = true;

    Liked by 1 person

  15. My custom page is working but every time I update the code I need to clear cache because the page will not show if I don’t clear. How can I fix that. Thanks!

    Like

  16. Hi Iftakhar hasan
    Thanks for your article 🙂
    Its worked for me.
    but its give error like page_name is not defined, and also in body tag id=”pagenotfound” ,so i missed page name
    please give me solution

    thanks in advance 🙂

    Like

  17. I absolutely love your website.. Very nice colors
    & theme. Did you make this amazing site yourself?
    Please reply back as I’m trying to create my own personal blog and want to learn where
    you got this from or just what the theme is called.
    Many thanks!

    Like

  18. Hi Iftakhar,
    Thanks for your article 🙂
    I did like the steps you explained
    but its gives 50 error , i added the page from BO -> seo and urls,
    still shows the same error.
    please give me solution

    Thanks in advance.

    Like

    • 1)
      if you receive 500error you must change your environment to developer mode:
      On your server, open the /config/defines.inc.php file.
      Find this line: define(‘PS_MODE_DEV‘, false);
      In this line, change “false” to “true”.
      Save your changes.
      2)
      for controller you must Remove class_index.php
      cache/class_index.php

      Liked by 1 person

Ask a question or leave a reply!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s