Magento 2 - 如何有 2 个单独的 phtml 来处理产品列表和产品网格？

Question

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.

Answer 1

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; ?>

Answer 2

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.