How to Make RWD ‘Reviews’ Link Open ‘Reviews’ Tab

jquerytabs

By the default, the "x Review(s)" link, links to the review page. How do we make it link to the "Review" tab instead, using the default RWD template?

Example:

When you click the "x Review(s)" link, the "Reviews" tab is activated, and page scrolls down to it…

Other stuff:

app.js controls this via:

//Toggle on tab (li) click.
    if (hasTabs) {
        lis.on('click', function (e) {
            toggleClasses(jQuery(this), lis);
        });
        //Open the first tab.
        lis.eq(0).trigger('click');
    }

Best Answer

I've had the same issue and here's a solution.

Please note there will probably be a better way of doing this but I haven't had time to look into this much.

So, I believe your issue is that the "10 Reviews" link jumps down to the reviews tab, but the "Add you review" link doesn't. If you look in the summary/summary_short.phtml files, the links are exactly the same...

<a href="<?php echo $this->getReviewsUrl() ?>">

If you look into the method itself, you can see that it's just redirecting to the reviews page...

public function getReviewsUrl()
    {
        return Mage::getUrl('review/product/list', array(
           'id'        => $this->getProduct()->getId(),
           'category'  => $this->getProduct()->getCategoryId()
        ));
    }

I've had a quick look for some script that forces the "10 Reviews" link to jump down the page but can't find anything. Here's a work around...

First off, you'll need to add the review form into the reviews tab... (local.xml)

<catalog_product_view>
  <reference name="product.info">
    <block type="review/product_view_list" name="product.reviews.tab" as="reviews" template="review/product/view/list.phtml" after="product.spec">
      <action method="addToParentGroup"><group>detailed_info</group></action>
      <action method="setTitle" translate="value"><value>Reviews</value></action>
      <block type="review/form" 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>
        </block>
      </block>
    </block>
  </reference>
</catalog_product_view>

Next off, remove the href from the links and add a class which we'll pick up with script. Do this in the summary_short/summary.phtml files...

Change..

<a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>

To...

<a class="no-rating-link"><?php echo $this->__('Add Your Review') ?></a>

Then if you look in app.js, you'll see..

//Open the first accordion if desired.
        if (startOpen) {
            dts.eq(0).trigger('click');
        }

Underneath that, add the following script which will open the reviews tab and also make the page jump down to the reviews form...

// Added to force review links to jump down to review tab
        jQuery('.no-rating-link').click(function(){
            dts.eq(2).trigger('click');
            window.location.href = '#review-form';
        });

The reason i said this could be done better is because obviously, if you change the position of the reviews tab within the tabs, this will then open the wrong tab because the dts.eq(2) will always open the 3rd tab. Nevertheless, it's a workaround for you. Hope this helps!

Related Topic