[TomatoCart Mobile]Enable grid view for product listing in the mobile device

When I search the famous eCommerce shop with Google search engine, I note that most of them use the grid view for products listing in the mobile device. So, I have implemented a grid view for bootstrap template of TomatoCart.

Snip20150419_5Figure 1. Grid view in new products module

Snip20150419_6Figure 2. Grid in feature products module

Snip20150419_7Figure 3. Grid view in products listing page

How to support this feature for your store

Step 1. Open templates > bootstrap > css > stylesheet.responsive.css in your favorite text editor.

Step 2. Find following code in it:

/*grid view*/
    ul.grid li {
        float: none;
        width: 100%;
        height: auto;
    }
    ul.grid li div.left {
        display: block;
        margin: 10px 10px 0 10px;
        position: relative;
        width: 100%;
        float: none;
    }
    ul.grid li div.left img {
        display: block;
        float: left;
    }
    ul.grid li div.right {
        padding: 0 10px 0 0;
        display: block;
        width: 100%;
    }
    ul.grid li div.right span.price {
        display: block;
        float: none;
    }

Replace it with:

/*grid view*/
    ul.grid {
        border: 0;
        font-weight: normal;
        margin-top: 20px;
    }
    ul.grid li {
        float: none;
		width: 49%;
		height: auto;
		display: inline-block;
		padding: 0;
		border: 0;
		margin-bottom: 20px;
    }
    ul.grid li div.left {
        display: block;
        margin: 10px 10px 0 10px;
        position: relative;
        width: 100%;
        float: none;
        text-align:center;
    }
    ul.grid li div.left a {
        display:block;
        text-align:center;
        font-weight:normal;
    }
    ul.grid li div.left img {
        display: block;
        margin: 0 auto;
    }
    ul.grid li div.right {
        padding: 0 10px 0 0;
        display: block;
        width: 100%;
        text-align:center;
    }
    ul.grid li div.right span.price {
        display: block;
        float: none;
    }

Step 3. Open templates > bootstrap > modules > content > new_products.php and then find following code:

<h6><?php echo $osC_Box->getTitle(); ?></h6>

Replace it with:

<h6><?php echo $osC_Box->getTitle(); ?><a class="view-all visible-phone pull-right" href="<?php echo osc_href_link(FILENAME_PRODUCTS, 'new'); ?>">View all>></a></h6>

Find following code:

<p class="description"><?php echo strip_tags($osC_Product->getDescription()); ?></p>

Replace it with:

<p class="description hidden-phone"><?php echo strip_tags($osC_Product->getDescription()); ?></p>

Step 4. Open templates > bootstrap > modules > content > feature_products.php and then find following code:

<p class="description"><?php echo strip_tags($osC_Product->getDescription()); ?></p>

Replace it with:

<p class="description hidden-phone"><?php echo strip_tags($osC_Product->getDescription()); ?></p>

Okay now. After applying above code changes for your store, you will see the grid view in the mobile device.

If you need my help, please contact me via support@tomatocart.com. I will assist you as possible as i can.

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 *