Magento 2 – Product List PHTML File for Each Page

frontendmagento2PHPproduct-list

I want to change the frontend of product list page like in picture below. What file should i change? The product list i mean is each product list in each home page and category page.

Product List :
product list

Best Answer

So a quick answer on this :

You can find the list.phtml in catalog_category_view.xml

under the line of 

<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">

If you want to change default logics behind the class you can extend Magento\Catalog\Block\Product\ListProduct and use that in your own Block that replaces this one.

If you just want to change html things you can just replace Magento_Catalog::product/list.phtml

In your theme copy the file under Vendor/Theme/Magento_Catalog/templates/product/list.phtml

and ajust it how you would like.

If you want to replace it by Module you need to have a view/frontend folder withing your module directory and adjust the xml by using referenceBlocks :

Vendor/Module/view/frontend/layout/catalog_category_view.xml

with the code :

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="category.products.list" template="Vendor_module::product/list.phtml">
        </referenceBlock>
    </body>
</page>

and then have a 

Vendor/Module/view/frontend/templates/product/list.phtml

copy/paste the Magento list.phtml there.

Notice how in the list.phtml it sometimes calls for ChildBlocks . Childblocks are blocks that are defined within a level 0 block (so container->block->childblocks). These are not outputted unless you call them in your phtml fille by using the ->getChildBlock() function.

If you want to adjust the those you will need to do the same thing for 

            <container name="category.product.list.additional" as="additional" />
            <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
                <block class="Magento\Framework\View\Element\Template" as="default"/>
            </block>
            <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
                <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                       name="category.product.addto.compare" as="compare"
                       template="Magento_Catalog::product/list/addto/compare.phtml"/>
            </block>
            <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
                <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
            </block>
            <action method="setToolbarBlockName">
                <argument name="name" xsi:type="string">product_list_toolbar</argument>
            </action>

For example :

Magento calls for '$block->getChildBlock('addto'))->getChildHtml('compare')'

You can find this in the file Magento_Catalog::product/list/addto/compare.phtml

More information

If you are new to this its a lot of information to take in. I suggest you look at the following info page :

http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/layouts/xml-manage.html

Related Topic