Magento Question posted in
The official documentation can be found here.

Magento 2 – How to have 2 separates phtml to handle products list and products grid?

I’m building a new website based on Magento 2. I’m still learning this CMS and I’m wondering one thing. Based on the webdesigner’s work I’ve too many differences between the grid layout of the product list and the list one.

For now, to style the product grid, I’ve duplicate and edit this file :
app/design/frontend/MYTHEME/default/Magento_Catalog/templates/product/list.phtml

But it handle both grid and list layout, of course :

<div class="products wrapper <?= /* @noEscape */ $viewMode ?> products-<?= /* @noEscape */ $viewMode ?>">

I need to move too many things for the list layout so I try to have 2 separate phtml, one for the list layout and one for the grid layout. Is it possible, for example defining things in app/design/frontend/MYTHEME/default/Magento_Catalog/layout/catalog_category_view.xml I guess ?

Thanks for your help.

Tags:

2

Answers


  1. 0

    In your phtml file:

    app/design/frontend/MYTHEME/default/Magento_Catalog/templates/product/list.phtml

    Why don’t you just do something like this:

    <?php if ($viewMode == 'grid') :?>
    // Grid layout
<?php else :?>
    // List layout
<?php endif; ?>
    Login or Signup to reply.
  2. 0

    If you want to separate , you will have find out the Block Class which called this template ( list.phtml ).

    There, you will see setTemplate function (some blocks will not have because its already in parent class).

    You will get viewMode there too, so you will have to set a condition like below:

    if ($viewMode == 'grid') : 
   $this->setTemplate = '...../grid.phtml';
else : 
   $this->setTemplate = '...../list.phtml';

    inside the setTemplate Function.

    I think you already know where and how to create grid phtml file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search