[TomatoCart] – two grid layout for product listing page within bootstrap template

In this article, I will share you a solution to achieve the two grid layout for product listing page. In this way, you could show larger product thumbnail in the product listing. It will look like:

Snip20160329_1

Snip20160329_3

Update the width & height for thumbnail image group

In order to show large thumbnail in the two grid layout, we need to update the default width and height for thumbnail image group.

Step 1. Go to admin panel > Definitions > Image Groups.

Snip20160329_4

Step 2. Update the width & height of  image group.

Snip20160329_5

As the preceding image shown, i update both the width and height to 220px. You could enter the proper value depending on your own requirement.

Step 3. Go to admin panel > Tools > Images.

Snip20160329_6

Step 4. Click the resize images button. Then select the thumbnail group and check the overwrite checkbox.

Snip20160329_7

Just click the Execute button to resize the thumbnails.

Update product listing view to add the two grid layout button

After updating the product thumbnails, we could now change the default listing view.

Step1. Open templates > bootstrap > helper.php.

— Find following code snippet:

function get_products_listing_view_type() {
    //check view type
    $view_type = 'list';
    if (isset($_GET['view'])) {
        if ($_GET['view'] == 'grid') {
            $view_type = 'grid';
        }
    } else if (isset($_SESSION['view_type'])) {
        if ($_SESSION['view_type'] == 'grid') {
            $view_type = 'grid';
        }
    }
    //set view type to session
    $_SESSION['view_type'] = $view_type;

    return $view_type;
}

— Replace it with:

function get_products_listing_view_type() {
    if (isset($_GET['view'])) {
        if ($_GET['view'] == 'grid') {
            $view_type = 'grid';
        }else if ($_GET['view'] == 'grid2') {
            $view_type = 'grid two-cols';
        }else if ($_GET['view'] == 'list') {
            $view_type = 'list';
        }
    }else if (isset($_SESSION['view_type'])) {
        if ($_SESSION['view_type'] == 'grid') {
            $view_type = 'grid';
        }else if ($_SESSION['view_type'] == 'grid2') {
            $view_type = 'grid two-cols';
        }else if ($_SESSION['view_type'] == 'list') {
            $view_type = 'list';
        }
    }else {
      $view_type = 'list';
    }

    //set view type to session
    $_SESSION['view_type'] = $view_type;

    return $view_type;
}

Step 2. Open templates > bootstrap > modules > product_listing.php.

— Find following code:

<div class="btn-group">
                    <?php
                        if ($view_type == 'list') {
                    ?>
                        <a class="btn btn-small active"><i class="icon-th-list"></i></a> /
                        <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid'); ?>"><i class="icon-th"></i></a>
                    <?php
                        } else {
                    ?>
                        <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=list'); ?>"><i class="icon-th-list"></i></a> /
                        <a class="btn btn-small active"><i class="icon-th"></i></a>
                    <?php
                        }
                    ?>
 </div>

— Replace it with:

<div class="btn-group">
            <?php
                if ($view_type == 'list') {
            ?>
                <a class="btn btn-small active"><i class="icon-th-list"></i></a> /
                <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid'); ?>"><i class="icon-th"></i></a>
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid2'); ?>"><i class="icon-th-large"></i></a>
            <?php

                } else if ($view_type == 'grid') {
            ?>
                <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=list'); ?>"><i class="icon-th-list"></i></a> /
                <a class="btn btn-small active"><i class="icon-th"></i></a>
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid2'); ?>"><i class="icon-th-large"></i></a>
            <?php
                }else if ($view_type == 'grid two-cols') {
            ?>
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=list'); ?>"><i class="icon-th-list"></i></a> /
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid'); ?>"><i class="icon-th"></i></a>
              <a class="btn btn-small active"><i class="icon-th-large"></i></a>
          <?php
              }

          ?>

            </div>

Step 3. Open templates > bootstrap > index.php.

— Find following code:

<meta name="Generator" content="TomatoCart" />

— Add following code after it:

<style>
    ul.grid.two-cols li{
        width: 50%;
    }

    ul.list li img {
        max-width: 80px;
    }
  </style>

That’s it. Now, you customer could view your products with two grid layout. It might be useful for your store need to show a more larger product thumbnail in the listing.

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting

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 *