# 🛂 Integrating a Module with PrestaShop Account

# Prerequisites

To complete this procedure, you need to have at your disposal a running PrestaShop store (see Preparing your environment) and a module that you can either create yourself (opens new window) or generate (opens new window).

Warning

Integrating your module will require using PHP (opens new window) for the backend. In the following procedure, we used JavaScript (opens new window) for the frontend, but you can also choose to use Vue.js 3 (opens new window) or React (opens new window), according to your preference.

Example module

An example module already integrating the components of the PrestaShop Integration Framework is available on Github (opens new window) to help you with development.

You are responsible to check that the module is installed

# Install PrestaShop Account

To use the ps_accounts integration, you must ensure the module is both installed and enabled.

To do this, you can use module-lib-mbo-installer (opens new window)

# Edit the <module_name>.php File

Note

For simplification, all PHP methods listed below are created in the <module_name>.php file. Feel free to reorganize the code structure in a different way to match your module evolution.

# Load PsAccountsPresenter

The presenter will give basic informations to the components through contextPsAccounts object accessible on the page.

// My_module.php

// /!\ TODO: Starting here you are responsible to check that the module is installed

/** @var Ps_accounts $module */
$modulePsAccounts = \Module::getModuleIdByName('ps_accounts');

/** @var \PrestaShop\Module\PsAccounts\Presenter\PsAccountsPresenter $presenter */
$presenter = $modulePsAccounts->getService(\PrestaShop\Module\PsAccounts\Presenter\PsAccountsPresenter::class);

Media::addJsDef([
    'contextPsAccounts' => $presenter->present((string) $this->name),
]);

return $this->display(__FILE__, 'views/templates/admin/app.tpl');

# Edit the Template File

Access the template file allowing you to render the configuration page for your module in the back office. If your module was created through the generator (opens new window), it has the following path: views/templates/admin/configure.tpl. Create it if necessary.

In the <module_name>.php file, make sure your template file's path matches the one defined in this line:

/** @var Ps_accounts $module */
$modulePsAccounts = \Module::getModuleIdByName('ps_accounts');

$this->context->smarty->assign('urlAccountsCdn', $modulePsAccounts->getParameter('ps_accounts.accounts_cdn_url'));

$this->context->smarty->assign('psAccountsInitParams'=> $modulePsAccounts->getService(\PrestaShop\Module\PsAccounts\Service\PsAccountsService::class)->getComponentInitParams());

// To be removed if you force the latest version of ps_accounts (possible with module-lib-mbo-installer)
if(version_compare($modulePsAccounts->version, "8", "<")) {
    $presenter = $modulePsAccounts->getService(\PrestaShop\Module\PsAccounts\Presenter\PsAccountsPresenter::class);

    Media::addJsDef([
        'contextPsAccounts' => $presenter->present((string) $this->name),
    ]);
}

$output = $this->context->smarty->fetch($this->local_path.'views/templates/admin/configure.tpl');

In the template file, add the following tag at the beginning:
```
<prestashop-accounts></prestashop-accounts>
```

In the template file, add the following script lines at the end:

<script src="{$urlAccountsCdn|escape:'htmlall':'UTF-8'}" rel=preload></script>

<script>
    /*********************
    * PrestaShop Account *
    * *******************/
    window?.psaccountsVue?.init({$psAccountsInitParams|json_encode});
</script>

# Check the status of PrestaShop Account

With version 8 of the ps_accounts module, the module's status is divided into three parts on the PHP :

The shop has an identity -> $accountsService->isShopIdentityCreated()
The shop is verified -> $accountsService->isShopIdentityVerified()
The shop has a point of contact -> $accountsService->isShopPointOfContactSet()

On the client side, a JavaScript function is available :

The window.psaccountsVue.isOnboardingCompleted()

This functions allow you to **check PrestaShop Account status **:

They will return true if it's ok, and false if not.

You can use either of these functions to prevent the merchant from proceeding with the module configuration until they have done the configuration of ps_accounts. While the PHP function provides stricter security, the JavaScript one allows you to customize the display.

# 💡 Example

For example, you can use the following code in the template file to gray out the configuration pane until the onboarding is done:

<script>
    /*********************
    * PrestaShop Account *
    * *******************/
    window?.psaccountsVue?.init();

    if(window.psaccountsVue.isOnboardingCompleted() != true)
    {
    	document.getElementById("module-config").style.opacity = "0.5";
    }
</script>

This code will create the following output:

Grayed configuration pane

# Test Your Module

To test if PrestaShop Account is loading successfully into your module:

Zip your module folder.
In the back office of your PrestaShop store, go to Modules > Module Catalog.
Click the Upload a module button and select your archive.
Click Configure in the pop-up window that displays.

➡️ Your module configuration page should contain the PrestaShop Account configuration panel:

← Preparing Your Environment for the PrestaShop Integration Framework Overview →