Category landing pages?

[brf123]

Hello-
I am building a shop that sells baby clothes. The main product categories are layette, girl, boy, gifts, and novelties. When a visitor selects a category (ex. layette) the next page that shows will be a landing page with the center section displaying banner style boxes with text and images (possibly a featured product) that feature the subcats (ex boy, girl, unisex). The visitor would click the banner to then go to the listing of products within the category/subcategory. Is the best way to do this to create a custom page outside of zen cart? If I can do this within zen, what is the best practice?
Thanks.
Brett

[gjh42]

If a category has subcats, you will not get a product listing for it anyway.
The category description can have all kinds of text, images, links... You could hide the stock subcat image links with css and rework them as part of the description, if you need a fancy layout.

[brf123]

Thanks for the reply! I want to make my category landing page similar to what you have done with your home page. If I understand your suggestion, I should edit the css to use image for the categories on those secondary pages in order to customize that layout?
Thanks again.
Brett

[gjh42]

Editing the css is only a minor part of getting your category pages dressed up. How comfortable are you with HTML? You can use that in the category descriptions to include images, links, etc., and then css can help position elements as you desire.

[brf123]

Thanks for the reply. I am actually a developer - I am trying to get familiar with where to make the changes in zen cart to allow for the greatest flexibility for someone to update the site later. Can I pm you with a link to a couple of the designs to see if you have any additional suggestions?
Thanks again.

[gjh42]

OK, but I'm going to be busy this weekend and may not have time to reply until later.

The category or product descriptions can be edited by anybody in admin, without going into the files.

[brf123]

Thanks for all of your help. I was able to edit the styles for the featured products to get the look that I need as well as enable the customer to change what appears in that section. One more quick question -

I have a background image on the left of the featured products block with the product information on the right. I would like text on the left above the image (example: shop layette girl). That would be dynamic based upon the category that the featured product in in. This is very similar in concept to your categories dressing mod. Any ideas?

Thanks again.

[gjh42]

Just got back from a business trip...
I'll first give a few pointers on getting the categories sidebox functioning the way you asked for.

You have the image for the layette top cat working ok, but there is a better way to use it.
First you want to hide all of the top cats in the sidebox and have them visible only in the categories-tabs menu in the header. This can be done in your stylesheet by finding this:

#categories a {
    background-repeat: no-repeat;
    display: block;
    }

A.catBg1 {
    background-image: url(../images/catbg1.gif);
    height: 46px;
    vertical-align: top;
	}

and removing the A.catBg1 {} declaration completely and adding

#categories a.category-top-text {
display: none;
}

to get

#categories a {
    background-repeat: no-repeat;
    display: block;
    }
#categories a.category-top-text {
    display: none;
    }

Then add headings above the first subcategory in each main category, like the layettes > boy (cPath = 1_6). Find this in your cat dressing copy of tpl_categories.php:

// categories dressing - add (divider and) heading above a cat
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        //$content .= '<hr class="catBoxDivider" />' . "\n";  // to add divider uncomment this line
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n"; 
      break;
      } 

and change to

// categories dressing - add (divider and) heading above a cat
      switch ($current_path) {
      case '1_6': //replace number with your desired cPath
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'layettes</span>' . $disp_block_head) . "\n"; 
      break;
      } 

and rename catbg1.gif to cathead1.gif.

Add a case for the first subcat in each of the other top cats, like 2_13, 3_17, etc. (whatever the actual first subcat cPaths are), and an image named cathead2.gif, cathead3.gif, etc.


I'll look at the other question later - too tired now to think about it.

[brf123]

This is very helpful. Thanks! I am looking forward to your advice on the landing page as well. I have the first image but not the logic necessary to get it to work based upon the categories. Thanks again.

[gjh42]

Oops! Need to correct a typo...

For the headings above the first subcats, you need to name the images cathead1_6.gif, cathead2_13.gif, etc., instead of cathead1.gif, cathead2.gif.