Have a look ...

Post your AbleCommerce store for review by other forums members.
>> Please review requests by fellow users to critique their sites, in the process you have the opportunity to learn how someone else is using AbleCommerce.
Post Reply
sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Have a look ...

Post by sk8conz » Tue Sep 06, 2005 9:35 pm

Almost finished my new site, checkout isn't finished and a few other small things, but 99% is done.

Take a look at:- http://207.176.137.84/index.aspx

Also http://207.176.137.84/RBK-8K-Helmet-P4146C0.aspx which shows off the multiple product images that the site can display.

Any comments welcome.

Darrin

User avatar
NC Software
AbleCommerce Partner
AbleCommerce Partner
Posts: 4620
Joined: Mon Sep 13, 2004 6:06 pm
Contact:

Post by NC Software » Tue Sep 06, 2005 9:43 pm

Looks great Darrin.

A few nitpicks I saw:

1) Login page needs some layout attention and your logo is showing a link border

2) The font color in the specials as well as the sub-total in "My Basket" on the home page is hard to see (lime).

3) I like your system for multiple images, well done

Didn't check the checkout work-flow yet
Neal Culiner
NC Software, Inc.

User avatar
gjaros
AbleCommerce Partner
AbleCommerce Partner
Posts: 1717
Joined: Tue Feb 24, 2004 2:20 pm
Location: Illinois
Contact:

Post by gjaros » Wed Sep 07, 2005 12:51 am

I agree with Neal. The site looks real nice, with the exceptions of the login page and the lime text.

Also the shipmeth page didn't return any shipping methods for me, preventing me from continuing the checkout process.

And also, maybe add a vertical-align:bottom; style to your td.ProductListing class. That will make sure all the Buy Now buttons are aligned on pages like your specials page.

Looking good though...
Image
Image

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Wed Sep 07, 2005 8:34 am

NC Software wrote:Looks great Darrin.

A few nitpicks I saw:

1) Login page needs some layout attention and your logo is showing a link border

2) The font color in the specials as well as the sub-total in "My Basket" on the home page is hard to see (lime).

3) I like your system for multiple images, well done

Didn't check the checkout work-flow yet
Thanks for the quick feedback :)

1) Login page - fixed, I hadn't applied the correct theme to it.

2) The green font is a deliberate design choice, as I feel it focuses attention to the current "special" price. MSRP, and previous prices are in green, but the "hot" price is in red.

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Wed Sep 07, 2005 8:38 am

gjaros wrote:I agree with Neal. The site looks real nice, with the exceptions of the login page and the lime text.

Also the shipmeth page didn't return any shipping methods for me, preventing me from continuing the checkout process.

And also, maybe add a vertical-align:bottom; style to your td.ProductListing class. That will make sure all the Buy Now buttons are aligned on pages like your specials page.

Looking good though...
Also thanks for the valueable reply :D

Checkout isn't finished, and as we are based in New Zealand, didn't give you a ship option as I assume you entered a US address.

I'll have a play with the vertical align. It would be a nice "finishing" touch.

Darrin

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Post by jmestep » Wed Sep 07, 2005 7:29 pm

Very nice. I know you've been working hard on it. Quite a change in color from your old site, but very professional looking. Only thing I had trouble with was the light green on the links, like in the What's hot section.

User avatar
NC Software
AbleCommerce Partner
AbleCommerce Partner
Posts: 4620
Joined: Mon Sep 13, 2004 6:06 pm
Contact:

Re: Have a look ...

Post by NC Software » Mon Sep 12, 2005 9:51 pm

sk8conz wrote:Almost finished my new site, checkout isn't finished and a few other small things, but 99% is done.

Take a look at:- http://207.176.137.84/index.aspx

Also http://207.176.137.84/RBK-8K-Helmet-P4146C0.aspx which shows off the multiple product images that the site can display.

Any comments welcome.

Darrin
Hi Darrin,

I'd like to implement as system such as you did. Care to share your code and how you went about your multiple image system? I understand the javascript, I'm just curious your image storage and retrieval system (code)
Neal Culiner
NC Software, Inc.

buffjungle
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 44
Joined: Mon Aug 22, 2005 1:21 pm

Post by buffjungle » Tue Sep 13, 2005 12:49 pm

Darin,
How were you able to add extra images of your product? I have been trying to do that for awhile now.

Pete

User avatar
NC Software
AbleCommerce Partner
AbleCommerce Partner
Posts: 4620
Joined: Mon Sep 13, 2004 6:06 pm
Contact:

Post by NC Software » Tue Sep 13, 2005 12:51 pm

I implemented this last night, I use the custom fields to save the image info, then check for it in code and add a table below the image with javascript onClick code. Not hard to do at all. You just have to know a little VB to iterate the custom fields, and I believe there is sample code on this forum already for such.
Neal Culiner
NC Software, Inc.

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Post by jmestep » Tue Sep 13, 2005 6:22 pm

buffjungle,
Are you talking about the ones where he shows a row of thumbnails and the main image changes? I viewed the source on his page and was able to duplicate it using that code. I didn't think he would mind, since he's give us other code. Here's what you need to do:

In the line where you are showing your main product image add
name=mainImage, like the following:
Response.write("<img src=""" & objProduct.Image2 & """ alt=""" & objProduct.name & """ name=mainImage>")

After the body tag add

<SCRIPT language=javascript type=text/javascript>
function changeImage(picimage) {document['mainImage'].src=picimage; }
</SCRIPT>

Then adapt this code and put in in your description field:


<TR><TD align = "center" width = 370><font color ="CCE377"><b>CLICK BELOW FOR ADDITIONAL VIEWS</b></font></TD><TD>&nbsp;&nbsp</TD></TR><tr><td colspan="2"><table width = "100%"<tbody><tr><td><span class="image_bdr"><a href="javascript:changeImage('http://www.sk8.co.nz/images/ice/helmet-rbk.jpg')"><IMG height=100 alt="" vspace=5 hspace=5 src="images/ice/helmet-rbk-t1.jpg" width=100 border=0></A></SPAN><span class="image_bdr"><a href="javascript:changeImage('http://www.sk8.co.nz/images/ice/helmet-rbk-front-p2.jpg')"><IMG height=100 alt="" vspace=5 hspace=5 src="images/ice/helmet-rbk-front-t2.jpg" width=100 border=0></A></SPAN><span class="image_bdr"><a href="javascript:changeImage('http://www.sk8.co.nz/images/ice/helmet-rbk-back-p3.jpg')"><IMG height=100 alt="" vspace=5 hspace=5 src="images/ice/helmet-rbk-back-t3.jpg" width=100 border=0></A></SPAN><span class="image_bdr"><a href="javascript:changeImage('http://www.sk8.co.nz/images/ice/helmet- ... ide-p4.jpg')"><IMG height=100 alt="" vspace=5 hspace=5 src="images/ice/helmet-rbk-inside-t4.jpg" width=100 border=0></A></SPAN><span class="image_bdr"><a href="javascript:changeImage('http://www.sk8.co.nz/images/ice/helmet-rbk-blkblk.jpg')"><IMG height=100 alt="" vspace=5 hspace=5 src="images/ice/helmet-rbk-blkblk-t1.jpg" width=100 border=0></A></SPAN></TD></TR></TBODY></TABLE></TD></TR>

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Tue Sep 13, 2005 11:19 pm

NC Software wrote:I implemented this last night, I use the custom fields to save the image info, then check for it in code and add a table below the image with javascript onClick code. Not hard to do at all. You just have to know a little VB to iterate the custom fields, and I believe there is sample code on this forum already for such.

Yup that's pretty much how it works. It checks for extra image fields in the database, and generates a table with 1 to 5 boxes. This gives flexibility to have a differing number of images.

I'm not a fan of scaling images dynamically, so I store a thumbnail (100 X 100px) and a full size (350 X 350). The javascript simply switches between them.

The block of code that does the work is as follows:-

<%
'display primary thumbnail - but only if there are other images
'added dg mar 05
Dim thumbone as string = objProduct.getCustomFields().Item("Thumb1")
Dim thumbtwo as string = objProduct.getCustomFields().Item("Thumb2")
Dim thumbthree as string = objProduct.getCustomFields().Item("Thumb3")
Dim thumbfour as string = objProduct.getCustomFields().Item("Thumb4")
Dim thumbfive as string = objProduct.getCustomFields().Item("Thumb5")

If Len (thumbtwo) > 0 or Len (thumbthree) > 0 or Len (thumbfour) > 0 or Len (thumbfive) > 0 then
Response.Write( "<TR><TD align = ""center"" width = 370><font color =""CCE377""><b>CLICK BELOW FOR ADDITIONAL VIEWS</b></font></TD><TD>&nbsp;&nbsp</TD></TR>" )
Response.Write( "<tr><td colspan=""2""><table width = ""100%""<tbody><tr><td>" )

' can use thumbone instead of standard thumbnail to prevent image loss on scaling
If Len (thumbone) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.Image2 & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbone & """ width=100 border=0></A></SPAN>" )
Else
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.Image2 & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & objProduct.Image1 & """ width=100 border=0></A></SPAN>" )
End If

If Len (thumbtwo) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture2") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbtwo & """ width=100 border=0></A></SPAN>" )
End If

If Len (thumbthree) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture3") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbthree & """ width=100 border=0></A></SPAN>" )
End If

If Len (thumbfour) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture4") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbfour & """ width=100 border=0></A></SPAN>" )
End If

If Len (thumbfive) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture5") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbfive & """ width=100 border=0></A></SPAN>" )
End If

Response.Write("</TD></TR></TBODY></TABLE></TD></TR>")

Else 'put in a blank line for cosmetics :)
Response.Write( "<TR><TD colspan =""2""><STRONG>&nbsp &nbsp</STRONG></TD></TR>" )
End If
%>


And a small javascript script needed to flip between thumbnails and large pictures.

<SCRIPT language=javascript type=text/javascript>
function changeImage(picimage) {document['mainImage'].src=picimage; }
</SCRIPT>


I think the code is pretty straight forward.

a) Check if there is a thumbnail (checks for fields Thumb1 - Thumb5).

b) If field exists, then get it and the corresponding full size picture (picture 1 - Picture 5).

Yes I could have (and probably should have) done it in a loop, but if it ain't broken, why fix it :)

Fields Thumb1 - Thumb5 and Picture1 - Picture5 are added as custom fields in the product admin pages. Eventually I might mod the code to generate them automatically, but for now it works fine.

Whilst you can use any names, I found it simplier to use the same filename and add suffixes.

eg.

Product.jpg full size picture (350 X 350 for me)
Product-s.jpg Thumbnail for browsing (150 X 150 in my case)
Product-T2.jpg Thumbnail 2 (100 X 100)
Product-P2.jpg Picture 2 (350 X 350)
etc
etc
Product-T5
Product-P5

Hope this helps someone, as displaying multiple images seems to get asked a lot in these forums.

Darrin

User avatar
Redcell
Commander (CMDR)
Commander (CMDR)
Posts: 174
Joined: Thu Aug 12, 2004 12:52 am
Contact:

Post by Redcell » Fri Sep 23, 2005 7:17 pm

Site looks great! Can I ask how you were able to get your right nav to have rounded corrners? I have been beating my head against the wall trying to do this! Also how did you get the whole site to show up in the center of the page??? The site really does look awsome! Thanks!

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Fri Sep 23, 2005 9:18 pm

Glad you like the site :)

The rounded corners are done with a neat Javascript add on called nifty corners. It actually draws them on the fly, unlike the standard trick of adding an extra row and column to the outside of the table and placing a rounded corner gif file.

Nifty corners works great in IE, Netscape and Firefox, but even though the authors pages also work well in Opera I haven't got my site to look 100%. It still works, but just isn't as pretty as it could be. Still Opera is a very minor player, so no big deal.

Nifty corners can be found at :-

http://pro.html.it/articoli/id_599/idca ... 1/pag.html


To make things centre, you need code like the following in all pages.

<div align="center" >
<table class="Main" cellspacing="0" border = "0" align = "center">

It is important to have the div and table center as it means it will work in both IE and Netscape/Firefox/Opera.

Hope this helps

Darrin

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Fri Sep 23, 2005 9:20 pm

Website is now "live" at http://www.sk8.co.nz

User avatar
NC Software
AbleCommerce Partner
AbleCommerce Partner
Posts: 4620
Joined: Mon Sep 13, 2004 6:06 pm
Contact:

Post by NC Software » Fri Sep 23, 2005 9:31 pm

Congratz! I suggest submitting it to TopSites (topsites.ablecommerce.com) as it is worthy of listing. You did a great job!
Neal Culiner
NC Software, Inc.

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Wed Sep 28, 2005 12:22 am

NC Software wrote:Congratz! I suggest submitting it to TopSites (topsites.ablecommerce.com) as it is worthy of listing. You did a great job!
Thanks Neal,

I've been looking around your site and would like to know how you did the scrolling image bar on:- http://secure.nc-software.com/Route-Bro ... 37C14.aspx

I assume it's along the same lines as my multi image page, just pulling certian field from the DB and using some javascript for the effect ?

Also curious about the the quantity up/down arrows on all pages.

It is a nice touch.

Darrin

User avatar
NC Software
AbleCommerce Partner
AbleCommerce Partner
Posts: 4620
Joined: Mon Sep 13, 2004 6:06 pm
Contact:

Post by NC Software » Wed Sep 28, 2005 12:32 am

You expect me to give away all my secrets ehh? :)

LOL

Image system uses ComponentArt Web.UI v3's TAB control and CallBack (AJAX) component:

http://www.componentart.com/demos/callb ... Form1.aspx

Up/Down arrows are from http://www.metabuilders.com (FREE)
Neal Culiner
NC Software, Inc.

User avatar
Redcell
Commander (CMDR)
Commander (CMDR)
Posts: 174
Joined: Thu Aug 12, 2004 12:52 am
Contact:

Post by Redcell » Thu Sep 29, 2005 4:31 pm

Hey sk8conz,

I put the code you gave me into the top of every page, but it didnt center the pages like product.aspx, category.aspx, etc.??? Am I still doing something wrong? Here is an example: http://www.tippmannpros.com/Paintball-P ... s-C33.aspx
If you notice the page looks like its still to the right...
Thanks!

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Thu Sep 29, 2005 7:29 pm

Redcell wrote:Hey sk8conz,

I put the code you gave me into the top of every page, but it didnt center the pages like product.aspx, category.aspx, etc.??? Am I still doing something wrong? Here is an example: http://www.tippmannpros.com/Paintball-P ... s-C33.aspx
If you notice the page looks like its still to the right...
Thanks!
Hi

The page works fine for me in ie, Netscape and Opera. I guess you did something wrong and have since fixed it ? or you have the old page cached in your browser. Hit ctrl-F5 to force a new load.

sk8conz
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Jan 10, 2005 8:52 am
Location: New Zealand
Contact:

Post by sk8conz » Thu Sep 29, 2005 7:31 pm

NC Software wrote:You expect me to give away all my secrets ehh? :)

LOL
Only the good secrets :)

Thanks for the links.

Post Reply