Magento – Reviews not showing up on Product View (after upgrade from Magento 2.1.3 to 2.2.3)

magento2magento2.2.3productproduct-viewreview

After upgrading Magento from 2.1.3 to 2.2.3 my reviews are not showing up on the Frontend > Product View > Reviews Tab.

The following container is empty (I assume the reviews should be supposed to be there):

<div id="product-review-container" data-role="product-review"></div>

The reviews are approved in the backend and showing up there as usual
The review form is working as expected

Additional info:

/magento_2.1.3/vendor/magento/module-review/view/frontend/templates/review.phtml

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * @description:
 *
 */
?>
<?php
    $_items = $block->getReviewsCollection()->getItems();
    $format = $block->getDateFormat() ?: \IntlDateFormatter::SHORT;
?>
<?php if (count($_items)):?>
<div class="block review-list" id="customer-reviews">
    <div class="block-title">
        <strong><?php /* @escapeNotVerified */ echo __('Customer Reviews') ?></strong>
    </div>
    <div class="block-content">
        <div class="toolbar review-toolbar">
            <?php echo $block->getChildHtml('toolbar') ?>
        </div>
        <ol class="items review-items">
        <?php foreach ($_items as $_review):?>
            <li class="item review-item" itemscope itemprop="review" itemtype="http://schema.org/Review">
                <div class="review-title" itemprop="name"><?php echo $block->escapeHtml($_review->getTitle()) ?></div>
                <?php if (count($_review->getRatingVotes())): ?>
                    <div class="review-ratings">
                    <?php foreach ($_review->getRatingVotes() as $_vote): ?>
                    <div class="rating-summary item" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
                        <span class="label rating-label"><span><?php echo $block->escapeHtml($_vote->getRatingCode()) ?></span></span>
                        <div class="rating-result" title="<?php /* @escapeNotVerified */ echo $_vote->getPercent() ?>%">
                            <meta itemprop="worstRating" content = "1"/>
                            <meta itemprop="bestRating" content = "100"/>
                            <span style="width:<?php /* @escapeNotVerified */ echo $_vote->getPercent() ?>%">
                                <span itemprop="ratingValue"><?php /* @escapeNotVerified */ echo $_vote->getPercent() ?>%</span>
                            </span>
                        </div>
                    </div>
                    <?php endforeach; ?>
                    </div>
                <?php endif; ?>
                <div class="review-content" itemprop="description">
                    <?php echo nl2br($block->escapeHtml($_review->getDetail())) ?>
                </div>
                <div class="review-details">
                    <p class="review-author">
                        <span class="review-details-label"><?php /* @escapeNotVerified */ echo __('Review by')?></span>
                        <strong class="review-details-value" itemprop="author"><?php echo $block->escapeHtml($_review->getNickname()) ?></strong>
                    </p>
                    <p class="review-date">
                        <span class="review-details-label"><?php /* @escapeNotVerified */ echo __('Posted on') ?></span>
                        <time class="review-details-value" itemprop="datePublished" datetime="<?php /* @escapeNotVerified */ echo $block->formatDate($_review->getCreatedAt(), $format) ?>"><?php /* @escapeNotVerified */ echo $block->formatDate($_review->getCreatedAt(), $format) ?></time>
                    </p>
                </div>
            </li>
        <?php endforeach; ?>
        </ol>
        <div class="toolbar review-toolbar">
            <?php echo $block->getChildHtml('toolbar') ?>
        </div>
    </div>
</div>
<?php endif;?>

Best Answer

For me this was the issue.

Magento is not grabbing the proper alias name for the tabs. For example, if you look at this file vendor/magento/module-review/view/frontend/layout/catalog_product_view.xml you will see the name of the block is reviews.tab and the alias is properly defined as reviews.

Next, if you look at this file you will see it is depending on the element id of tab-label-reviews vendor/magento/module-review/view/frontend/templates/review.phtml. If you take a look at your tab source code you probably have tab-label-reviews.tab set for the id of the tab element which is wrong and why the reviews are not loading because the element doesn't exist.

The file that generates the tab element id's is located here: vendor/magento/module-catalog/view/frontend/templates/product/view/details.phtml (assuming you don't have a theme that overrides it like Ultimo which in that case is found here: app/design/frontend/Infortis/base/Infortis_Base/templates/product/view/details.phtml.

What I did to fix this quickly was to simply override the file into my theme and then strip the .tab text from the element id like so.

....
<div class="data item title"
data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo str_replace('.tab', '', $alias); ?>">
  <a class="data switch"
    tabindex="-1"
    data-toggle="trigger"
    href="#<?= /* @escapeNotVerified */ $alias ?>"
    id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
    <?= /* @escapeNotVerified */ $label ?>
  </a>
</div>
....

Notice the str_replace() function which removes the extra .tab text which fixes the element ID's incorrect format.

Please don't forget to mark as the correct answer if this was your case also.

Related Solutions

Magento – show product reviews and form in category view

The below should get you onto the right track. (expanded to explain in more detail, as per comments)

The default behavior for reviews is to do a form post onto the review controller. This form post gets the product id for the product that is to be reviewed.

you can see this variable fetched in the block code Mage_Review_Block_Form::getAction() - $productId = Mage::app()->getRequest()->getParam('id', false);

This is then used to get the product data (for the name), and to build the review form post url.

Since you want to display the form on the category page (per product), you cannot do this, and need another way to set the correct product(id). This is easy, by just passing in the product data, for the current product, via the .phtml using a line like this:

<?php echo $this->getChild('review_form')->setProduct($_product)->toHtml(); ?>

It is best to just pass the entire product object, since you can then use any of the product data in the review block.

To make it all work, you need to create a new block which extends the core review block class Mage_Review_Block_Form (not rewrite, just extend), and adjust functionality to pull the product id from the passed product object.

you want to extend any functions that get the productId to use your given productid (see later in phtml) This is needed to allow each form to be posting for each product, else they will all post for one product.

as an example the method Mage_Review_Block_Form::getAction() looks like this:

public function getAction()
    {
        $productId = Mage::app()->getRequest()->getParam('id', false);
        return Mage::getUrl('review/product/post', array('id' => $productId));
    }

and you will need to change that to pull the productId from $this->getProduct()->getId(); (again, see later in phtml adjustment how that is set)

Next you need to adjust the layouts to include the review form. thus in catalog.xml you need to get the review form layout into the catalog_category layout

You must set the block to your new block, and not the core review block, thus allowing the .phtml to call your methods, which change the behavior to get the product data from the different place.

place this xml block:

<block type="YOUR_MODULE_NAMESPACE/YOUR_BLOCK" name="product.review.form" as="review_form">
 <block type="page/html_wrapper" name="product.review.form.fields.before" as="form_fields_before" translate="label">
                            <label>Review Form Fields Before</label>
                            <action method="setMayBeInvisible"><value>1</value></action>
                            <action method="setElementClass"><value>rewards</value></action>
                        </block>
                    </block>

into the <catalog_category_default translate="label"> layout area, contained within <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml"> (you may also need to place it in the anchor category layout area)

This then sets the review form to be a child block of catalog/product_list

now, to make it display, you need to edit the list.phtml file (.../template/catalog/product/list.phtml) to include the review form and then pass it the current product

This is done simply by using

<?php echo $this->getChild('review_form')->setProduct($_product)->toHtml(); ?>

For completeness, the full layout xml section:

<catalog_category_default translate="label">
        <label>Catalog Category (Non-Anchor)</label>
        <reference name="left">
            <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
        </reference>
        <reference name="content">
            <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
                <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                    <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                        <block type="page/html_pager" name="product_list_toolbar_pager"/>
                        <!-- The following code shows how to set your own pager increments -->
                        <!--
                            <action method="setDefaultListPerPage"><limit>4</limit></action>
                            <action method="setDefaultGridPerPage"><limit>9</limit></action>
                            <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                            <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                            <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                            <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                            <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                        -->
                    </block>
                    <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                    <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
                    <block type="YOUR_MODULE_NAMESPACE/YOUR_BLOCK" name="product.review.form" as="review_form">
                        <block type="page/html_wrapper" name="product.review.form.fields.before" as="form_fields_before" translate="label">
                            <label>Review Form Fields Before</label>
                            <action method="setMayBeInvisible"><value>1</value></action>
                            <action method="setElementClass"><value>rewards</value></action>
                        </block>
                    </block>
                </block>
            </block>
        </reference>
    </catalog_category_default>

the above in action, ugly, as the design does not allow for a form, but I am sure your's will ;)

Screen-grab-of-this-in-action

Magento 1.9 – Display Reviews Under Tabs in Product View Page

In catalog.xml ,

In <catalog_product_view translate="label"> handler

add below

<reference name="review_tabbed">
   <block type="review/form" name="tab_review_form" as="review_form" template="review/form.phtml" />
</reference>

 <block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
        ......
        ......
     </block>

Add below

<action method="addTab" translate="title" module="review" ><alias>review_tabbed</alias><title>Reviews</title><block>review/product_view_list</block><template>review/product/view/list.phtml</template></action>

Best Answer

Related Solutions

Magento – show product reviews and form in category view

Magento 1.9 – Display Reviews Under Tabs in Product View Page

Related Topic