Documentation index

Integration & embedding options ›

How to use iubenda on a Prestashop site


This is a tutorial on how to get started with iubenda on Prestashop, as provided by Joseph Smith.

The process is as follows:

  1. Inserting a custom hook in PrestaShop’s database;
  2. Calling the hook with a controller;
  3. Positioning the hook on the site, exactly where needed;
  4. Inserting iubenda’s code somewhere in the backend;
  5. Targeting the hook and displaying the privacy policy on the site.

PART 1 – Inserting a custom hook in PrestaShop’s database

Given that I wanted the code snippet to be seen only on CMS pages, excluding category views, product views, cart views and so forth, I needed a so called “hook”, or “position”, in order to place my code exactly where needed.

Three things are involved in this process:

  • “teaching” PrestaShop that the hook exists;
  • putting the hook in a controller file in order to be “called” from the database;
  • once called, to instruct the site to use it somewhere.

This process is valid for any kind of hook on any kind of page on PrestaShop.

I program a lot so I’m used to hardcoding in MySQL directly in the database, for less experienced users this first part might be a little tricky.

First, we simply need to access our database, usually in a phpmyadmin panel (link, username, and password are needed!). Then open the SQL panel and enter this query:

INSERT INTO `ps_hook` (`id_hook`, `name`, `title`, `description`, `position`, `live_edit`) VALUES (NULL, 'displayCmsPreFooter', 'CMS Pre Footer', 'This hook displays content under CMS contents and before the footer', 1, 1);

As you can see, this query has a few fields, some of these might require some explanation as to what they’re used for.

  • id_hook: an identification number given to the hook.
  • name: Name of the hook, this is the name we’ll give the hook.
  • title: User-friendly title for the hook, this gets used in the PrestaShop backend.
  • description: User-friendly description of the hook, recommended language would be English, this field is (as of PrestaShop 1.6.0.6) not yet translatable. This field is used in the PrestaShop backend.
  • position: Boolean value (1 or 0) to determine if this hook supports positioning of modules when more than one module uses this hook. Generally you want this to be enabled for hooks that display content, so you can change the order in which modules are called and displayed.
  • live_edit: Boolean value to determine of the ‘live edit’ functionality gets enabled for this hook

You can easily notice in the code above that I decided to name my hook “displayCmsPreFooter“, title it “CMS Pre Footer” and describe it “This hook displays content under CMS contents and before the footer“.

TIP: You can name and describe the hook freely, just remember to use letters and numbers and avoid strange punctuation for programming sake. The hook name cannot have spaces.

With the query pasted in the SQL command frame, simply execute the command and you’ll have given PrestaShop your first “Inception”: he now knows that your hook exists! 🙂

PART 2 – Calling the hook from a controller

To use our newly created hook we need to call it from a FrontController. This call executes all modules linked to our hook and runs any code associated to it.

  • access your site’s FTP root;
  • create a new Controller file in the “override/controllers/front/” folder called “CmsController.php”, be sure to use this casing as most hosting platforms are case-sensitive.

Enter the following PHP code in this file, and save:

?php

class CmsController extends CmsControllerCore
{
    public function initContent()
    {
        parent::initContent();

        $this->context->smarty->assign(
            'HOOK_CMS_PRE_FOOTER', Hook::exec('displayCmsPreFooter')
        );
    }
}

Congrats, you just told your site that your new hook exists! This code gets called when a cms page is loaded and assigns the result from the hook call to a Smarty variable (HOOK_CMS_PRE_FOOTER) which we can use in our next step. 

PART 3 – Positioning the hook on the site, exactly where needed

Now that we have our new hook created in the database and getting called by our controller we can tell PrestaShop where to use it in the template. In this case we want the hook to be seen only on cms pages, therefore we need to open the CMS template file.

  • access your site’s FTP root;
  • open the cms.tpl file in “themes/themename/cms.tpl” where “themename” is the name of your theme.

 


First, we have to determine where the new code should be.
With CMS pages you have two options: either you put the hook before the contents, or after. I chose after.

Search the file for this code:

<div class="rte{if $content_only} content_only{/if}">
                  {$cms->content}
</div>

TIP: I’m using the default template so your code might be a little different, the important thing is finding “{$cms->content}“.

This code publishes the CMS contents of the CMS page. Therefore our hook will be placed immediately after, like this:

<div class="rte{if $content_only} content_only{/if}">
                  {$cms->content}
</div>
{if $HOOK_CMS_PRE_FOOTER}
              {if $cms->id == 3}
                        <div class="hook_cms_pre_footer">
                                            {$HOOK_CMS_PRE_FOOTER}
                          </div>
                  {/if}
{/if}

Our hook has some if statements in order to limit it’s functionality:

  • The first if statement basically checks if our hook variable has contents, therefore if any PrestaShop modules are using it. If it’s empty, nobody’s using it, so we won’t either. It’s better not to publish unused code!
  • The second if statement checks if the current CMS page is the one we want to publish the hook information in.

As I said earlier, I want my privacy policy to be seen only in my “Terms and Conditions” page, which has and ID of “3” in this case. You can find the id of your target CMS page in two ways:

  • Visit the page and check the first number seen in the address bar, near your page’s friendly url.

  • Go to PrestaShop’s backend > preferences > cms > checking the number near your target page

  • If you want the hook to work on all CMS pages, remove the second if statement.
  • If all if statements are true, the hook will be published and used!

Remember to:

  • Save the page with the new code;
  • Upload the newly coded page to your online server.

PART 4 – Inserting iubenda’s code snippet in PrestaShop’s backend

Let’s get our code from iubenda:

  • Access iubenda’s site and log in to your account;
  • click on your privacy policy;
  • access the “integration” tab and copy your code.

 

Oops, PrestaShop’s default editor doesn’t allow code.

I love modules’ way of saying “I really don’t care”: I found and downloaded free PrestaShop module “Content Box” (https://contentbox.org), it rocks!

  • Go to PrestaShop’s backend > modules > add new module > upload “contentbox.zip” file and upload.
  • Go to PrestaShop’s backend > modules > search “contentbox” module > install and procede.

Let’s configure the module, inserting our code. If the configure page didn’t open automatically:

  • Go to PrestaShop’s backend > modules > search “contentbox” module > configure.

A text editor appears.

  • Enter “source code” mode
  • paste the code snippet iubenda gave you, hit ok and save.

There you have it, your code is stored on the site and is ready to be used! Yay!

TIP: Be careful on multi-language sites: in the module’s configuration you can choose what to show on each different language, therefore, you need to paste the code on each language!

It might seem stupid or obvious to point this out, but while creating this method I wasted much time asking myself what part of the code was wrong, then I found out I was looking at my site in Italian whilst the modification was done on the English language 🙂

PART 5 – Targeting the hook with our module and displaying the privacy policy on the site

Ok, now we basically have PrestaShop that knows that we created a custom hook, we have a controller that declares it’s existence, the hook is positioned in our site, and we have a module ready to be seen by the world!

The coding is finished, now it’s backend easy-stuff!

  • Go to PrestaShop’s backend > modules > positions > click on the dropdown list “show all modules” and select “contentBox”

You’ll see that the module automatically displays in 2 positions: “displayFooter” and “displayHeader”. It isn’t associated to our personal hook!

  • Go to PrestaShop’s backend > modules > positions > Click on “Transplant a module”  (top right corner)

  • In the “module” dropdown list select “contentbox”, in the “hook into” dropdown list select our “displayCmsPreFooter (CMS Pre Footer)” hook
  • Save.

You’ll se that the content box module is now finally associated to our “displayCmsPreFooter” hook! Open your “Terms and Conditions” page and you’ll see the link right before the footer!

You’ll also notice that the link is also in the footer. I personally didn’t like my link there, so to hide it I just did this:

  • Go to PrestaShop’s backend > modules > positions > click on the dropdown list “show all modules” and select “contentBox”.
  • On the “displayFooter” tab click on the small arrow near the “edit” button and click “unhook”.

Check your site, you should now have the link only on the cms page!

 


Still have questions?

Visit our support forum Email us