Toggle status through AJAX in render list in PrestaShop

In this blog, we are going to learn how to toggle the status of a particular record in the render list through AJAX (without reloading the list page) in PrestaShop.

In PrestaShop, when we toggle the status of a particular record from the admin list view, PrestaShop reloads the whole page which is very annoying sometimes.

Suppose you have a table ‘ps_test_user’ with 5 columns id_user, name, mobile, active and date_add.

For creating list columns in the back office, we define the ‘fields_list’ variable with the name of columns and its type in the admin controller’s class constructor:

ie.

$this->fields_list = array(
    'id_user' => array(
        'title' => $this->l('ID'),
        'align' => 'text-center',
        'class' => 'fixed-width-xs'
    ),
    'name' => array(
        'title' => $this->l('Name'),
    ),
    'mobile' => array(
        'title' => $this->l('Phone'),
    ),
    'active' => array(
        'title' => $this->l('Status'),
        'active' => 'status',
        'align' => 'center',
        'type' => 'bool',
        'orderby' => false,
    ),
    'date_add' => array(
        'title' => $this->l('Date'),
        'align' => 'text-left',
        'type' => 'datetime',
        'class' => 'fixed-width-lg',
    ),
);

To prevent the reloading of the list page when changing the status of a record, we have to modify the ‘active’ column definition:

• Change ‘active’ key value from ‘status’ to ‘toggleActive’ (you can write any valid method name)
• Added ‘ajax’ key with value ‘true’

ie.

'active' => array(
    'title' => $this->l('Status'),
<strong>    'active' => 'toggleActive',</strong>
    'align' => 'center',
    'type' => 'bool',
    'orderby' => false,
    <strong>'ajax' => true,</strong>
),

Now we need to create a public method in the same controller and name it in ‘ajaxProcess<ActiveKeyValue><TableName>’ format:

Where:

• ActiveKeyValue: active value as defined in the active column definition (ie. ‘toggleActive’)
• TableName: Name of the table without prefix in Camel Case format (table name is ‘test_user’ then it should be ‘TestUser’)

So the method name will be ‘ajaxProcessToggleActiveTestUser()’.

Write the code to toggle the status of the user and echo the JSON response in the below format:

{
    "success": true,
    "text": "You message"
}

public function ajaxProcessToggleActiveTestUser()
{
    $idUser = (int)Tools::getValue('id_user');
    $objUser = new TestUser((int)$idUser);
    $objUser->active = !$objUser->active;
    if ($objUser->save()) {
        die(Tools::jsonEncode(array(
            'success' => 1,
            'text' => $this->l('Status updated successfully!')
        )));
    } else {
        die(Tools::jsonEncode(array(
            'success' => 0,
            'text' => $this->l('Something went wrong!')
        )));
    }
}

Note:

If the response comes from Symfony controller then data has ‘status’ and ‘message’ properties otherwise if the response comes from legacy controller then data has ‘success’ and ‘text’ properties.

That’s all about this blog.

If any issue or doubt please feel free to mention it in the comment section.

I would be happy to help.

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

For any doubt contact us at support@webkul.com.