In the tomatocart bootstrap template, your customers could sort the products by:

• product name in a ascend sequence.
• product name in a descend sequence.
• product price in a ascend sequence.
• product price in a descend sequence.

I think this sort order functionality has following problems from a customer of pointer view:

1. The product name sort is redundant because there isn’t any customer will really use this option to sort the products.
2. The Price(ASC), Price(DESC) text is not good. The good text should be Price low to high and Price high to low. It’s more intuitive for the customers.
3. As a new customer for your store, i may wish to find the popular products from a product listing. There isn’t such useful sort option.
4. As a old customer for your store, i may wish to find the newest products from a product listing. There isn’t such useful sort option.
5.  Face a lot of products, i don’t know which one is best suitable for me. In addition, i have no time to check the products page by page. It would be better to sort the products randomly. So, i could pick one randomly.

In this article, i will share your a new sort by dropdown which including following sort options:

• Popular
• Newest
• Price low to high
• Price high to low
• Random

It will looks like:

Add new language definitions

First of all, we have to create some new language definitions for each new sort option.

Step1. Please go to admin panel > Definitions > Languages.

Step 2. Click edit button to update language definitions.

Step 3. Click the general group to add the new language definition for sort options.

• Definition key: sort_by_popular; Definition value: Popular.
• Definition key: sort_by_newest; Definition value: Newest.
• Definition key: sort_by_price_asc; Definition value: Price low to high.
• Definition key: sort_by_price_desc; Definition value: Price high to low.
• Definition key: sort_by_random; Definition value: Random.

If there are multiple languages using in your store, you just need to add above definitions for each language.

Update sort by dropdown menu

Now that the new definitions are added into your store translation. Let’s show the new sort options in the product listing page of bootstrap template.

Step1. Open templates > bootstrap > helper.php with your favourite text editor.

Step2. Find following code snippet:

function get_products_listing_sort() {
    global $osC_Language;
    
    return array(array('id' => 'name', 'text' => $osC_Language->get('product') . ' (ASC)'), 
                 array('id' => 'name|d', 'text' => $osC_Language->get('product') . ' (DESC)'), 
                 array('id' => 'price', 'text' => $osC_Language->get('listing_price_heading') . ' (ASC)'), 
                 array('id' => 'price|d', 'text' => $osC_Language->get('listing_price_heading') . ' (DESC)'));
}

Replace it with:

function get_products_listing_sort() {
    global $osC_Language;

    return array(array('id' => 'popular', 'text' => $osC_Language->get('sort_by_popular')),
                 array('id' => 'newest', 'text' => $osC_Language->get('sort_by_newest')),
                 array('id' => 'price', 'text' => $osC_Language->get('sort_by_price_asc')),
                 array('id' => 'price|d', 'text' => $osC_Language->get('sort_by_price_desc')),
                 array('id' => 'random', 'text' => $osC_Language->get('sort_by_random'))
           );
}

Update products class to enable the new sort by options

The final step is to update the products class to enable the new sort options.

Step 1. Open includes > classes > products with your favourite text editor.

Step2. Find following code snippet:

function setSortBy($field, $direction = '+') {
      switch ($field) {
        case 'sku':
          $this->_sort_by = 'p.products_sku';
          break;
        case 'manufacturer':
          $this->_sort_by = 'm.manufacturers_name';
          break;
        case 'quantity':
          $this->_sort_by = 'p.products_quantity';
          break;
        case 'weight':
          $this->_sort_by = 'p.products_weight';
          break;
        case 'price':
          $this->_sort_by = 'final_price';
          break;
      }

      $this->_sort_by_direction = ($direction == '-') ? '-' : '+';
    }

Replace it with:

function setSortBy($field, $direction = '+') {
      switch ($field) {
        case 'popular':
          $this->_sort_by = 'p.products_ordered';
          $direction = '-';
          break;
        case 'newest':
          $this->_sort_by = 'p.products_date_added';
          $direction = '-';
          break;
        case 'sku':
          $this->_sort_by = 'p.products_sku';
          break;
        case 'manufacturer':
          $this->_sort_by = 'm.manufacturers_name';
          break;
        case 'quantity':
          $this->_sort_by = 'p.products_quantity';
          break;
        case 'weight':
          $this->_sort_by = 'p.products_weight';
          break;
        case 'price':
          $this->_sort_by = 'final_price';
          break;
        case 'random':
          $this->_sort_by = 'rand()';
          break;
      }

      $this->_sort_by_direction = ($direction == '-') ? '-' : '+';
    }

Step 3. Find following code snippet:

if (isset($this->_sort_by)) {
        $Qlisting->appendQuery(':order_by :order_by_direction, pd.products_name');
        $Qlisting->bindRaw(':order_by', $this->_sort_by);
        $Qlisting->bindRaw(':order_by_direction', (($this->_sort_by_direction == '-') ? 'desc' : ''));
      } else {
        $Qlisting->appendQuery('pd.products_name :order_by_direction');
        $Qlisting->bindRaw(':order_by_direction', (($this->_sort_by_direction == '-') ? 'desc' : ''));
      }

Replace it with:

if (isset($this->_sort_by)) {
        $Qlisting->appendQuery(':order_by :order_by_direction, pd.products_name');
        $Qlisting->bindRaw(':order_by', $this->_sort_by);
        $Qlisting->bindRaw(':order_by_direction', (($this->_sort_by_direction == '-') ? 'desc' : ''));
      } else {
        $Qlisting->appendQuery('p.products_ordered desc');
      }

Sort Results

I have made several testing orders to test the sort by popular option.

As you can see, the best sellers will be shown at the top of list.

This is the result sorting by newest option.

This is the result sorting by price low to high.

This is the result sorting by price high to low.

As you can see, i have sorted the products by random option two times. The result for each time is totally different.

Final word

A good sort by functionality is necessary for a professional store. It is definitely important for the customers for your store. So, please apply this new sort by dropdown for your bootstrap store. It is deserved.

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting