Post by TomC » Sat Jul 28, 2012 12:40 am

Wondering if anyone has any thoughts/ideas/suggestions as to how to try to style a category display similar to that on the front page of the BILLY GUYATTS site.

I've seen category display extensions here and there - such as THIS EXTENSION and THIS EXTENSION
- so I am wondering if it may be [simply] a matter of CSS styling.


Any thoughts and/or reference to any other starting-point extension resources ???


:)

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)

Post by mcamca » Sat Jul 28, 2012 5:26 am

This can be simulated in Opencart using 6 images applied in the menu section of stylesheet.css together with other css changes in menu section!

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by TomC » Sun Jul 29, 2012 11:34 am

mcamca wrote:This can be simulated in Opencart using 6 images applied in the menu section of stylesheet.css together with other css changes in menu section!
I get the idea that there is css styling involved ... but the rest of your suggestion doesn't make a whole lot of sense to me.

:-\

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)

Post by MarketInSG » Sun Jul 29, 2012 2:30 pm

No, it's not only styling. You need controller files to retrieve the categories for which you wish to display. Of those categories mod you showed, i'm not very sure if they can pick and choose which categories to feature at home page. But I have one that allows you to pick and show which category to display at home page: http://www.opencart.com/index.php?route ... on_id=6464


User avatar
Guru Member

Posts

Joined
Wed Nov 16, 2011 11:53 am
Location - Singapore

Post by mcamca » Sun Jul 29, 2012 6:49 pm

TomC wrote:
mcamca wrote:This can be simulated in Opencart using 6 images applied in the menu section of stylesheet.css together with other css changes in menu section!
I get the idea that there is css styling involved ... but the rest of your suggestion doesn't make a whole lot of sense to me.
:-\
Sorry, thought you meant the styling of the menu bar; apologies!

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by TomC » Mon Jul 30, 2012 11:00 pm

MarketInSG wrote:But I have one that allows you to pick and show which category to display at home page: http://www.opencart.com/index.php?route ... on_id=6464
Thanks ... but for the display/layout I'm wanting to achieve, a "3D Carousel" effect isn't what I had in mind.
Very nice extension, though.


Here is the overall look I'm wanting/hoping to achieve . . .

Image

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)

Active Member

Posts

Joined
Sat Aug 13, 2011 2:48 am


Post by TomC » Tue Jul 31, 2012 4:04 am

jimmyphong wrote:you mean like this extensions
http://www.opextensions.com/extensions/pro-categories

Well, sort of .... provided that the ability to modify the styling of such will allow me to get as close as possible
- if not virtually identical - to the layout of the image I posted above.

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)

Post by labeshops » Tue Jul 31, 2012 4:44 am

I did something similar on http://www.labeshops.com - I just used the welcome module and coded it thru the source view. Easy peasy. You can do any styling you want if you know html/tables/divisions.

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by TomC » Tue Jul 31, 2012 4:50 am

labeshops wrote:I did something similar on http://www.labeshops.com - I just used the welcome module and coded it thru the source view. Easy peasy. You can do any styling you want if you know html/tables/divisions.
Are you referring to the "Transform Your World ... " section of your home page?

I know intermediate-level div/CSS styling ... though, looking at how you configured that section on your site, I'm not certain how "easy peasy" it will be to achieve the display I'm wanting. :-\

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)

Post by MarketInSG » Tue Jul 31, 2012 12:30 pm

It's quite easy if you want, you can do with the welcome module with tables and images. Nothing hard about that.


User avatar
Guru Member

Posts

Joined
Wed Nov 16, 2011 11:53 am
Location - Singapore

Post by TomC » Tue Jul 31, 2012 1:46 pm

Actually, jimmyphong assisted me with a perfect solution - exactly what I needed.

I really appreciate all the suggestions and comments ... things are really coming together and I'm just about ready to start creating my site. Just one or two more key items I want/need and I'm ready to go full throttle. 8)

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)

Post by mcamca » Thu Aug 02, 2012 12:08 am

TomC wrote:
MarketInSG wrote:But I have one that allows you to pick and show which category to display at home page: http://www.opencart.com/index.php?route ... on_id=6464
Thanks ... but for the display/layout I'm wanting to achieve, a "3D Carousel" effect isn't what I had in mind.
Very nice extension, though.


Here is the overall look I'm wanting/hoping to achieve . . .

Image
You can reproduce virtually identical to the above by modifying:
catalog/view/theme/yourtheme/template/module/category.tpl
As follows:

Code: Select all

<?php if (!isset($this->request->get['route']) || (isset($this->request->get['route']) && $this->request->get['route'] == 'common/home')) { ?>
<div class="box">
  <div id="cat_header" class="box-heading"><?php echo $heading_title; ?></div>
   <div>
    <div id="cat_home" class="box-category">
      <ul>
        <?php foreach ($categories as $category) { ?>
        <li>
          <?php if ($category['category_id'] == $category_id) { ?>
          <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category ['name']; ?></a><div id="cat_menu_child_space">&nbsp;</div>
<?php $pathname = 'image/' . $category['image'];
if ($pathname != 'image/') { ?>
<img src="image/<?php echo $category['image']; ?>">
<?php } else { ?>
<?php } ?> 
         <?php } else { ?>
          <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a><br /><div id="cat_menu_child_space">&nbsp;</div>
<?php $pathname = 'image/' . $category['image'];
if ($pathname != 'image/') { ?>
<img src="image/<?php echo $category['image']; ?>">
<?php } else { ?>
<?php } ?>
          <?php } ?>
          <?php if ($category['children']) { ?>
          <ul style="display: block">
            <?php foreach ($category['children'] as $child) { ?>
            <li>
              <?php if ($child['category_id'] == $child_id) { ?>
              <a href="<?php echo $child['href']; ?>" class="active"><?php echo $child['name']; ?></a>
              <?php } else { ?>
              <a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a>
              <?php } ?>
            </li>
            <?php } ?>
          </ul>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
    </div>
  </div>
</div>
<div style="clear:both;">&nbsp;</div>
<?php } else { ?>
<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-category">
      <ul>
        <?php foreach ($categories as $category) { ?>
        <li>
          <?php if ($category['category_id'] == $category_id) { ?>
          <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
          <?php } else { ?>
          <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
          <?php } ?>
          <?php if ($category['children']) { ?>
          <ul>
            <?php foreach ($category['children'] as $child) { ?>
            <li>
              <?php if ($child['category_id'] == $child_id) { ?>
              <a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
              <?php } else { ?>
              <a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
              <?php } ?>
            </li>
            <?php } ?>
          </ul>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
    </div>
  </div>
</div>
<?php } ?>
Adding two lines of code to:
catalog/controller/module/category.php
As follows:

Code: Select all

<?php  
class ControllerModuleCategory extends Controller {
	protected function index($setting) {
		$this->language->load('module/category');
		
    	$this->data['heading_title'] = $this->language->get('heading_title');
		
		if (isset($this->request->get['path'])) {
			$parts = explode('_', (string)$this->request->get['path']);
		} else {
			$parts = array();
		}
		
		if (isset($parts[0])) {
			$this->data['category_id'] = $parts[0];
		} else {
			$this->data['category_id'] = 0;
		}
		
		if (isset($parts[1])) {
			$this->data['child_id'] = $parts[1];
		} else {
			$this->data['child_id'] = 0;
		}
							
		$this->load->model('catalog/category');
		$this->load->model('catalog/product');
		
		$this->data['categories'] = array();
					
		$categories = $this->model_catalog_category->getCategories(0);
		
		foreach ($categories as $category) {
			$children_data = array();
			
			$children = $this->model_catalog_category->getCategories($category['category_id']);
			
			foreach ($children as $child) {
				$data = array(
					'filter_category_id'  => $child['category_id'],
					'filter_sub_category' => true
				);		
					
				if ($setting['count']) {
					$product_total = $this->model_catalog_product->getTotalProducts($data);
					
					$children_data[] = array(
						'category_id' => $child['category_id'],
						'name'        => $child['name'] . ' (' . $product_total . ')',
						'href'        => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])	
					);						
				} else {
					$children_data[] = array(
						'category_id' => $child['category_id'],
						'name'        => $child['name'],
						'href'        => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])	
					);						
				}			
			}
			
			$data = array(
				'filter_category_id'  => $category['category_id'],
				'filter_sub_category' => true	
			);		
			
			if ($setting['count']) {
				$product_total = $this->model_catalog_product->getTotalProducts($data);
			
				$this->data['categories'][] = array(
					'category_id' => $category['category_id'],
					'name'        => $category['name'] . ' (' . $product_total . ')',
                                        // ADDED NEXT LINE
					'image'       => $category['image'],
					'children'    => $children_data,
					'href'        => $this->url->link('product/category', 'path=' . $category['category_id'])
				);				
			} else {
				$this->data['categories'][] = array(
					'category_id' => $category['category_id'],
					'name'        => $category['name'],
                                        // ADDED NEXT LINE
					'image'       => $category['image'],
					'children'    => $children_data,
					'href'        => $this->url->link('product/category', 'path=' . $category['category_id'])
				);			
			}
		}
		
		if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/category.tpl')) {
			$this->template = $this->config->get('config_template') . '/template/module/category.tpl';
		} else {
			$this->template = 'default/template/module/category.tpl';
		}
		
		$this->render();
  	}
}
?>
Adding the following css code to the bottom of:
catalog/view/theme/yourtheme/stylesheet/stylesheet.css

Code: Select all

/* Categories with image on Home */
#cat_header{
        background: #ffffff url('../image/category_bg_blue.jpeg');
        border: 1px solid #E3E3E3;
        padding: 16px 0px 16px 8px;
        margin: 10px 0px 10px 0px;
        color: #03436D;
        font-size: 28px;
}
#cat_home > ul > li {
        display:inline-block;
        min-width:160px;
        min-height:155px;
        margin-left: 12px;
        float: left;
        width: 224px;
        overflow: hidden;
        text-transform:uppercase;
        font-weight: bold;
}
#cat_home > ul > li > img {
        padding-top:0px;
        width: 112px;
        float: right;
}
#cat_home > ul > li > a {
	text-decoration: none;
        color: #03436D;
        font-size: 18px;
}
#cat_home > ul > li:hover > a {
	text-decoration: underline;
	color: #000000;
} 
#cat_menu_child_space{
        height:5px;
}
#cat_home > ul > li ul > li {
        padding: 0px 0px 1px 0px;
}
#cat_home > ul > li ul > li > a {
	text-decoration: none;
        color: #3E3E3E;
        visibility: visible;
        font-weight: bold;
        text-transform: capitalize;
        font-size: 11px;
}
#cat_home > ul > li ul > li > a:hover {
	text-decoration: underline;
	color: #0F68A2;
}
Adding the following image to folder:
catalog/view/theme/yourtheme/image/category_bg_blue.jpeg
Image
Its the white looking area just above! Right click and copy or save picture!
Create a new module in Admin>Extensions>Modules>Category which has a Layout of "Home", Position of "Content Top" or "Content Bottom", Product Count of "Disabled" and Status of "Enabled".
In Admin>Catalog>Categories make sure that the 4th, 8th, 12th etc top category items have the largest number of sub categories in that row. Do this by applying the correct "Sort Order".
Above works in v1.5.2.1 in IE8 and Latest Firefox. You'll have to check in other versions and browsers!
Lets know how you get on!
Edit: Mon Aug 06, 2012: Added code to stop image from showing if no image is allocated to the top level category!
Last edited by mcamca on Mon Aug 06, 2012 5:28 pm, edited 2 times in total.

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by mcamca » Thu Aug 02, 2012 5:12 am

PS: In Admin>Catalog>Categories>Edit>Category>Data>Image - make sure that each top level category has an image assigned to it!

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by labeshops » Fri Aug 03, 2012 2:33 am

TomC wrote:
labeshops wrote:I did something similar on http://www.labeshops.com - I just used the welcome module and coded it thru the source view. Easy peasy. You can do any styling you want if you know html/tables/divisions.
Are you referring to the "Transform Your World ... " section of your home page?

I know intermediate-level div/CSS styling ... though, looking at how you configured that section on your site, I'm not certain how "easy peasy" it will be to achieve the display I'm wanting. :-\
Yup, that's the section. Easy if you know html/css. I used all existing css actually, just created table cells the way I wanted it. Took about an hour.

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by TomC » Fri Aug 03, 2012 2:48 am

THANK YOU for the time and trial-and-error/effort you put into this for me.

I actually ended up (two days ago) going with an existing extension - developed by OpenExtensions - member "jimmyphong" - called "PRO CATEGORIES". Jimmy actually created a custom template for the extension to mirror the layout of the Billy Guyatts display I have been talking about. (And he's even now including that customized template as an added bonus - for everyone - with his extension). :)


Nevertheless, once I get it installed and start configuring things, I will definitely also reference the coding you [mcamca] have taken the time to work through and provide here ... for possible further enhancement (if needed).


LOVING the OpenCart Community thus far .... so amazingly helpful. ;D



SIDE NOTE:

Now, if I could ONLY encourage/motivate a skilled developer to take on/develop a more dynamic/robust MEGA MENU system for OpenCart. The one's currently available - and I've researched my butt off on this one - are somewhat lacking in terms of the ability to integrate custom content, custom html and/or certain modules (i.e. login, video, news/blog feed) into the mega menu structure. (See the links posted within the discussion for more info/insight into what I mean). 8)

This element is really the only thing that is currently holding me up from fully moving forward into developing my store project. I really want/need a robust/dynamic mega menu system for my particular project - which is, likewise, fairly robust/dynamic in scope). :-\
Last edited by TomC on Fri Aug 03, 2012 7:02 am, edited 2 times in total.

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)

Post by mcamca » Fri Aug 03, 2012 6:48 am

TomC wrote:Nevertheless, once I get it installed and start configuring things, I will definitely also reference the coding you [labeshops] have taken the time to work through and provide here ... for possible further enhancement (if needed).
Surely you mean "mcamca" not "labeshops". The only coding provided in this thread was supplied by myself - mcamca!!!

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by TomC » Fri Aug 03, 2012 7:00 am

mcamca wrote:
TomC wrote:Nevertheless, once I get it installed and start configuring things, I will definitely also reference the coding you [labeshops] have taken the time to work through and provide here ... for possible further enhancement (if needed).
Surely you mean "mcamca" not "labeshops". The only coding provided in this thread was supplied by myself - mcamca!!!
My SINCEREST apologies, mcamca . . . YOU ARE CORRECT !!!

(must have been the less then 3 hrs of sleep I got last night :-[ )



Again, I apologize .... MY BAD !!! :-[ . . . . CORRECTED

User avatar
Active Member

Posts

Joined
Mon Jul 16, 2012 3:32 am
Location - California (USA)
Who is online

Users browsing this forum: No registered users and 27 guests