Show alert messages or errors using Growl plugin in PrestaShop 1.7

In this blog, We are going to learn how we can show alert messages or errors using Growl plugin in PrestaShop.

To achieve this, We need to register “actionFrontControllerSetMedia” hook to add the javascript plugin & CSS files on the front end.

$this->registerHook('actionFrontControllerSetMedia');

After this, We need to call the “addJqueryPlugin” function to add Growl plugin. CSS file you can directly call from the core js folder. Here is the file path below.

Path: ROOT_DIR/js/jquery/plugins/growl/jquery.growl.css

public function hookActionFrontControllerSetMedia()
{
  $this->context->controller->addJqueryPlugin('growl', null, false);
  $this->context->controller->registerStylesheet('growl-css', 'js/jquery/plugins/growl/jquery.growl.css');
}

After this, We need to create a javascript file to manage ajax base requests & responses. To show success & error messages we need to add the below function in javascript file.

function performYourAction(params) {
  $.ajax({
    type: "POST",
    url: PAGE_URL,
    dataType: "json",
    data: {
        ajax: true,
        action: 'callAjaxFunction',
        params: params
    },
    success: function (result) {
        if (result.hasError == false) {
            successMsg(result.msg);
        } else {
            errorMsg(result.msg);
        }
    },
  });
}

function successMsg(message) {
    $.growl.notice({ title: "", message: message });
}

Success Message:

Below function will show the error messages.

function errorMsg(message) {
    $.growl.error({ title: "", message: message });
}

Error Message:

That’s all about this blog. Hope it will help you.

If you are facing any issues or doubts in the above process, please feel free to contact us through the comment section.

Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.

For any doubt contact us at support@webkul.com