Creating non "standard" zen cart sites.

[madmumbler]

Test stores are a wonderful thing. *LOL*

As with any software, the more you play with it, the easier it gets. If you play with it 5 minutes a month, you will get frustrated. If you can even just spend a whole weekend doing nothing but playing with it, it will help you figure it out.

That, and using FireFox with Firebug. *LOL*

Good luck!

[Kim]

This one was submitted to the Zen Cart Showcase today and is beautiful, functional and still breaks the traditional mold. Enjoy! www dot helenahillgiftboxes dot com

[madmumbler]

Wow! That is neat! Very clean design, loaded fast, nice page graphics that are easy on the eyes.

Okay, so what they did -- please correct me if I'm wrong -- is they just have a few items to sell, so they created them as top-level products so the category nav tabs could be used and they ditched the category sidebox?

[gjh42]

Yep, that's what they did (though you meant to say "top-level categories"), and each category has only one product; so with Configuration > Layout Settings > Skip 1-prod Categories - true, clicking a category link goes straight to the product.

In fact, that would be a way to get the effect of products and subcats in the same category: make the products you want to show each live in their own subcat named the same as the product; then they all show in the top cat listing, and the individual ones go to the product when clicked instead of to a listing of multiple products.

[XjamathonX]

So i've taken the obvious first step and best advice and jumped right in experimenting with a test store.. so far so good...

I've been able to get dual pricing installed (which is a must for some future clients) as well as the column layout grid contrib (which is a must for me visually haha)..

I've removed both side boxed, set a fixed width, installed a full header length image.. change some nav from left to right and all sorts of goodies.. By looking through the css (and using Firebug! great suggestion) i've found alot of places where i can use css background images, set fixed widths and heights to make them seemless and flow into one header and all sorts of interesting things I am finally glad I am able to do...

It has of course left me with a few other questions, but I guess that's the point of discovering right?

right now i'm mainly interested in figuring out how to customize the look of my categories.. my test store only has two categories right now, which is fine... what i'd really like to do is strip it down to give it a cleaner look..

remove the options for adding each product to cart from the main category page..

remove the filer results box..

remove the add selected products to cart buttons..

and remove the displaying 1 of xxx products...

I'd also like to possibly use an Image to display the category name as opposed to text and remove the product description for each item leaving only the name and price displayed for a cleaner look..

haha whew.. is that enough? still using the search function for the majority of my learning.. about to work on using some sample roll over images instead of the text based nav now if anyone has some pointers for me...

it's actually just like you guys said.. not nearly as hard to change it from the standard version as you think.. just gotta get your hands dirty, dig around, and get some help from those that know... thanks again for everyones help!

Jonathan

p.s. that site kim posted was very nice...

[gjh42]

"right now i'm mainly interested in figuring out how to customize the look of my categories.. my test store only has two categories right now, which is fine... what i'd really like to do is strip it down to give it a cleaner look..

remove the options for adding each product to cart from the main category page.."

- Configuration > Product Listing > Display Product Price/Add to Cart
- Display Product Price/Add to Cart Column Width

"remove the filer results box.."

- Display Category/Manufacturer Filter (0=off; 1=on)

"remove the add selected products to cart buttons.."

- Display Product Add to Cart Button (0=off; 1=on; 2=on with Qty Box per Product)
Display Multiple Products Qty Box Status and Set Button Location

"and remove the displaying 1 of xxx products..."

- Prev/Next Split Page Navigation (1-top, 2-bottom, 3-both) (you can't entirely remove it, but you can put it at the bottom of the page)

"I'd also like to possibly use an Image to display the category name as opposed to text and remove the product description for each item leaving only the name and price displayed for a cleaner look.."

- Display Product Description
- image: coding required, not very complex. I did this for product names on the product info page for someone recently. The code would not be too hard to transfer.

"haha whew.. is that enough? still using the search function for the majority of my learning.. about to work on using some sample roll over images instead of the text based nav now if anyone has some pointers for me..."

- the Categories Dressing mod includes category menu link CSS rollovers which you could use for an example in the header nav.

[XjamathonX]

Glenn, thanks so much for your help! I really appreciate it.. I have implemented most of your suggestions and am very happy to say they are working great...

I am assuming that cleaning up the spacing between product name and price etc, will all be a CSS issue and not a Zen Cart backend item correct?

"remove the filer results box.."

- Display Category/Manufacturer Filter (0=off; 1=on)

For whatever reason this is not working for me and I still have the Filter Results by: box with "Items starting with" and the alphabet in the drop down.. any ideas?

"I'd also like to possibly use an Image to display the category name as opposed to text and remove the product description for each item leaving only the name and price displayed for a cleaner look.."

- Display Product Description
- image: coding required, not very complex. I did this for product names on the product info page for someone recently. The code would not be too hard to transfer.

For this I meant the actual main category name.. say t-shirts or accessories, not the individual product name.. while a very cool feature, that would be a lot of image editing.. i was hoping just to dress up the category title in the upper left corner.. any thoughts?

"haha whew.. is that enough? still using the search function for the majority of my learning.. about to work on using some sample roll over images instead of the text based nav now if anyone has some pointers for me..."

- the Categories Dressing mod includes category menu link CSS rollovers which you could use for an example in the header nav.

will download the mod now and check it out.. any suggestions on hot to implement the rollovers in the header itself? I assume they would go in the "nav cat tabs" div where the unordered list currently resides but i am not sure what php file that corresponds to nor how to remove the text links that are automatically generated...

I also had one more question i needed to pose.. More of a functionality issue but one I figured i would ask the experts... I know i want to be able to usefully implement the gift certificate mod. Since my layout calls for removing the side columns, how would a user know what gift certificate funds they have available without the box showing up in the right column? is there an obvious way to let them know.. do they check the my account page? can you put a gift certificate box pop up in the header? any functional advice would be great... thanks so much for all the help! i just wish i could somehow repay the favor...

Jonathan

[gjh42]

"use an Image to display the category name as opposed to text"
As I said, the code would not be hard to transfer to this use.

"implement the rollovers in the header itself? I assume they would go in the "nav cat tabs" div"

Yes, this would be in tpl_header.php, and the Categories Dressing code and CSS for rollovers could be adapted for use there.

[XjamathonX]

"use an Image to display the category name as opposed to text"
As I said, the code would not be hard to transfer to this use.

any advice you have on this would be great!

"implement the rollovers in the header itself? I assume they would go in the "nav cat tabs" div"

Yes, this would be in tpl_header.php, and the Categories Dressing code and CSS for rollovers could be adapted for use there.

finally was able to wrangle something close to working after a while.. i used the code from the category dressing code, added it to my css, then put the div links in the "tpl_header.php". i ended up removing the nav category tabs and added the new roll over navigation to a header I css bottom justified in the logo wrapper...

i am having a problem in IE where the first time the roll overs are activated the image goes blank then the hover status shows up... any idea as to why that could happen or is an IE bug?

through a lot of searching i was able to clean up and eliminate the space and ...more info links by editing my css and my columns listing file.

i also found a disble fix for the filter results alphabetical search so that's good...

i am moving on now to the actual individual products page.. using the panel i've been able to remove a lot of the extra information i don't need right now, like reviews, tell a friend etc... i really want to work on some sort of extra image display with a mouse over to change them , but everyone i have seen has problems with displaying the correct size image or the click to enlarge feature.. any suggestions on dressing up the product listing?

Seriously Glenn.. I have no way of telling you how much you have helped me.. Not only on this post, but virtually every other question I have has been answered by you in the past..(for example how to put image links on top of your header haha.. you had an entire post on this subject that helped me so much!) Your and several other users here (kim, ajeh, madmumbler, etc etc..)are a literal godsend to people in my position coming from a design background trying to make this work and I honestly don't know how to begin to thank you, but thank you none the less!

Jonathan