[TomatoCart] – Apply a professional ratings bar for your bootstrap store

There is a professional ratings bar in the amazon store as follow:

Snip20150823_11

 

Figure 1. Ratings bar of amazon.com

I really like it. So, I have spent several hours to implement a similar ratings bar for TomatoCart bootstrap store.

Snip20150823_12

Figure2. Ratings bar for TomatoCart bootstrap store

Snip20150823_13

Figure3. Ratings bar for TomatoCart bootstrap store in mobile device

How to apply it for your bootstrap store?

Step 1. Download ratings.bar.css at https://www.dropbox.com/s/uwle2v7zdle180h/ratings.bar.css?dl=0

Put it into templates > bootstrap > css fold.

Step 2. Open templates > bootstrap > index.php file to edit.

Add following code before </head> tag:

<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/ratings.bar.css" />

Step 3. Open templates > bootstrap > content > products > info.php to edit.

Find following code:

  <div class="tab-pane" id="tabReviews">

Add following code after it:

<?php 
                $total_reviews = osC_Reviews::getTotal($osC_Product->getId());

                $rating = osC_Reviews::getRating($osC_Product->getId());
            ?>
            <div class='review-tag'>
                <div>
                     <span>
                         <?php echo osc_image(DIR_WS_IMAGES . 'stars_' . $rating . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $rating)); ?>
                     </span>
                     <strong><?=$total_reviews?> Reviews</strong>
                </div>
                <div>
                    <small><?=ceil($rating)?> out of 5 stars</small>
                </div>
            </div>

            <div class="review-star">
                <?php 
                    for($i = 5; $i > 0; $i--): 
                        $rating_percent = osC_Reviews::getRatingPercent($osC_Product->getId(), $i);

                ?>
                <div class="row star-bar">
                    <div class="span2"><label><?=$i?> star</label></div>
                    <div class="span8">
                        <?php if ($rating_percent == 0): ?>
                        <div class="ui small progressing" data-percent="0">
                        <?php else: ?>
                        <div class="ui small progressing warning" data-percent="<?php echo $rating_percent?>">
                        <?php endif; ?>
                              <div class="progressing-bar" style="transition-duration: 300ms; width: <?php echo $rating_percent?>%;">
                                    <div class="progressing-val"><?php echo $rating_percent?>%</div>
                              </div>
                        </div>
                    </div>
                </div>
                <?php 
                    endfor;
                ?>
            </div>

Step 4. Open includes/classes/reviews.php to edit.

Add following two functions into this file:

function getRating($products_id)
    {
        global $osC_Database;

        $Qrating = $osC_Database->query('select avg(reviews_rating) as rating from :table_reviews where products_id = :products_id and reviews_status = :status');
        $Qrating->bindTable(':table_reviews', TABLE_REVIEWS);
        $Qrating->bindInt(':products_id', $products_id);
        $Qrating->bindInt(':status', 1);
        $Qrating->execute();

        return $Qrating->valueInt('rating');
    }

    function getRatingPercent($products_id, $i) {
        global $osC_Database;

        $QratingCount = $osC_Database->query('select count(reviews_rating) as cnt from :table_reviews where products_id = :products_id and reviews_status=1');
        $QratingCount->bindTable(':table_reviews', TABLE_REVIEWS);
        $QratingCount->bindInt(':products_id', $products_id);
        $QratingCount->execute();

        $rating_count = $QratingCount->valueInt('cnt');

        $QratingCount->freeResult();

        $QratingStarCount = $osC_Database->query('select count(reviews_rating) as cnt from :table_reviews where products_id = :products_id and reviews_rating = :reviews_rating and reviews_status=1');
        $QratingStarCount->bindTable(':table_reviews', TABLE_REVIEWS);
        $QratingStarCount->bindInt(':products_id', $products_id);
        $QratingStarCount->bindInt(':reviews_rating', $i);
        $QratingStarCount->execute();

        $rating_star_count = $QratingStarCount->valueInt('cnt');

        if ($rating_count == 0) {
          return 0;
        }

        return round($rating_star_count / $rating_count * 100);
    }

In alternative way, you could also download this file at https://www.dropbox.com/s/no7wgmqf1b5y8u6/reviews.php?dl=0 to override the original one.

Final word

I have wrote an article about how to integrate an elegant reviews list into your product info page both for bootstrap and glass gray template.

Snip20150823_8

You could also combine it with this feature. It should be useful to enhance the user experience of your store.

Looking for quality TomatoCart hosting? Check out Arvixe Web Solutions.

Tags: , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *