Magento – Magento 2: How to move Product page Review Section from tabs to Bottom of page

luma-thememagento2product-reviewtabs

I have referred this link i.e Product page Review Section from tabs to Bottom of page and followed the same. I also got the same result.

vendor\magento\theme-frontend-luma\Magento_Theme\layout\default.xml

I added below code : 

   <referenceBlock name="reviews.tab" remove="true" />
    <referenceContainer name="content">
        <container name="new_space" htmlTag="div" htmlClass="container" after="-">
            <block class="Magento\Review\Block\Product\View\ListView" name="product.info.product_additional_data" as="product_additional_data" template="product/view/list.phtml" />
        </container>
    </referenceContainer>

app\design\frontend\Test\review\etc\module.xml

    <?xml version="1.0"?>
          <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
             <module name="Test_review" setup_version="1.0.0">
                 <sequence>
                     <module name="Magento_Catalog"/>
                 </sequence>
            </module>
         </config>

app\design\frontend\Test\review\Magento_Catalog\layout\catalog_product_view.xml

     <?xml version="1.0"?>
        <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
         <body>       
              <move element="reviews.tab" destination="content" after="-"/>
          </body>
       </page>

Home page I am getting error 

   PHP Fatal error: Uncaught Error: Call to a member function getId() on null in /chroot/home/londonwa/londonwala.in/html/vendor/magento/module-review/Block/Product/View.php:131

Best Answer

Some additions for everyone who is also working with Magento 2.2.x. You can pretty much do exactly the same as in Magento 2.1.x by starting with:

In your custom theme add:

app\design\frontend\CustomVendor\theme-custom\Magento_Catalog\layout\catalog_product_view.xml

In this file we are going to tell Magento to move the reviews block as follows:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="reviews.tab" destination="content" after="product.info.details" />
    </body>
</page>

For Magento 2.2.x this command alone will create a 'bug' where the reviews of the product won't show up, but the form will. To fix this issue we are gonna copy the following file:

vendor\magento\module-review\view\frontend\web\js\process-reviews.js

And place it in your custom theme in the following path:

 app\design\frontend\CustomVendor\theme-custom\Magento_Review\web\js\process-reviews.js

In this file go to line and comment those out 40-43 and 44-49 it should look as follows:

return function (config) {
    // var reviewTab = $(config.reviewsTabSelector),
    //     requiredReviewTabRole = 'tab';

    // if (reviewTab.attr('role') === requiredReviewTabRole && reviewTab.hasClass('active')) {
        processReviews(config.productReviewUrl);
    // } else {
    //     reviewTab.one('beforeOpen', function () {
    //         processReviews(config.productReviewUrl);
    //     });
    // }

    $(function () {
        $('.product-info-main .reviews-actions a').click(function (event) {
            var acnchor;

            event.preventDefault();
            acnchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
            $('.product.data.items [data-role="content"]').each(function (index) { //eslint-disable-line
                if (this.id == 'reviews') { //eslint-disable-line eqeqeq
                    $('.product.data.items').tabs('activate', index);
                    $('html, body').animate({
                        scrollTop: $('#' + acnchor).offset().top - 50
                    }, 300);
                }
            });
        });
    });
};

We are telling Magento not to check if the reviews are in a tab but just render them either way.

Don't forget to recreate the symlinks in pub static by doing the following command in your CLI in the root of your Magento 2 store:

rm -rf pub/static/*

Always be careful with the rm -rf command because if you type the path incorrectly you might remove the entire directory!

That should do the trick!

Related Topic