Question on how to make a site look like this target site

Hi, I'm new to zen-cart and php programming. A friend has asked me to look into using zen-cart to produce an e-commerce site that looks something like.

http://www.forever21.com/

I've installed zen-cart on a linux server successfully, been able to change a few things in the basic look and feel. Now I'm wanting to go further and use categories and possible the overrides to get the look my friend desires. Any hints? I'm more then willing to read documention, etc.

Thanks for any help.

It's possible to get close. It's going to be a combination of css, graphic design, configuration of zen and Slideshow Pro.

Instead of using the categories sidebox, I would just create my own css menu or use the built in tab system of zen. You would probably have an easier time.

I can't give you specific steps, but from a designer's perspective, it's possible.

Thanks ZForest I'm not familiar with SlideShow Pro per se. I've gone to their site and checked it out. It seems like an easy product to use.

What are the techniques for integrating a product like this using flash in zen-cart? I did a search on all the forums and the only reference to this product was your reply.

I'm looking into your suggestion about using the product build in product category support.

The one thing I noticed about this site that the category "tabs" seemed to have two levels with a third level being the actual products. It wasn't clear how to make the second level below the major product lines (Women, Men) appear as "tabs".

I'm going to be honest with you. To make Zen look like the site you mentioned is going to take a lot of work. It can be done sure, but you seem to be new at all this, and to walk you through it would take just as long as it would take me to do it.

You could probably pay someone to do a design like this, but I wouldn't roll out of bed for less than price edited, but that's just me.

I wish I could be more help, but I've gots billz to pay. ;)

Good luck. I wish you the best.

Alternatively, you can search for "flash" here and adapt these methods to the quasi slide show.

You can also post to the commercial help section here that is just for this type of project. Be advised that all participants in that section are not condoned by the ZenCart team, so caveat emptor!

zforrest among others does very nice work and I do not know if he participates in the commercial section or not as this is not requisite.

zForest,

Honesty is the best policy. I understand your reply. Thanks for the pointers. I'll follow up on them.

Doug

it wouldn't take that much time at all, not if you have the right tools and experience. the concern i usually have is if the client has the right images and descriptions. imo, what makes your target site stand out are its professional quality images.

ok hats off to the studio who did this site...

lots of interactive features embedded at just the right places.

1 stand out that zen cart doesn't have by default, but your developer could create:

the 'click to view' swatches >> if using zc, you would have to render the product attributes such that the image swatches also activate a jscript show/hide function.

i have a set of 3 jscript functions that handle this for expand/collapse at my site, but you could use the same functionality for an attributes array.

but again, the clean swatch switching won't work without someone who had their image handling down in the first place. i would say they had a manequin and background color that would be easily replaced with a photoedit find/replace program, like they use to combine CG with real objects in movies. this would be required to get the appearance of consistent volume.

kudos to the image handlers at forever21.

Thanks for the response. I think the clients focased on the clean look, easy access to prducts and the resulting easy navigation. I don't think for starters they are looking most of the more advanced features that forever21 has throughout the site. I have a pretty good knowledge of programming and the web. I've been scouring the forums.

I have not spend lots of time investigating attributes and overriding existing pages with javascripts. Can you say more about how the use of product attributes can help in zen-cart development ?

sure.

jscript: use .display property to show/hide the product images, depending on which attribute swatch has been selected, if such an array exists. put a .js file in the templates/some_template/jscript/ directory and zen cart will provide the inclusion. see their /docs/ on jscript for more details.

php: in templates/tpl_modules_attributes.php you'll need to recode how zc attributes are rendered to handle the ...shall we call them 'hot swatches'.

this can be as simple as

---

<div class="back"> <?php if (isset($_COOKIE['SOME_COOKIE_NAME'])){ switch($i){ case 0: //let's say this is color swatch echo str_replace('YOUR_CURRENT_ATTRIBUTES_STRING','YOUR_ATTRIBUTES_STRING_WITH_HOT_SWATCH',$options_menu[$i]); break; case 1: // and more cases, for each attribute you wanna make 'hot' . . . } // or it's not a cookie val you wanna make condition, say some product id elseif (isset($_GET['products_id']) && 15 == $_GET['products_id']){ switch($i){ case 0: //let's say this is material {shiny silk, cotton, ...} swatch echo str_replace('YOUR_CURRENT_ATTRIBUTES_STRING','YOUR_ATTRIBUTES_STRING_WITH_HOT_SWATCH',$options_menu[$i]); break; case 1: // and more cases, for each attribute you wanna make 'hot' . . . }

---

in the product description or wherever you wanna inject the HTML that calls the jscript show/hide, make a tag set that includes your product images.

...this is how i'd do it without breaking core code.

Thanks for the info. I'll try some of it out.