1

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

1 Answer 1

0

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" />
1
  • That not answer the question. I have already remove tabs with phtml, the problem is with javascript and reviews. If I remove tab verification from javascript, reviews load at page load but I prefer a lazy load solution for performance reasons. Dec 26, 2019 at 11:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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