Reading list Switch to dark mode

    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