Page 1 of 2

Removing AJAX from product tabs

Posted: Fri Mar 16, 2012 4:21 am
by countzer0
OC currently uses AJAX to load the content of the Reviews and Related Products tabs. This content cannot be indexed by search engines which is a distinct problem from an SEO point of view. Is it possible to replace the AJAX tab with straight HTML i.e. each tab has it's own <div> on the page and is shown/hidden by CSS?

Re: Removing AJAX from product tabs

Posted: Fri Mar 16, 2012 10:59 am
by MarketInSG
Possible & not possible.

Possible to replacing all with plain html, BUT your form to submit reviews would not work.

Re: Removing AJAX from product tabs

Posted: Fri Mar 16, 2012 9:53 pm
by Qphoria
Yes reviews are ajax loaded and won't be indexed assuming that is what you want.

To load the reviews into the DOM, you'll likely need to rewrite it a bit to merge the review callback to be triggered during the main page load and then merge the tpl into the product.tpl. It's not necessarily difficult but tedious and if you are not familiar with the code you may need to hire someone ( ;) ) to do it.

Re: Removing AJAX from product tabs

Posted: Sat Mar 17, 2012 5:44 am
by countzer0
Thanks Qphoria. It was actually pretty simple - like you said, just merging the review function code in /controller/product/product.php into the main product page function, and then pasting the code from /product/review.tpl into /product/product.tpl. I removed the pagination code as I want all the reviews in the HTML. The AJAX code is left untouched.

Re: Removing AJAX from product tabs

Posted: Sat Mar 17, 2012 8:27 am
by Qphoria
Great to hear

Re: Removing AJAX from product tabs

Posted: Tue Apr 10, 2012 7:21 am
by hashin
Hi, I was looking for this too. I was playing with the google webmaster tools and I realized that google was not able to index product reviews. In seo matter it is nice to have reviews being indexed by google because search bots will find fresh content when they try to re-index the page.

Anyway I'll try your solution "countzer0" but can you please be a little more specific? Maybe step by step explanation? Because I'm not good with php at all.

Thank you.

Re: Removing AJAX from product tabs

Posted: Tue Apr 10, 2012 5:27 pm
by countzer0
Hi Hashin

Here's the vqmod I used:

Code: Select all

<modification>

	<id>Make User Reviews Indexable</id>
	<version>1.0.0</version>
	<vqmver>2.1</vqmver>
	<author>countzer0</author>

	<file name="catalog/controller/product/product.php">
        <operation>
            <search position="before"><![CDATA[$this->data['tags'] = array();]]></search>
            <add><![CDATA[			$this->data['reviews'] = array();
			
			$review_total = $this->model_catalog_review->getTotalReviewsByProductId($this->request->get['product_id']);
				
			$results = $this->model_catalog_review->getReviewsByProductId($this->request->get['product_id'], 0, 20);
				
			foreach ($results as $result) {
				$this->data['reviews'][] = array(
					'author'     => $result['author'],
					'text'       => strip_tags($result['text']),
					'rating'     => (int)$result['rating'],
					'reviews'    => sprintf($this->language->get('text_reviews'), (int)$review_total),
					'date_added' => date($this->language->get('date_format_short'), strtotime($result['date_added']))
				);
			}	
]]></add>
        </operation>
	</file>
	<file name="catalog/view/theme/default/template/product/product.tpl">
        <operation>
            <search position="replace"><![CDATA[<div id="review"></div>]]></search>
            <add><![CDATA[    <div id="review">
		<?php if ($reviews) { ?>
			<?php foreach ($reviews as $review) { ?>
			<div class="content"><b><?php echo $review['author']; ?></b> | <img src="catalog/view/theme/default/image/stars-<?php echo $review['rating'] . '.png'; ?>" alt="<?php echo $review['reviews']; ?>" /><br />
			  <?php echo $review['date_added']; ?><br />
			  <br />
			  <?php echo $review['text']; ?></div>
			<?php } ?>
		<?php } else { ?>
			<div class="content"><?php echo $text_no_reviews; ?></div>
		<?php } ?>
    </div>
]]></add>
        </operation>
	</file>
	
</modification>
You will need to change the second file reference if you are using a customised theme.

This solution is a bit of a hack - it places the review text in the HTML while leaving the AJAX code untouched. In other words, the review text is pulled in twice, but this doesn't seem to affect the appearance of the page.

Re: Removing AJAX from product tabs

Posted: Tue Apr 10, 2012 5:42 pm
by hashin
Thank you for your help.

Re: Removing AJAX from product tabs

Posted: Fri Apr 20, 2012 10:49 pm
by stonehinged
Thanks for sharing countzer0. Have applied your vQmod but made some simple design changes leaving all code references intact. For some reason though when I go to the page in the browser my design changes are not shown but when I review source on the page, they are! Strange. Any ideas?

Re: Removing AJAX from product tabs

Posted: Fri Apr 20, 2012 10:54 pm
by countzer0
Have you changed this line:

Code: Select all

<file name="catalog/view/theme/default/template/product/product.tpl">
to refer to your customised template?

Re: Removing AJAX from product tabs

Posted: Fri Apr 20, 2012 11:11 pm
by stonehinged
Using the default OC template. I've just made changes to how the review components are displayed in your vQmod (i.e. the star graphic are shown first, the author is listed below the review, etc.). On the front-end site the design looks identical to your code, but when reviewing the source shows my changes. So strange.

Thanks for the quick reply.

Re: Removing AJAX from product tabs

Posted: Fri Apr 20, 2012 11:17 pm
by countzer0
Ah, you have to make the changes in the AJAX code too... That's what you're actually seeing on the page. The crawlers see the HTML.

Re: Removing AJAX from product tabs

Posted: Fri Apr 20, 2012 11:24 pm
by stonehinged
Sweet! Thanks for that tip!

So how does one do that exactly? And where? Is it a code addition, replacement? That looks a bit more challenging for my skill level :D

Re: Removing AJAX from product tabs

Posted: Fri Apr 20, 2012 11:33 pm
by countzer0
I think you'll have to make product/review.tpl match your changes in product.tpl.

Re: Removing AJAX from product tabs

Posted: Fri Apr 20, 2012 11:41 pm
by stonehinged
Ah! Thanks!

UPDATE: That did the trick! Thanks again mate!

Re: Removing AJAX from product tabs

Posted: Thu Jul 19, 2012 9:23 am
by storm-cloud
Just tried implementing this modification as I also agree that having fresh, unique content is beneficial to search rankings.

However, for some reason the review link just below the add to cart button now says "Array" instead of the number of reviews. The reviews tab seems to be working correctly (number of reviews shown correctly here) and the review is loaded into the HTML but I wonder what is causing this link to be labelled incorrectly?

Also, countzer0 mentioned that this mod is a bit of a "hack" and that the original AJAX code is left untouched. Is there a way to remove the AJAX code and still have this function correctly?

Re: Removing AJAX from product tabs

Posted: Thu Jul 19, 2012 4:56 pm
by countzer0
I also had the "Array" error but I can't remember what I did to fix it - the variable is incorrectly typed for some reason. Look for this line in product.tpl:

Code: Select all

<a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $reviews; ?></a>
Is it the same in your code?

Re: Removing AJAX from product tabs

Posted: Thu Jul 19, 2012 9:03 pm
by storm-cloud
countzer0 wrote:Is it the same in your code?
Yes, that is exactly how it appears in the product template file currently in use. Is there something that should be changed here?

Also, would you (or anyone else) have any further suggestions on how to eliminate Ajax completely (eliminating the need to pull in the review data twice)?

To be honest, I am a little surprised that this wasn't considered for the core code. User reviews are definitely beneficial to SEO (especially after the most recent algorithm update) and it is a shame that we have to implement a hack just to have this content indexed.

Re: Removing AJAX from product tabs

Posted: Thu Jul 19, 2012 10:51 pm
by countzer0
Ah, I found the change I made: I had mistakenly used $reviews as an array in product.php which was overwriting the text string $reviews containing the number of reviews. Here is the corrected vqmod:

Code: Select all

<modification>

	<id>Make User Reviews Indexable</id>
	<version>1.0.0</version>
	<vqmver>2.1</vqmver>
	<author>countzer0</author>

	<file name="catalog/controller/product/product.php">
        <operation>
            <search position="before"><![CDATA[$this->data['tags'] = array();]]></search>
            <add><![CDATA[			$this->data['reviews_array'] = array();
			
			$review_total = $this->model_catalog_review->getTotalReviewsByProductId($this->request->get['product_id']);
				
			$results = $this->model_catalog_review->getReviewsByProductId($this->request->get['product_id'], 0, 20);
				
			foreach ($results as $result) {
				$this->data['reviews_array'][] = array(
					'author'     => $result['author'],
					'text'       => strip_tags($result['text']),
					'rating'     => (int)$result['rating'],
					'reviews'    => sprintf($this->language->get('text_reviews'), (int)$review_total),
					'date_added' => date($this->language->get('date_format_short'), strtotime($result['date_added']))
				);
			}	
]]></add>
        </operation>
	</file>
	<file name="catalog/view/theme/default/template/product/product.tpl">
        <operation>
            <search position="replace"><![CDATA[<div id="review"></div>]]></search>
            <add><![CDATA[    <div id="review">
		<?php if ($reviews_array) { ?>
			<?php foreach ($reviews_array as $review) { ?>
			<div class="content"><b><?php echo $review['author']; ?></b> | <img src="catalog/view/theme/default/image/stars-<?php echo $review['rating'] . '.png'; ?>" alt="<?php echo $review['reviews']; ?>" /><br />
			  <?php echo $review['date_added']; ?><br />
			  <br />
			  <?php echo $review['text']; ?></div>
			<?php } ?>
		<?php } else { ?>
			<div class="content"></div>
		<?php } ?>
    </div>
]]></add>
        </operation>
	</file>
	
</modification>
WRT removing the AJAX code, I had a little look at it but since I am not familiar with AJAX, and the tab display code would have to be rewritten in HTML, I parked it. Sorry I can't help you there. Let me know if you find a solution.

Re: Removing AJAX from product tabs

Posted: Fri Jul 20, 2012 12:05 am
by storm-cloud
Yes, that seems to have done the trick! ;D

By the way, I noticed that the image alt tag for the star rating was referencing the text for the number of ratings (eg: 2 Reviews). I thought this was a little odd as alt text is meant to describe the image.

So I changed this...

Code: Select all

<img src="catalog/view/theme/default/image/stars-<?php echo $review['rating'] . '.png'; ?>" alt="<?php echo $review['reviews']; ?>" />
To...

Code: Select all

<img src="catalog/view/theme/default/image/stars-<?php echo $review['rating'] . '.png'; ?>" alt="Rating: <?php echo $review['rating']; ?>" />
Now the alt text is "Rating: 5". ;D

I might even attempt to modify the code in such a way to achieve valid rich snippets markup as outlined here: http://support.google.com/webmasters/bi ... wer=146645

It would be great to see the user review ratings appear as rich snippets in search results. Might be easier said than done though.