Post by Seuldieu » Fri Jan 14, 2011 7:54 am

Hi Opencart!

I've been customizing a storefront, using my knowledge of PHP and CSS--the process has been fairly painless, and I'm liking the results. You can see the temporary installation here:

http://www.inversepenguin.com/ocart/

I've uploaded a placeholder image from the original mock up to get a feel for the page--not sure if I'll be taking the exact same route (I've actually been looking into converting the Opencart layout to a fluid layout like Amazon.com,) but regardless of my decision, I'll still need to know how to edit the PHP generated HTML.

For example, in the header's search category filter, it calls:

Code: Select all

<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
The result if you look at the DOM looks like this:

Code: Select all

<option value="35">       Watch Winders</option>
The space before the name must be included inside the array "$category", and I want to change this (but also other things like the HTML element structure of the category list,) but I haven't found where the global variables are created.

.TPL files?

Also, I noticed on the home.tpl:

Code: Select all

 <?php echo $column_left; ?>
appears to call column_left.tpl, similar to a php include... this is my first dealing with .tpl files but is this how they function, or is the naming convention confusing me?

There is a lot more going on than just the files the documentation tells you to use for creating a theme... I need access to it all! >:D

New member

Posts

Joined
Fri Dec 10, 2010 7:21 am

Post by Seuldieu » Fri Jan 14, 2011 8:31 am

Alright, I found:

Code: Select all

<div class="box">
  <div class="top"><img src="catalog/view/theme/default/image/category.png" alt="" /><?php echo $heading_title; ?></div>
  <div id="category" class="middle"><?php echo $category; ?></div>
  <div class="bottom">&nbsp;</div>
</div>
inside \catalog\view\theme\theme\default\template\module\category.tpl, and then I also found:

Code: Select all

protected function getCategories($parent_id, $current_path = '') {
		$category_id = array_shift($this->path);
		
		$output = '';
		
		$results = $this->model_catalog_category->getCategories($parent_id);
		
		if ($results) { 
			$output .= '<ul>';
    	}
		
		foreach ($results as $result) {	
			if (!$current_path) {
				$new_path = $result['category_id'];
			} else {
				$new_path = $current_path . '_' . $result['category_id'];
			}
			
			$output .= '<li>';
			
			$children = '';
			
			if ($category_id == $result['category_id']) {
				$children = $this->getCategories($result['category_id'], $new_path);
			}
			
			if ($this->category_id == $result['category_id']) {
				$output .= '<a href="' . $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/category&path=' . $new_path)  . '"><b>' . $result['name'] . '</b></a>';
			} else {
				$output .= '<a href="' . $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/category&path=' . $new_path)  . '">' . $result['name'] . '</a>';
			}
			
        	$output .= $children;
        
        	$output .= '</li>'; 
		}
 
		if ($results) {
			$output .= '</ul>';
		}
		
		return $output;
	}	
inside \catalog\controller\module\category.php; all the <ul> and <li> elements are generated here... these ones I found.

I don't understand exactly how it's calling each file, or even how .tpl and .php files differ within this platform haha, but I think I've found the code I was looking for here.

Still haven't found the code for the 'space' before each category on the filter drop down though...
Last edited by Seuldieu on Fri Jan 14, 2011 9:59 am, edited 2 times in total.

New member

Posts

Joined
Fri Dec 10, 2010 7:21 am

Post by hbuchel » Fri Jan 14, 2011 9:39 am

The search bar is in your header.tpl file. Also, basically your .tpl files make up the template files for your store, how it looks. The .php files you find in root/catalog/controller/ tell the platform which variables you can call in the different parts of your template. For a short explanation of it :D

New member

Posts

Joined
Mon Aug 30, 2010 9:41 pm

Post by Seuldieu » Fri Jan 14, 2011 9:55 am

hbuchel wrote:The search bar is in your header.tpl file. Also, basically your .tpl files make up the template files for your store, how it looks. The .php files you find in root/catalog/controller/ tell the platform which variables you can call in the different parts of your template. For a short explanation of it :D
Hmm, I see; I've been exploring and seeing what I can make sense of--some of the PHP is obviously beyond me.

However in regards to the search bar, you misunderstood me--I've already tweaked the CSS and layout of the search bar within the header.tpl, but I'm trying to figure out why the category filter dropdown displays tons of space before each category... that's not visible within the header.tpl, so I assume it's in the $category array... I don't think 'global variables' is the right term, but oh well.

New member

Posts

Joined
Fri Dec 10, 2010 7:21 am

Post by Xsecrets » Fri Jan 14, 2011 11:36 am

read this post to figure out the structure. http://forum.opencart.com/viewtopic.php?f=29&t=2544

OpenCart commercial mods and development http://spotonsolutions.net
Layered Navigation
Shipment Tracking
Vehicle Year/Make/Model Filter


Guru Member

Posts

Joined
Sun Oct 25, 2009 3:51 am
Location - FL US

Post by fido-x » Fri Jan 14, 2011 3:01 pm

Seuldieu wrote:...For example, in the header's search category filter, it calls:

Code: Select all

<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
The result if you look at the DOM looks like this:

Code: Select all

<option value="35">       Watch Winders</option>
The space before the name must be included inside the array "$category", and I want to change this (but also other things like the HTML element structure of the category list,) but I haven't found where the global variables are created.
The relevant code can be found at the end of "catalog/controller/common/header.php".

Code: Select all

private function getCategories($parent_id, $level = 0) {
    $level++;
        
    $data = array();
        
    $results = $this->model_catalog_category->getCategories($parent_id);
        
    foreach ($results as $result) {
        $data[] = array(
            'category_id' => $result['category_id'],
            'name'        => str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $level) . $result['name']
        );
            
        $children = $this->getCategories($result['category_id'], $level);
            
        if ($children) {
            $data = array_merge($data, $children);
        }
    }
        
    return $data;
} 
The spaces you mentioned are generated by the no-break spaces (&nbsp;). These are there to "indent" sub-categories and sub-sub-categories and sub-sub-sub-categories (etc.) in the drop-down category list in the search box.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by Seuldieu » Sun Jan 16, 2011 2:01 pm

@fido-x

Thank you. Exactly what I was looking for.


@Xsecrets

Thanks for the link--definitely helped.

New member

Posts

Joined
Fri Dec 10, 2010 7:21 am
Who is online

Users browsing this forum: Bing [Bot] and 5 guests