[TomatoCart] – add perpage options into product listing of bootstrap theme

In the product listing of bootstrap theme, the number of products shown in the listing is configured under Configuration > Maximum values. Once it is configured, your customers will always see the fixed number of products for each page. I think we should give options to our customers about how many products should be shown in each page.

In this article, I will illustrate how to enable such options within product listing page. It should looks like:

Snip20160327_23

As above image show, we will provide 30, 60 and 90 options for perpage dropdown menu.

Update the default search results setting

First step, we have to change the default perpage setting under admin panel > Configurations > Maximum. Please just update it to 30.

Snip20160327_24

Add perpage dropdown menu into product listing page

Next, we have to output a dropdown menu to show the perpage options to your customer.

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

— Add following code snippet into helper.php:

function get_products_per_page() {
    return array(
      array('id' => '30', 'text' => 30),
      array('id' => '60', 'text' => 60),
      array('id' => '90', 'text' => 90)
    );
}

Step2. Open templates > bootstrap > modules > product_listing.php.

— Find following line:

$view_type = get_products_listing_view_type();

— Add following code after it:

$per_page_options = get_products_per_page();
$per_page = $_GET['perpage'] ?: MAX_DISPLAY_SEARCH_RESULTS;

— Find following code snippe:

<div class="span5 center">
   <?php
      if (count($filters) > 0) {
        echo osc_draw_pull_down_menu('filter', $filters, (isset($_GET['filter']) ? $_GET['filter'] : null), 'onchange="this.form.submit()"');
      }
   ?>
</div>

— Replace it with:

<div class="span3 center">
    <?php
             if (count($filters) > 0) {
                 echo osc_draw_pull_down_menu('filter', $filters, (isset($_GET['filter']) ? $_GET['filter'] : null), 'onchange="this.form.submit()" style="width:auto;"');
             }
    ?>
</div>

— Find following code snippet:

<?php
                  //it is unecessary to sorts the new products
                  if ($osC_Template->getGroup() !== 'products') {
            ?>
                <div class="span5">
                    <div class="pull-right">
            <?php echo osc_draw_pull_down_menu('sort', $sort_array, $sort, 'onchange="this.form.submit()"'); ?>
                    </div>
                </div>
                <?php
                  }
                ?>

— Add following code after it:

<div class="span2">
          <div class="pull-right">
            <?php echo osc_draw_pull_down_menu('perpage', $per_page_options, $per_page, 'onchange="this.form.submit()" style="width:auto;"'); ?>
          </div>
        </div>

Active the perpage action

Now that, we add the perpage options into the product listing page. It’s time to active it in the code.

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

— Find following line:

$_sort_by_direction;

— Replace it with:

$_sort_by_direction,
$_per_page;

— Find following code:

function setManufacturer($id) {
      $this->_manufacturer = $id;
}

— Add following code after it:

function setPerPage($per_page) {
      $this->_per_page = $per_page;
}

— Find following line:

$Qlisting->setBatchLimit((isset($_GET['page']) && is_numeric($_GET['page']) ? $_GET['page'] : 1), MAX_DISPLAY_SEARCH_RESULTS);

— Replace it with:

$Qlisting->setBatchLimit((isset($_GET['page']) && is_numeric($_GET['page']) ? $_GET['page'] : 1), $this->_per_page);

Step 2. Open includes > content > index.php.

— Find following code:

if ( isset($_GET['products_attributes']) && is_array($_GET['products_attributes']) ) {
        $osC_Products->setProductAttributesFilter($_GET['products_attributes']);
      }

— Add following code after it:

if ( isset($_GET['perpage'])) {
  $osC_Products->setPerPage($_GET['perpage']);
}

That’s it. Now, your customer could change the number of products shown within each page by this new dropdown menu.

Snip20160327_25

30 products within each page

Snip20160327_26

60 products within each page

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting

Tags: | Posted under TomatoCart, Uncategorized | 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 *