6

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
  • Try <module name="Test_Review" setup_version="1.0.0"> instead of <module name="Test_review" setup_version="1.0.0">. – Pawan Jul 25 '17 at 1:30
  • Also don't need to create module for that, using XML it can be done – Pawan Jul 25 '17 at 1:32
  • I tried without using module.xml file but still it is giving error – jassi Jul 25 '17 at 1:36
  • 1
    Have you any custom theme ? – Pawan Jul 25 '17 at 1:38
  • 1
    you can create catalog_product_view.xml under app/design/namespace/theme/Magento_catalog/layout with same content – Pawan Jul 25 '17 at 1:39
12

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-review.js

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

 app\design\frontend\CustomVendor\theme-custom\Magento_Review\web\js\process-review.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!

  • You are the man, magento2.2.x bug section saved me hours – Ramtin Gh Apr 30 '18 at 17:21
  • JS file overriding isn't working. – Yogesh Agarwal May 31 '18 at 12:12
  • have you recreated the symlinks in the pub static directory? – Pascal Wientjes Jun 18 '18 at 8:04
  • Thanks @pascalW – Pradeep Thakur Apr 12 at 8:39
  • @PascalWientjes, I want to move the review tab in product page but it's not working as expected. Could you please look into this magento.stackexchange.com/questions/281376/… and help me? – Siva Jul 10 at 12:45
4

You only need to create catalog_product_view.xml and move reviews.tab block after product.info.details block

If you have a custom theme, create catalog_product_view.xml at

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

If you have a custom module, create catalog_product_view.xml at

app/code/Vendor/Module/view/frontend/layout/catalog_product_view.xml

Now add this code in 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="product.info.details" />
    </body>
</page>

Now flush cache

  • I tried but layout file is not called only. catalog_product_view.xml file is not being called. No effect. Tab remains there. I also want to modify list.phtml file also. – jassi Jul 26 '17 at 1:07
  • I tried same in my setup it's working fine. Please make sure file path is correct and flush cache. – Prince Patel Jul 26 '17 at 3:17
  • 1
    This is not working in 2.2.2 – Wasiq Shahrukh Jan 12 '18 at 11:40
3

After moved reviews from tab

Magento_Review/web/js/process-reviews.js

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

        event.preventDefault();
        anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');

         $('html, body').animate({
                    scrollTop: $('#' + anchor).offset().top - 50
                }, 300);
        //comment out default code
       /* $('.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: $('#' + anchor).offset().top - 50
                }, 300);
            }
        });*/
    });
});
0

why edit magento core file vendor\magento\theme-frontend-luma\Magento_Theme\layout\default.xml , if you want edit code luma theme, create a new theme(use parenet thme as a luma) and add your content. Also no need to add this content for this process.

Create a Custom theme.

Then Create 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>

Clear the cache and Test it, its works for me.

EDIT:

Are mentioned for local you used luma theme, if you want to edit core luma theme to move review to bottom of the page.

try below code:

Go to this file <magento2-root>/vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml Add below line to this file.

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

Clear the cache and try it.

But, Core File Edit is not a right way, please create a custom theme and apply this change.

  • for time being in local I have used luma theme. In staging I will do it it newly created theme. – jassi Jul 25 '17 at 16:00
  • catalog_product_view.xml file is not being called. No effect. Tab remains there. I also want to modify list.phtml file also. – jassi Jul 26 '17 at 1:09
  • @jassi i updated my answer.let me know if you have any error. – Rajkumar .E Jul 26 '17 at 5:28
  • When use below code than review form moved but review lists not showing – himansu Oct 28 '18 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.