Shopping cart v1.1 Part 10: Front page

Today we will work on a webshop controller and its’ views. This module controls all the front-end functions. I will cover the front page in this article. The goals for the front page are the followings.

Download Page

1. Drop-down main menu, links for log-in, register, shopping cart, check-out, etc.
2. Categories sub menu on the left column
3. Showing a slide show in the top of the main content.
4. Showing 3 x 3 random products in the main content.
5. Showing ‘Most Sold’ products randomly on the right column.
6. Showing ‘New Product’ products randomly on the right column.

I will use dummy images and dummy texts for products and minimum CSS styling, so you need to modify according to your taste. I will not add any gateways since there are too many and each of them are different. I will use email ordering in this shopping cart. If your shop is a small size, let’s say less than 10 orders per day, this should serve the purpose. If you live in USA and some other countries where Google check-out supports, then you can add it as the original version 1.0. However I am not adding it at the moment.

webshop module structure

Please create a webshop module under modules folder. Then also create all the folders and files as you see in the image on the left.

Shop_controller revisited

In the Shop_controller, there are quite few things happening.
We set container, load assets group, helper, module_language and all the module models.

We start PHP session there and used it for customer login status and shopping cart display.
Main menu and categories menu is defined. ‘Most sold’ and ‘New Product’ is defined there as well.

All of the above will be used in all the webshop pages.

webshop controller

In part 1 we extended Site_controller and called Shop_controller. We are going to extend this Shop_controller to make webshop controller.

<?php

class Webshop extends Shop_Controller {

  function  Webshop(){
    parent::Shop_Controller();

  }

  function index(){
   	// you need to change webshop_lang $lang['webshop_folder'] = 'webshop';
    // according to your folder name.
   	$webshop = $this->lang->line('webshop_folder');
	$page = $this->MPages->getPagePath($webshop);
	$featureimages = $this -> MProducts -> getFrontFeature($webshop);
	$data['images'] = $featureimages;
	$data['title'] = $page['name'];
	$data['pagecontent'] = $page;
	$data['page'] = $this->config->item('backendpro_template_shop') . 'frontpage';
	$data['module'] = $this->lang->line('webshop_folder');
	$this->load->view($this->_container,$data);

  }
}

I added a page called ‘webshop’ in the back-end, so I am getting this with a module model from ‘pages module’ by using
Mpages->getPagePath(“webshop”).
Any content you added to this page can be displayed by using a variable $pagecontent in view/frontpage.php.

All the images in the front page is pulled by this line.

$featureimages = $this -> MProducts -> getFrontFeature($webshop);

We use frontpage.php for our $page and webshop module.

frontpage.php

modules/webshop/views/shop/frontpage.php

		<div id="maintop">

				<?php echo $pagecontent['content'] ;?>
				<div id="slideshow" class="pics"><a target="_self" href="index.php/<?php $this->lang->line('webshop_folder');?>/product/2">
					<img src="assets/images/frontpage/img1.jpg"></a>
				</div>
		</div>
		<div id="frontproducttable">

				<?php
                    foreach ($images as $image)
                    {
						echo '<div class="vt ac" >'."\n".'<div class="frontpro">'."\n".'<div class="vt">'."\n";
						echo '<a href="' . site_url().'/'.$this->lang->line('webshop_folder'). '/product/'.$image['id']. '">';
						echo "<img src='".$image['thumbnail']."' border='0' class='thumbnail'/></a>\n</div>\n<div class='vt al'>\n";
						echo '<span class="hdrproduct"><a href="' . site_url(). '/'.$this->lang->line('webshop_folder').'/product/'.$image['id']. '">'."\n";
						echo $image['name']. "</a></span><br />\n";
						echo $image['shortdesc']."</div>\n";
						echo "<div class='vt ar'><b>Pris</b>: <span class='price'>Kr ".$image['price']."</span><br />\n";
						echo '<a href="' . site_url()."/".$this->lang->line('webshop_folder'). '/cart/'.$image['id']. '"><p class="addtocart">'.$this->lang->line('webshop_buy').'</p></a></div>';
                        echo "\n</div>\n</div>\n";
                    }
                    ?>
		</div>

When you click a product image or name it will take you to an individual product page.

Each product has BUY link at the bottom. You can add a nice BUY button instead of text here.