Load custom product detail page instead of default in Magento 2

magento.stackexchange https://magento.stackexchange.com/questions/242319

  •  26-01-2021
  •  | 
  •  

Question

I am trying to remove default product detail page content, can i load custom phtml file for product detail page along with the image?

I need to remove all the default blocks of product detail page and show only my template content.

Is that can be done? Because i need to custom code in that template file to interact with external api with the product id.

How this can be achieved? Please anyone suggest me.

Was it helpful?

Solution

There is no need of module, You just need to create a catalog_product_view.xml at:

app/design/frontend/[Package]/[theme]/Magento_Catalog/layout/catalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Catalog\Block\Product\View" name="custom.product.view" template="Magento_Catalog::product/customview.phtml" before="-"/>
    </referenceContainer>
    <referenceContainer name="product.info.main" remove="true"></referenceContainer>
    <referenceContainer name="product.info.media" remove="true"></referenceContainer>
    <referenceContainer name="product.info.details" remove="true"></referenceContainer>
    <referenceBlock name="page.main.title" remove="true" />
</body>
</page>

Create a customview.phtml at:

app/design/frontend/[Package]/[theme]/Magento_Catalog/templates/product/customview.phtml

<?php $product = $block->getProduct(); ?>
<?php echo $product->getName();?> <!-- whatever you want -->

Result will be: enter image description here

OTHER TIPS

This is to just give an idea, please change the code accordingly as the code is neither complete or verified.

Setup a new magento 2 extension.

Create catalog_product_view.xml on the following path

app/code/{YourVendor}/{YourExtension}/view/frontend/layout/catalog_product_view.xml

with something like

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="{YourVendor}\{YourModule}\Block\Product\View" name="{vendor}.{module}.product.view" template="product/view.phtml" before="-"/>
        <referenceContainer name="product.info.main" remove="true"></referenceContainer>
    </referenceContainer>
</body>

Now Create a Block file View.php on path

app/code/{YourVendor}/{YourModule}/Block/Product/View.php

Extend magento's base block class for product view, something like

namespace {YourVendor}\{YourModule}\Block\Product;
class View extends \Magento\Catalog\Block\Product\View {
    // DEFINE FUNCTIONS TO SUIT YOUR REQUIREMENTS OR OVERRIDE FUNCTIONS FROM VIEW CLASS
}

Also create the template file view.phtml on path

app/code/{YourVendor}/{YourExtension}/view/frontend/templates/product/view.phtml

You can use the functions you defined in the View Block class

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top