Jump to content

New Store: Oye Modern - Contemporary Jewelry


Guest philoye

Recommended Posts

Guest philoye

I wanted to show off the Cube Cart 4 store I designed/built for my wife, for selling modern, contemporary jewelry. The site is here: http://oyemodern.com/

I wanted to thank people here for the help in answering questions to get it live. In case people are interested here are a few notes about the build:

Design

CC allowed me to create the design I wanted without getting in the way. The templates are great, very flexible. It allowed me to use CSS for layout, really making the site my own and not look like every other osCommerce/ZenCart/X-Cart store out there.

Semantic HTML/CSS

CubeCart really gets the templating part correct. That's what got me to use this cart versus any of the others, a nice separation between logic and view code. It allowed me to create nice clean, semantic front-end code that validates. The starting code is great and really makes it easy to incorporate your own HTML/CSS/JS.

Mods used

I'm using Estelle's all-in-one shipping mod as I needed flat rate shipping by zone. It is a great mod, very simple and effective. This is the only 3rd party mod I used, but I made many small mods myself. Read on for details.

Cart and Index templates are consistent

Some "boxes" are only available on index.tpl and not on cart.tpl, however, I wanted consistency. I added boxes for Categories/Mailing List/Session/Cart from the index template to the cart template. I did this for consistency, some pages use the cart template (e.g., order history) and I found it odd that modules were disappearing for "no reason".

To achieve this, I got a tip from "burgensteen" on the forums who pointed me to 'includes > global > cart.inc.php'. I simply added a few more includes below the the line ## START CONTENT BOXES to get the boxes I needed on the cart template. I believe this has been added to core as of 4.0.3.

Currencies are text links rather than a menu

This is purely a subjective thing, but since I was only going to use four currencies, I felt a list of links in the top navigation was more appropriate than a drop down menu.

This was relatively simple to achieve, mostly a change to the currency box template, but it did require one hack to a core file (currency.inc.php). So that the selected menu item used 'class = "selected" ' instead of ' selected = "selected" '. This appears twice in the file.

Currencies are rounded and padded

To prevent unsightly currency conversions ($71.32), I changed the currencies to zero decimal places via the admin tool. That way amounts show up as £44 or €52 or US$71 or whatever.

Because most people never get the spot currency exchange rate, I wanted to pad the currency conversion. A bit of background: Say you are billing in Australian Dollars and the end customer is using a credit card in USD, the transaction is converted by the credit card company. However, credit card companies love to make money so they often charge a "currency conversion fee" and usually don't use the spot exchange rate. Thus the end customer is likely to get screwed by a 3%+. He may think it will cost $71, but it might show up as $72.50.

To minimise the risk of this upsetting my customers, I tweaked the auto-update feature. I simply multiplied the rate that Yahoo! supplies by 1.03 which adds 3% to the exchange rate. Thus all amounts on the site are padded a bit so that customers are unlikely to be charged MORE if/when it hits their credit card.

Furthermore, CC4 uses fopen to connect to Yahoo. Unfortunately, this PHP feature has some security risks so many hosts disable this function (including mine), but despite my limited PHP skills I was able to convert it to use CURL. I sent my change to Devellion (and logged a ticket/bug) and it looks like this was incorporated in 4.0.3.

Removed the account navigation page

The default behaviour is for the link in {SESSION} called "Account" to go to a page that has just four links (orders, edit profile, edit subscriptions, change password).

I suspected that 90% of visits to the account area are for order history, so I made the "Account" link point there. I then added the other three links as navigation on that page.

Achieving this was simple, instead of the standard links:

/index.php?_a=login&redir=%2Findex.php%3F_a%3Daccount (when logged out)

/index.php?_a=account (when logged in)

I used:

/index.php?_a=login&redir=%2Findex.php%3F_a%3DviewOrders (when logged out)

/index.php?_g=co&_a=viewOrders (when logged in)

Extra SEO-friendly URLs

I used the SEO-friend url feature in CC4 (which is great, btw). I then used mod_rewrite to further map my clean URLs to the CC4 URLs.

http://oyemodern.com/index.php?_a=viewCat&catId=1

with SEO turned on, becomes:

http://oyemodern.com/new-arrivals/cat_1.html

with my .htaccess change becomes:

http://oyemodern.com/new-arrivals/

which is the cleanest of all.

I hard coded the nav to point at my super clean URLs.

Alternate product images swap in-place

Rather than use lightbox (which IS great) or the popup for alternate images, I rewrote the JavaScript to swap the master image when you rollover a thumbnail. You can see it action here:

http://www.oyemodern.com/rings/married-met...n/prod_123.html

I use the jQuery JS framework to do it, but it is doable in Prototype or regular JS.

Thumbnails

Unfortunately, CC only allows one thumbnail size. I'd really like two. The main image (for the product page), a medium size thumbnail on the category page, and a small one on the product page for alternate views. Right now, I'm just scaling the small thumbnail in the html via a width tag. It doesn't look great in IE, but too bad.

Options group name appears inside menu

I wanted to conserve screen real estate on the product page to ensure the photo is as large as possible. The labels and the menus for product options were taking up a lot of space. Rather than have:

Size

[ menu containing "large", "small" ]

Color

[ menu containing "blue", "red" ]

I tweaked viewProd.inc.php to allow {VAL_OPTS_NAME} to appear in the menu. Now I can have:

[ menu containing "size: large", "size: small" ]

[ menu containing "color: blue", "color: red" ]

What is an order?

I disagreed with one of the core design decisions of CubeCart in that an "order" is generated before the user pays. Thus, during a normal checkout a customer is likely to get THREE emails (registration, order placed, payment made). I did a lot of hacking to the system so now it looks to the user as an order is not generated until after payment is complete. I changed the emails around to preserve this illusion.

Emails

To make the above work, I had to do a lot to the CC's email code. Unfortunately, it was pretty tricky. But ultimately, I was able to make the payment received and order dispatched emails both have the order breakdown which was pretty cool. Plus, I added the courier tracking URL to the email which isn't there now (at least as of 4.0.3)

Print invoice

Unfortunately, the printed invoice doesn't use the same template approach as the site, so I had to really get my hands dirty on this one. No one can see it but me, but I was able to make a slick invoice using print CSS.

Taxes/GST

I did a lot of hacking to handle GST like I wanted. For example, on the invoice, cart, and emails. A GST message (all orders include 10% GST) appears only for orders to Australia. This looks like it might be addressed in 4.1, but that didn't exist when I needed it

Handling "designers"

Another area that is lacking in CC is a way to handle manufacturers/designers/brands/whatever. There are some mods for cc3, but in the end I was able to make a decent solution by making each designer its own category. I assign each product to both a category (i.e., rings) and a designer. I then created a site doc page that serves as the designers category page so I could use a different template. Not ideal because I need to hard code links on each item to the designer, but it works.

Gift wrapping

I'm not thrilled with how this turned out, but ultimately I decided to add a gift wrapping as a "product". On my cart template, I hard coded a link to this product as "Add gift wrapping". Through JS, I hide this link if giftwrapping has already been added to the cart page. Gift messages have to entered in the order comments field which isn't very nice.

The alternative was making it a product option, but adding that to every product was going to be too error prone, but that doesn't solve the gift message either. There is a third party mod for gift wrapping, which I may switch to. But it also doesn't handle gift messages.

------------

Anyway, if anybody has any questions, give me a shout. Thanks again to everyone. And especially, a bit thank you to Devellion to making a tool that is EXTREMELY easy to customise.

I've been critical of CC4 in a few places, notably the checkout flow and two step payment process, but in general it is a great package. The templating approach is freakin' brilliant.

Cheers,

p.

Link to comment
Share on other sites

Guest webicon

Lovely clean design.

My only feedback would be perhaps to have some graphic representation of payment methods taken/ssl cert. People dont read - they wont ind it on the customer service page...

Other than that fab job - one of the nicest I've seen :-)

Link to comment
Share on other sites

Guest philoye

Lovely clean design.

My only feedback would be perhaps to have some graphic representation of payment methods taken/ssl cert. People dont read - they wont ind it on the customer service page...

Other than that fab job - one of the nicest I've seen :-)

Thanks for the kind words.

The payment method graphics are on the cart page, next to the checkout button. Plus, the SSL cert graphic is also on the cart page, but towards the bottom.

I didn't think either were worth promoting more heavily, however, I'll think about it some more. Cheers.

Link to comment
Share on other sites

Guest hardnut33

Beautifull !!!!!

Clean, crisp and very clear....I love the look and feel of it.

If i was in the market for a nice bracelet i'd definitely buy one...

Link to comment
Share on other sites

Guest philoye

Beautifull !!!!!

Clean, crisp and very clear....I love the look and feel of it.

If i was in the market for a nice bracelet i'd definitely buy one...

Thanks!

Link to comment
Share on other sites

Guest philoye

Mods used

I'm using Estelle's all-in-one shipping mod as I needed flat rate shipping by zone. It is a great mod, very simple and effective. This is the only 3rd party mod I used, but I made many small mods myself. Read on for details.

Turns out that is a complete lie. I'm also using Estelle's Stock Levels for Product Options mod...

Link to comment
Share on other sites

  • 2 weeks later...
Guest philoye

Super clean :errm:

I'd buy there :)

I would actually like to list part of your products on my site.

Thanks for the kind words.

I'll pass the message on to the boss. :-)

By the way, what did you change in your .htaccess to go from

http://oyemodern.com/new-arrivals/cat_1.html

with my .htaccess change becomes:

http://oyemodern.com/new-arrivals/

which is the cleanest of all.

In my .htaccess file, below all the CC rules, I added.

RewriteRule ^new-arrivals/$ new-arrivals/cat_1.html [L,NC]

It requires that you've turned on SEO mode (htaccess method) in your v4 store. And obviously replace "cat_1" with the category number of the category you want to point to.

A word of warning, mod_rewrite gets pretty tricky and can pretty much completely break your site to take care. Google is your friend.

Link to comment
Share on other sites

Guest kufflinkz.com

Super clean :)

I'd buy there :)

I would actually like to list part of your products on my site.

Thanks for the kind words.

I'll pass the message on to the boss. :-)

By the way, what did you change in your .htaccess to go from

http://oyemodern.com/new-arrivals/cat_1.html

with my .htaccess change becomes:

http://oyemodern.com/new-arrivals/

which is the cleanest of all.

In my .htaccess file, below all the CC rules, I added.

RewriteRule ^new-arrivals/$ new-arrivals/cat_1.html [L,NC]

It requires that you've turned on SEO mode (htaccess method) in your v4 store. And obviously replace "cat_1" with the category number of the category you want to point to.

A word of warning, mod_rewrite gets pretty tricky and can pretty much completely break your site to take care. Google is your friend.

I tried that line in my site in my .htaccess file and it doesn't do anything at all(of course i used my own categories and category number) --- is there something else I can try? I'm .htaccess challenged! :)

Link to comment
Share on other sites

Guest gatonegra

WOW!!! very nice. just finished my site with Cubecart 3. Can appreciate the hard work you put into it.

Very nice indeed. Jewelry looks good also. Do i dare show this to my wife :) Good Luck!!

P.S. add you to my bookmark at stylehive.com

Bright

http://gatonegra.com

Link to comment
Share on other sites

Guest philoye

I tried that line in my site in my .htaccess file and it doesn't do anything at all(of course i used my own categories and category number) --- is there something else I can try? I'm .htaccess challenged! :)

Again, you must be using CC v4 and the SEO option (htaccess method). Assuming you are, then post what you have in your .htaccess file. And I'll do my best to help.

Link to comment
Share on other sites

Guest philoye

WOW!!! very nice. just finished my site with Cubecart 3. Can appreciate the hard work you put into it.

Very nice indeed. Jewelry looks good also. Do i dare show this to my wife :) Good Luck!!

P.S. add you to my bookmark at stylehive.com

Bright

http://gatonegra.com

Thanks! And yes, you should show your wife. :-)

Link to comment
Share on other sites

Guest philoye

want to offset some of the time you spent on it and sell me the template files. Would be an awesome starting point for my project :)

Sorry, the templates are not for sale. I do appreciate the offer (and the implied compliment). However, the cubecart templates are VERY EASY to customise. Plus, you'll learn more if you do it your self.

Link to comment
Share on other sites

Guest philoye

what theme did you use as your starting point ?

I think KitaBlue, but it doesn't really matter. The first thing I did was strip out all of the existing html from the templates and replace it with my own, leaving the CubeCart template tags. I ditched the original CSS file completely.

But I've been doing HTML/CSS/JS professionally for years, so that approach may not work for everyone.

Link to comment
Share on other sites

Guest tsxowner2b

what theme did you use as your starting point ?

I think KitaBlue, but it doesn't really matter. The first thing I did was strip out all of the existing html from the templates and replace it with my own, leaving the CubeCart template tags. I ditched the original CSS file completely.

But I've been doing HTML/CSS/JS professionally for years, so that approach may not work for everyone.

exactly :)

Link to comment
Share on other sites

  • 3 weeks later...
Guest Maclady

Hey Philoye - beautiful job on your site! Could you tell me approximately how many hours you spent modifying the KitaBlue template to get your end result?

Thanks so much...

Maclady

Link to comment
Share on other sites

Guest philoye

Hey Philoye - beautiful job on your site! Could you tell me approximately how many hours you spent modifying the KitaBlue template to get your end result?

Difficult to say. I would break it down into three pieces:

  1. Coding the standalone HTML/CSS templates (not integrated into CC)

  2. Customising the CC templates to implement my HTML/CSS for the visual presentation

  3. PHP and general hacking to get CubeCart to behave how I wanted to. This includes changing the order emails, overhausing order status, my currency converter changes, and some other pretty invasive stuff.

#1 probably took me five days to do the standalone HTML/CSS, which includes a fair amount of actual graphic design. To be clear, this has nothing to do with CubeCart, this is just standalone HTML/CSS.

#2 was very straight forward. Converting the CC templates to simply implement my HTML/CSS was probably only two or three days?

#3 Was significantly more effort but I'm not really sure how long it took, as it was spread out over eight weeks or so. I would guess 40 to 60 hours? This is purely a guess. Your mileage may vary -- I was a bleeding edge adopter of CC v4 (many bugs to find/workaround/wait for Devellion) and I was still learning my way around CC (I had never used CC v3).

So if you don't change how CubeCart works and you already have some solid HTML/CSS to work from, it is a couple of days.

As I've said, the CubeCart templating approach is great. You can easily remove ALL of the "design stuff" from the default templates and replace it with your own (assuming you know HTML/CSS). The fact that 95% of CC installations basically look the same has nothing to do with the tool itself.

I hope that helps,

p.

Link to comment
Share on other sites

Guest Maclady

I hope that helps,

p.

Thanks for the fast reply Phil - muchly appreciated. I had guessed approximately 40 hours plus, so I was in the ballpark. I'm betting the client won't go for that! LOL!

Cheers

Maclady

Link to comment
Share on other sites

Guest philoye

Thanks for the fast reply Phil - muchly appreciated. I had guessed approximately 40 hours plus, so I was in the ballpark. I'm betting the client won't go for that! LOL!

No worries. Ultimately, it all comes down to the design and how comfortable you are with HTML/CSS. If you know what you're doing and you aren't doing anything too crazy, I'm sure you could do it in less.

To address the larger question, on the one hand, I can see clients complaining when they get a multi-thousand dollar bill to build a store when the software that powers it costs $130. To me it is a no-brainer to spend a week to ensure the site isn't a cookie-cutter store. A good design makes good business sense and should pay for itself in short-order.

Good luck,

p.

Link to comment
Share on other sites

Guest Maclady

To me it is a no-brainer to spend a week to ensure the site isn't a cookie-cutter store. A good design makes good business sense and should pay for itself in short-order.

Ain't that the truth. Unfortunately someone just starting out usually has a small budget. This is the case with my client. The "look" is very important to her, but it's hard for non-technical people to understand this stuff. She had one guy who said he could do what she wants with Zen Cart (we all know how tough that cart is to customize... LOL!)

Anyways, thanks again for your answers. You do very nice work!

Cheers

Maclady

Link to comment
Share on other sites

Guest philoye

Ain't that the truth. Unfortunately someone just starting out usually has a small budget. This is the case with my client. The "look" is very important to her, but it's hard for non-technical people to understand this stuff. She had one guy who said he could do what she wants with Zen Cart (we all know how tough that cart is to customize... LOL!)

Thanks for the kind words, by the way.

Yeah, to be fair. My wife and I built the store for ourselves, so we were willing invest all kinds of time. I shudder to think what I would have charged to design/build/photograph/launch if I was doing it for a client.

p.

Link to comment
Share on other sites

Guest asafisk

Thanks for sharing that Phil,

I'm so glad to see others making use of the fact that this software is fully templated. And what a lovely job you have made of it! The jewellery is superb too.

Some pointers:

So you should probably know that to do gift wrapping myself I would have used a third party mod for adding optional extras (accessories) to the product page and another mod to allow for a text area option, using a touch of JS to and CSS to make the text area writeable only once the Gift Wrap checkbox has been selected. This way gift wrap could be set up as a single product. If this suits, of course.

See Goober's post on the unofficial cubecart forum regarding "Related Items and Accessories mod"

(Phew!, that took longer to describe than to code probably.)

I too am a seasoned client side developer so I hope the tech-talk is acceptable.

Similarly there is a 3rd Party mod to allow for two sets of categories to be displayed with the 'boxes'. This could be used for jewellery types and designers respectively. (may be you have seen it already)

See Convict's "Brands and Manufacturers" also on the unofficial forum

So there are a couple of suggestions for future development. Do you get rainy days down under? mmm...

Criticism

A small, but I hope constructive, criticism would be your use of Helvetica font. I'm using FireFox 2 and the fonts are not anti-aliased and look a bit crunchy. Not many Windows users will have all the Helvetica fonts installed, if any. So I'm not really sure what the answer is.

Personally I would consider setting the font to something that looks good in FF2, then include conditional statements in the <head> to serve additional style sheets to IE browsers, serving Helvetica to those with anti-aliasing.

Mac users will of course be fine with Helvetica. Its a shame because it is such a good font and looks lovely in graphics.

If you'd like a screen grab I can send one.

Also, I thought the print.css could do more to reduce the amount of irrelavant text, navigation and form elements passed to the printer.

But these are minor things in the grander scheme of things that is Oye.

For a first attempt, excellent. May be the next one will be in XHTML???

More Praise

So back to the positives, I especially like the overall cleanliness, modernness and neutral / light tones.

The product page and the forms are particularly nicely laid out.

Ok that's about it from me. If you like to see another example of custom cubecart design I have just added my client's site to the Show Off section (Cc4, Totally Customised Skin, Xhtml Strict Compliant). Also with a few mods to core code.

Cheers,

Asa

Link to comment
Share on other sites

Guest philoye

I'm so glad to see others making use of the fact that this software is fully templated. And what a lovely job you have made of it! The jewellery is superb too.

Thanks for the kind words!

So you should probably know that to do gift wrapping myself I would have used a third party mod for adding optional extras (accessories) to the product page and another mod to allow for a text area option, using a touch of JS to and CSS to make the text area writeable only once the Gift Wrap checkbox has been selected. This way gift wrap could be set up as a single product. If this suits, of course.

See Goober's post on the unofficial cubecart forum regarding "Related Items and Accessories mod"

I looked into that mod at the beginning, but I was more afraid of errors of omission. I would need to manually add the "accessory" to every product after adding, which is prone to error. There also was no text field mod when I was building my store.

However, I'll look at it again

I too am a seasoned client side developer so I hope the tech-talk is acceptable.

Similarly there is a 3rd Party mod to allow for two sets of categories to be displayed with the 'boxes'. This could be used for jewellery types and designers respectively. (may be you have seen it already)

See Convict's "Brands and Manufacturers" also on the unofficial forum

Again, that mod didn't exist (or it was only for v3) when I built the store. However, the solution I have for designers works for me. But again, I'll take a look to see if it'll streamline things.

A small, but I hope constructive, criticism would be your use of Helvetica font. I'm using FireFox 2 and the fonts are not anti-aliased and look a bit crunchy. Not many Windows users will have all the Helvetica fonts installed, if any. So I'm not really sure what the answer is.

Personally I would consider setting the font to something that looks good in FF2, then include conditional statements in the <head> to serve additional style sheets to IE browsers, serving Helvetica to those with anti-aliasing.

Mac users will of course be fine with Helvetica. Its a shame because it is such a good font and looks lovely in graphics.

If you'd like a screen grab I can send one.

That is a bit perplexing to me. I have extensively tested on windows (IE6/IE7/FF2) and Mac (FF2/Safari) and not seen this issue.

In CSS you declare a font stack, where the browser picks the first font that is available on the machine. I've declared the font as:

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;

Meaning, it goes in order from left to right until it finds one on the system.

I've never seen a problem with this before. Please do send a screengrab. Do you have ClearType enabled? Which version of FF? 2.0.0.11? Are you running with your font size on "normal" or have you decreased the font size in your browser? Which OS? XP/Visita/Mac/Linux?

There should be no need to use conditional comments to handle fonts.

Also, I thought the print.css could do more to reduce the amount of irrelavant text, navigation and form elements passed to the printer.

Yes, I haven't really done the print.css yet. The one is just a generic one that I use on all sites. But thanks for the reminder, I'll get on that.

But these are minor things in the grander scheme of things that is Oye.

For a first attempt, excellent. May be the next one will be in XHTML???

Just to be clear, while this is my first CubeCart site, I've build many other sites over the years.

And no, I don't do XHTML. I got off that bandwagon long ago. There are no benefits of XHTML and it is considered harmful. A proper HTML 4.01 doctype provides standards rendering.

So back to the positives, I especially like the overall cleanliness, modernness and neutral / light tones.

The product page and the forms are particularly nicely laid out.

Ok that's about it from me. If you like to see another example of custom cubecart design I have just added my client's site to the Show Off section (Cc4, Totally Customised Skin, Xhtml Strict Compliant). Also with a few mods to core code.

Thanks again for the kind words!

And I'll take a look at your site...

Cheers,

p.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...