[TomatoCart]Integrate an elegant reviews list into your bootstrap tempate

The default layout of customer reviews isn’t very effective and can impact the user experience within your bootstrap powered TomatoCart store. For example:

Snip20150823_10

Figure 1. Default layout of reviews in product info page of bootstrap template

In this article, I will teach you how to integrate an elegant layout for reviews list into your bootstrap store as follow:

Snip20150823_8

Figure 2. Elegant layout for reviews list in product info page

Snip20150823_9

Figure 3. Elegant reviews layout in mobile device

How to apply it for your bootstrap store?

Step 1. Open info.php under templates > bootstrap > content > products fold to edit.

Step 2. Find following code block:

<dl class="review">
                <?php
                    echo '<dt>' . osc_image(DIR_WS_IMAGES . 'stars_' . $Qreviews->valueInt('reviews_rating') . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $Qreviews->valueInt('reviews_rating'))).'    '.sprintf($osC_Language->get('reviewed_by'), '  <b>' . $Qreviews->valueProtected('customers_name')) . '</b>' . '  (' . $osC_Language->get('field_posted_on').' ' . osC_DateTime::getLong($Qreviews->value('date_added')) . ')' . '</dt>';
                     
                    echo '<dd>';
                    $ratings = osC_Reviews::getCustomersRatings($Qreviews->valueInt('reviews_id'));
                    
                    if (sizeof($ratings) > 0) {
                        echo '<table class="ratingsResult">';
                        foreach ($ratings as $rating) {
                            echo '<tr>
                                   <td class="name">' . $rating['name'] . '</td><td>' . osc_image(DIR_WS_IMAGES . 'stars_' . $rating['value'] . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $rating['value'])) . '</td>
                                  </tr>';
                        }
                        echo '</table>';
                    }
                    
                    echo '<p>' . $Qreviews->valueProtected('reviews_text') . '</p>';
                    echo '</dd>'; 
                ?>
            </dl>

Replace the code block with following code:

<div class="review">
                <div class="review-header clearfix">
                     <div class="avatar pull-left">
                        <label><?php echo substr(trim($Qreviews->valueProtected('customers_name')), 0, 1)?></label>
                    </div>

                    <div class="rating pull-left">
                        <div class="author">
                            <strong itemprop="author"><?php echo $Qreviews->valueProtected('customers_name'); ?></strong>
                        </div>

                        <div class="rating-stars">
                            <?php echo osc_image(DIR_WS_IMAGES . 'stars_' . $Qreviews->valueInt('reviews_rating') . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $Qreviews->valueInt('reviews_rating')));?>  
                        </div>     


                    </div>

                    <div class="pull-right review-date hidden-xs">
                        <small>2015/08/09</small>
                    </div>
                </div>

                <div class="review-content">
                  <p><?php echo $Qreviews->valueProtected('reviews_text');?></p>
                </div>
            </div>

Step 3. Open index.php under templates > bootstrap fold to edit.

Step 4. Add following css code before the </head> tag.

<style type="text/css">
      .review {
        padding: 15px 10px 0 10px;
        border-bottom: 1px solid #EEEEEE;
      }

      .review:last-of-type {
        border-bottom:0;
      }

      .review p {
        margin: 0;
        padding: 10px 0;
      }

      .review-header .avatar {
        float: left;
          position: relative;
          width: 40px;
          height: 40px;
          margin-right: 10px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          background: #569BD0;
      }

      .review-header .avatar label {
          background: 0 0!important;
          position: absolute;
          top: 8px;
          width: 100%;
          min-width: 100%;
          left: 1px;
          text-align: center;
          font-size: 18px;
          color: #fff;
      }

      .review-header .rating {
        float: left;
      }

      .review-header .rating .customer-name {
        font-weight:bold;
      }

      .review-header .rating .rating-stars {
        margin-top: 5px;
      }

      .review-header .review-date {
        float:right;
      }
    </style>

That’s it. Please try it for your bootstrap store. I will show you an elegant rating bar which look like the ratings bar in amazon.com in next article.

Snip20150823_11

 

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 *