Corrections to review links

We are on product details page -- integrating the product review system!

My main problem here was, that all three links right under the product name link to the same page (Product Reviews).
Only the first (the stars) should link to the "Product Reviews" page, because it’s a summary.
The other two, "number of reviews" and "Add your Review" should link directly to their corresponding item tabs, because the user wants to see the reviews or add an own review.
Another demand was to show these links on the "Product Reviews" page.

I’m starting with the last task (PART:1):

The "Product Reviews" page loads this core template with only one link from:
\app\design\frontend\base\defaulttemplatereview\ product\view\count.phtml

Code:

<?php if (!empty($count)):?>
    <a href="#customer-reviews" class="nobr"><?php echo $this->__('%s Review(s)', $count) ?></a>
<?php endif;?>

Copy this file to:
\app\design\frontend\default\jm_summertemplatere view\product\view
Now we override the base template, insert the following code:

Code:

<?php if (!empty($count)):?>
    <!--<a href="#customer-reviews" class="nobr"><?php echo $this->__('%s Review(s)', $count) ?></a>-->
	<div class="ratings">
	<p class="rating-links">
            <a href="<?php echo $this->getReviewsUrl() ?>#customer-reviews"><?php echo $this->__('%d',$count)  ?>
             <?php if($count > 1): ?>    
				<?php echo $this->__('Reviews'); ?>
			 <?php else: ?>
				<?php echo $this->__('Review'); ?>
             <?php endif ?>
            </a>
            <span class="separator">|&nbsp;&nbsp;&nbsp;</span>
            <a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>
        </p>
	</div>
<?php endif;?>

I’m appending the magento base anchors "#customer-reviews" and "#review-form" as hash.
The differentiation about $count is only for translation purposes (plural).
Now we got two links on the "Product Reviews" page. Next is (PART:2).

5 answers

Profile photo of Sven Lessmann -30.00 $tone September 18, 2014
Public

I changed the code in:
app\design\frontend\Default\jm_summertemplate\Rev iew\helper\summary.phtml

This gets loaded in product details view.

Code:

<?php if ($this->getReviewsCount()): ?>
  <div class="ratings">
    <?php if ($this->getRatingSummary()):?>
        <div class="rating-box">
            <a href="<?php echo $this->getReviewsUrl() ?>" class="rating" style="width:<?php echo $this->getRatingSummary() ?>%"></a>
        </div>
    <?php endif;?>
    <p class="rating-links">
        <a href="<?php echo $this->getReviewsUrl() ?>#customer-reviews"><?php echo $this->__('%d', $this->getReviewsCount()) ?>
		 <?php if($this->getReviewsCount() > 1): ?>    
				<?php echo $this->__('Reviews'); ?>
			 <?php else: ?>
				<?php echo $this->__('Review'); ?>
             <?php endif ?>
		</a>
		<span class="separator">|&nbsp;&nbsp;&nbsp;</span>
        <a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>
    </p>
  </div>
<?php elseif ($this->getDisplayIfEmpty()): ?>
  <div class="ratings">
    <a href="<?php echo $this->getReviewsUrl() ?>" class="rating-box"><div class="rating"></div></a>
    <p class="rating-links">
        <a href="<?php echo $this->getReviewsUrl() ?>#customer-reviews"><?php echo $this->__('0 Review') ?></a>
		<span class="separator">|&nbsp;&nbsp;&nbsp;</span>
        <a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>
        <!--<a href="<?php echo $this->getReviewsUrl() ?>#review-form"><i class="fa fa-pencil"></i> <?php echo $this->__('Add Your Review') ?></a>-->
    </p>
  </div>
<?php endif; ?>
#1
Profile photo of Seoki Lee 1510.00 $tone September 18, 2014
Public

To get different links for each link review, you can edit files:

1. app\design\frontend\default\jm_summertemplaterev iew\helper\summary.phtml, at line 34 replace this rule:

Code:

<p class="rating-links">
        <a href="<?php echo $this->getReviewsUrl() ?>"><?php echo $this->__('%d Reviews', $this->getReviewsCount()) ?></a>
        <a href="<?php echo $this->getReviewsUrl() ?>"><?php echo $this->__('Add Your Review') ?></a>
    </p>

With:

Code:

<p class="rating-links">
        <a class="link-review" href="<?php echo $this->getReviewsUrl() ?>#customer-reviews"><?php echo $this->__('%d Reviews', $this->getReviewsCount()) ?></a>
        <a class="link-formrv" href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>
    </p>

2. \app\design\frontend\default\jm_summertemplate\ca talog\product\view.phtml:
At line 204, replace this rule:

Code:

<?php if($product_reviews = $this->getChildHtml('product_reviews')): ?>
	<li><a href="#ja-tabitem-reviews"><?php echo $this->__('Reviews') ?></a></li>
<?php endif; ?>    
<?php if($review_form = $this->getChildHtml('review_form')): ?>
	<li><a href="#ja-tabitem-reviewform"><?php echo $this->__('Write Your Own Review') ?></a></li>
<?php endif; ?>

With:

Code:

<?php if($product_reviews = $this->getChildHtml('product_reviews')): ?>
	<li><a class="product_reviews" href="#ja-tabitem-reviews"><?php echo $this->__('Reviews') ?></a></li>
<?php endif; ?>    
<?php if($review_form = $this->getChildHtml('review_form')): ?>
	<li><a class="review_form" href="#ja-tabitem-reviewform"><?php echo $this->__('Write Your Own Review') ?></a></li>
<?php endif; ?>

At line 38, replace this rule:

Code:

<script type="text/javascript">
    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
    if( jQuery ){
	    jQuery( "#ja-tab-products" ).ready( function() {
	    	jQuery( "#ja-tab-products" ).jaContentTabs();							  
	    } );
    }
    jQuery(document).ready(function() {
        urllocation =  window.location;

        if(urllocation.toString().indexOf("#review-form") > 0){
           jQuery("ul.ja-tab-navigator").find("a|[href='#ja-tabitem-reviews']").trigger("click");
           window.location = "#ja-tabitem-reviews";
        }

        jQuery(".price-from .price-label").replaceWith( "<span class=\"price-label\">From:</span>" );
    });
</script>

With:

Code:

<script type="text/javascript">
    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
    if( jQuery ){
	    jQuery( "#ja-tab-products" ).ready( function() {
	    	jQuery( "#ja-tab-products" ).jaContentTabs();							  
	    } );
    }
    jQuery(document).ready(function() {
        urllocation =  window.location;
		
		if(urllocation.toString().indexOf("#customer-reviews") > 0){
		   jQuery("#ja-tab-products ul.ja-tab-navigator a.product_reviews").trigger("click");
		   window.location = "#ja-tabitem-reviews";
		}

        if(urllocation.toString().indexOf("#review-form") > 0){
           jQuery("#ja-tab-products ul.ja-tab-navigator a.review_form").trigger("click");
           window.location = "#ja-tabitem-reviewform";
        }

        jQuery(".price-from .price-label").replaceWith( "<span class=\"price-label\">From:</span>" );
    });
</script>
#2
Profile photo of Sven Lessmann -30.00 $tone September 18, 2014
Public

I change the jquery script in product details view:
app\design\frontend\default\jm_summertemplate\cat alog\product\view.phtml

ATTENTION: Make a backup, before you mess up!

Insert the following code below line 46 "urllocation = window.location;"
Overriding until "jQuery(".price-from .price-label").replaceWith…"

Code:

                if(urllocation.toString().indexOf("#review-form") > 0){
			setTimeout(function(){
		        jQuery("html, body").animate({scrollTop: jQuery("ul.ja-tab-navigator").offset().top -100} , 1000);
			jQuery("ul.ja-tab-navigator").find("a[href|='#ja-tabitem-reviewform']").trigger("click");}, 500);
                        //window.location = "#ja-tabitem-reviewform";
		        }
		if(urllocation.toString().indexOf("#customer-reviews") > 0){
			setTimeout(function(){
			jQuery("html, body").animate({scrollTop: jQuery("ul.ja-tab-navigator").offset().top -100} , 1000);
			jQuery("ul.ja-tab-navigator").find("a[href|='#ja-tabitem-reviews']").trigger("click");}, 500);
		        //window.location = "#ja-tabitem-reviews";
		        }
   		jQuery('a[href^="#review-form"]').click(function(){
			setTimeout(function(){
			jQuery("html, body").animate({scrollTop: jQuery("ul.ja-tab-navigator").offset().top -100} , 1000);
			jQuery("ul.ja-tab-navigator").find("a[href|='#ja-tabitem-reviewform']").trigger("click");}, 500);
			window.location = "#jm-tabitem-reviewform";
			return false; //disables browser anchor jump behavior
			});
		jQuery('a[href^="#customer-reviews"]').click(function(){
			setTimeout(function(){
			jQuery("html, body").animate({scrollTop: jQuery("ul.ja-tab-navigator").offset().top -100} , 1000);
			jQuery("ul.ja-tab-navigator").find("a[href|='#ja-tabitem-reviews']").trigger("click");}, 500);
			window.location = "#jm-tabitem-reviews";
			return false; //disables browser anchor jump behavior
			});

Now we have working links with a scroll animation to our tab views!
The first two code snippets catch up default browser behaviour -- loading review page.
The last two override default click events.

Greetings

#3
Profile photo of Sven Lessmann -30.00 $tone September 18, 2014
Public

Thank you. You are fast! Hear me out, look PART:2 and PART:3.
Maybe you can help me with the scrolling while review page loading.
The browser scrolls down and then up, it should only scroll down!
The click events only scroll down if the review page is loaded.

#4
Profile photo of Seoki Lee 1510.00 $tone September 19, 2014
Public

In the part 3 you can use this rule:

Code:

if(urllocation.toString().indexOf("#customer-reviews") > 0){
   jQuery("#ja-tab-products ul.ja-tab-navigator a[href|='#ja-tabitem-reviews']").trigger("click");
   window.location = "#ja-tabitem-reviews";
}

if(urllocation.toString().indexOf("#review-form") > 0){
   jQuery("#ja-tab-products ul.ja-tab-navigator a[href|='#ja-tabitem-reviewform']").trigger("click");
   window.location = "#ja-tabitem-reviewform";
}

jQuery("a[href|='#customer-reviews']").click(function(){
   jQuery("#ja-tab-products ul.ja-tab-navigator a[href|='#ja-tabitem-reviews']").trigger("click");
   window.location = "#ja-tabitem-reviews";
});

jQuery("a[href|='#review-form']").click(function(){
   jQuery("#ja-tab-products ul.ja-tab-navigator a[href|='#ja-tabitem-reviewform']").trigger("click");
   window.location = "#ja-tabitem-reviewform";
});
#5

Please login or Register to Submit Answer

Written By

Comments