Disable (product data items) tabs in Product page

Question

I want to disable tabs in product pages, i mean not display product data items (description, more information,Ratings) as tabs.

So I override

web/css/source/sections.less

And remove tabs and accordion mixins

Then I override

Magento_Catalog/templates/product/view/details.phtml

And i remove tabs like this

<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
    <?php $layout = $block->getLayout(); ?>
    <div class="product data items">
        <?php foreach ($detailedInfoGroup as $name):?>
            <?php
                $html = $layout->renderElement($name);
                if (!trim($html)) {
                    continue;
                }
                $alias = $layout->getElementAlias($name);
                $label = $block->getChildData($alias, 'title');
            ?>
            <div class="data item title" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
                <span href="#<?= /* @escapeNotVerified */ $alias ?>"
                   id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">

                    <?= /* @escapeNotVerified */ $label ?>
                </span>
            </div>
            <div class="data item content" aria-labelledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
                <?= /* @escapeNotVerified */ $html ?>
            </div>
        <?php endforeach;?>
    </div>
</div>

But the problem is that Reviews not displayed because Reviews loaded with javascript when you open reviews tab.

And if i remove tabs functionality that breaks this.

I think i have to overide

Magento_Rewiew/web/js/process-reviews.js

That part i think

function processReviews(url, fromPages) {
    $.ajax({
        url: url,
        cache: true,
        dataType: 'html',
        showLoader: false,
        loaderContext: $('.product.data.items')
    }).done(function (data) {
        $('#product-review-container').html(data).trigger('contentUpdated');
        $('[data-role="product-review"] .pages a').each(function (index, element) {
            $(element).click(function (event) { //eslint-disable-line max-nested-callbacks
                processReviews($(element).attr('href'), true);
                event.preventDefault();
            });
        });
    }).complete(function () {
        if (fromPages == true) { //eslint-disable-line eqeqeq
            $('html, body').animate({
                scrollTop: $('#reviews').offset().top - 50
            }, 300);
        }
    });
}

I will like to make it load the reviews when the user scroll to rewiews height like lazyload.

Please give me a direction on how to do that.

Thank you

Answer 1

For this you need to do two things: 1. Remove the tab from the product view page. 2. Add description, more information, Ratings all block in the page content.

For this you need to override catalog_product_view.xml as below:

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

<referenceContainer name="content">
     <container name="product.atributes.block" htmlTag="div" htmlClass="product-atributes-blocks" after="product.info.details">
            <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
                 <arguments>
                      <argument translate="true" name="title" xsi:type="string">More Information</argument>
                 </arguments>
             </block>
             <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description.full" template="product/view/attribute.phtml" group="detailed_info">
                  <arguments>
                          <argument name="at_call" xsi:type="string">getDescription</argument>
                          <argument name="at_code" xsi:type="string">description</argument>
                          <argument name="css_class" xsi:type="string">description</argument>
                          <argument name="at_label" xsi:type="string">Description</argument>
                          <argument name="title" translate="true" xsi:type="string">Details</argument>
                      </arguments>
                  </block>
                  <block class="Magento\Review\Block\Product\Review" name="reviews.block" as="reviews" template="Magento_Review::review.phtml" group="detailed_info" after="product.info.description.full">
                      <block class="Magento\Review\Block\Product\View\ListView" name="product.info.product_additional_data" as="product_additional_data" template="product/view/list.phtml"/>
                      <block class="Magento\Theme\Block\Html\Pager" name="product_review_list.toolbar"/>
                      <block class="Magento\Review\Block\Form" name="product.review.form" as="review_form">
                          <container name="product.review.form.fields.before" as="form_fields_before" label="Review Form Fields Before"/>
                      </block>
                  </block>
              </container>
</referenceContainer>
<referenceBlock name="reviews.tab" remove="true" />
<referenceBlock name="product.info.description" remove="true" />