Back to Top

Display PrestaShop listing page in multiple columns

Updated 3 February 2022

In this blog, we are going to learn how to display the PrestaShop listing page in multiple columns. Sometimes we need to display the listing page along with some other sections just like the multishop page in the PrestaShop.

Display listing page in multiple columns in PrestaShop
Display listing page in multiple columns in PrestaShop

As we know that we can override the template of the PrestaShop in-build methods like “renderForm()” and “renderView()” in our module.

ie. Suppose our module name is “wkmulticolumn” and the listing controller name is “AdminMyListingsController” then we can override the template of “renderForm()” and “renderView()” methods in the below manner:

  • Override “renderForm()” by creating a “form.tpl” file in our module “wkmulticolumn/views/templates/admin/my_listings/form/form.tpl”
class AdminMyListingsController extends ModuleAdminController
{
    public function renderForm()
    {
        // Your code
        return parent::renderForm();
    }
}
  • Override “renderView()” by creating a “view.tpl” file in our module “wkmulticolumn/views/templates/admin/my_listings/view/view.tpl”
class AdminMyListingsController extends ModuleAdminController
{
    public function renderView()
    {
        // Your code
        return parent::renderView();
    }
}

In the same manner, we can also override the listing page as well. To override PrestaShop listing page, we need to create a “content.tpl” file in our module “wkmulticolumn/views/templates/admin/my_listings/content.tpl” and modify the content according to your need.

ie. Suppose we want to display the listing page in two columns, then “content.tpl” code will be like:

Searching for an experienced
Prestashop Company ?
Find out More
<div class="row">
    <div class="col-lg-4">
        {* Your code for the first column *}
    </div>    
    <div class="col-lg-8">
        {* PrestaShop listing content *}
        {$content}
    </div>    
</div>

Then the listing page will look like the below screenshot:

image-25
PrestaShop listing page in two columns

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 [email protected].

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home