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
