Magento 2 Add custom block to Product Detail Page, between product gallery and detail tab
-
14-04-2021 - |
解决方案
There are 2 options you can put your xml
file inside your theme or you can add file in your custom module. If you have theme then you don't need to create any custom module to add custom block only. But if you don't have any theme and you're using luma theme then you can create your own module and you can add files there.
1. Using theme
Create your XML file here on this location...
app/design/frontend/VendorName/ThemeName/Magento_Catalog/layout/catalog_product_view.xml
Content for this file is..
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="catalog.product.view.custom" template="Namespace_ModuleName::filename.phtml" before="product.info.details" />
</referenceContainer>
</body>
</page>
After that you have to create one template file here
app/design/frontend/VendorName/ThemeName/Magento_Catalog/templates/filename.phtml
Content
<div class="custom-block">
<?php echo "Custom Block"; ?>
</div>
<style type="text/css">
.custom-block {
clear: both;
margin-bottom: 30px;
}
</style>
2. Using module
Using your custom module you need to create above 2 files on below location, you can use above same content for both files.
app/code/Namespace/ModuleName/view/frontend/layout/catalog_product_view.xml
And
app/code/Namespace/ModuleName/view/frontend/templates/filename.phtml
After adding above file just run below command once
php bin/magento cache:flush
Output:
Hope this will help you!
其他提示
Using Module
catalog_product_view.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="product.info.media">
<block class="Magento\Framework\View\Element\Template"
name="custom_phtml"
template="Vendorename_Modulename::customfile.phtml"
cacheable="false"
after="-"
/>
</referenceContainer>
</body>
</page>
The best practise for this would be to add a new block reference into your catalog_product_view.xml file inside your custom theme.
To do this, you must first create your own theme (if you haven't already got one), or edit the existing files inside your theme.
To create a new theme, refer to Magento 2 documentation. It's just a few files that are required to get you started. https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-create.html
Inside your theme (vendor/theme/), Create the folder structure 'Magento_Catalog > layout > catalog_product_view.xml
Inside this file, add the following code:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block name="name" template="Magento_Catalog::filename.phtml" before="product.info.details" />
</referenceContainer>
</body>
</page>
Note that the 'name' of the block should be named appropriately regarding what it is and the template should be a path to the custom block contents. If the file is being referenced as the above, you must create a 'templates' folder inside the Magento_Catalog folder and then place it inside that. e.g. Magento_Catalog > templates > filename.phtml
Also notice that we are specifying before="product.info.details". this is saying that the new block should be placed before this container. You can find the container/block names of existing elements by going into the correct XML file inside: vendor/magento/module.. I'd strongly suggest looking into some Magento developer tools as many of these help you easily find container/block names, and lots of other helpful things, without the need to constantly look into the vendor folder.
- MgtCommerce Developer Toolbar - https://github.com/mgtcommerce/Mgt_Developertoolbar
- Advanced Template Hints -
https://github.com/ho-nl/magento2-Ho_Templatehints