A product website design and development

[Faun]

Yes never use hidden fields for posting critical data, as it can be manipulated.

Always code business logic in php code behind and not front end js.

Better add dual validations on server side and client side.

Yeah, doing final validations at server side.

Use Paypal's own code, IIRC they have a get request header.

Not able to find that. Will try at home.

 

[nbaztec]

Yeah, doing final validations at server side.



Not able to find that. Will try at home.

This one

 

[Faun]

^^it's at a standstill. I'll have to read it at a stretch, may be later.

Here some screenshots of a side project, client side and server side validation:
*farm9.staticflickr.com/8287/7597975566_10a2e075f1_o.png

*farm8.staticflickr.com/7114/7597975146_434cb69c44_o.png

 

[Faun]

So, I was bored today and instead of coding did some theming.

How it looks now ?
*farm9.staticflickr.com/8152/7609367866_ce8cc7f65b_o.png

*farm8.staticflickr.com/7251/7609368334_0729eae649_o.png

*farm8.staticflickr.com/7274/7609367020_2e3551f28e_o.png

*farm9.staticflickr.com/8292/7609368832_e907138193_o.png

*farm8.staticflickr.com/7272/7609421066_7e8515144a_o.png

 

[krishnandu.sarkar]

^^That's awesome

 

[Mario]

Looks very neat - bit boxy, especially when you have lots of text boxes (just being honest).. and the block letters in show cart don't look too good in the screenshot - may be because of the dimensions of the screenshot itself, not sure how it looks on the monitor.

 

[mrintech]

Very Nice

 

[Faun]

^^That's awesome

Yeah it look's much better and a lot more professional and polished now..

Very Nice

Thanks guys Glad that the theme is kind of good now.

Looks very neat - bit boxy, especially when you have lots of text boxes (just being honest).. and the block letters in show cart don't look too good in the screenshot - may be because of the dimensions of the screenshot itself, not sure how it looks on the monitor.

Yeah, text boxes looks cramped up. May be increasing line height will help or probably other option someone can suggest.

 

[Mario]

Yeah, text boxes looks cramped up. May be increasing line height will help or probably other option someone can suggest.

May be break it up into sections/sub-pages?
Or maybe expand/collapse a la xml?

 

[gopi_vbboy]

Use html5/CSS3/jquery

 

[Faun]

Added few more features. Will post screenshots later. Critiques and comments appreciated.

Here are the current development screenshots:

My Account page:
*farm9.staticflickr.com/8432/7774872424_cdd43d910f_o.png

Change Password:
*farm9.staticflickr.com/8425/7774870852_e144165c74_o.png

Address Management, half baked:
*farm9.staticflickr.com/8297/7774871614_68af1831ca_o.png

Adding another shipping Address:
*farm9.staticflickr.com/8303/7774870012_cb484078a2_o.png

Address Management with added shipping address:
*farm9.staticflickr.com/8304/7774869286_eb63dd3fd6_o.png

Cart with easy address selection, yet to implement quick selection of address:
*farm9.staticflickr.com/8421/7774868492_20b18fae94_o.png

Updated Order with current status in My Account page:
*farm9.staticflickr.com/8292/7774867564_2c854c78a0_o.png

 

[Faun]

Manage Orders Page
*farm8.staticflickr.com/7115/7790495336_5029499d5b_o.png

My Account Page
*farm9.staticflickr.com/8448/7790494768_bebfc27452_o.png

Show cart is now completely ajaxified.

 

[Mario]

Spoiler

*farm9.staticflickr.com/8421/7774868492_20b18fae94_o.png

Looks very nice. In the image quoted above, is it possible to align the lower edge of the box on the right with the lower edge of the one on the left?
Would probably look better that way?

Also make "Proceed to Pay" a button?

Finally, go uppercase to initcap? Somehow the uppercase words appear a little loud.

 

[Faun]

^^thanks

1. Because the height of columns is dependent upon number of shipping address saved by the person, I think it will take a bit more research to do that. Probably there should be a CSS solution, otherwise javascript solution should be there. Let me see if it work out fine. But it's priority is kind of low as of now since there are couple of more important features to be added. Thanks for pointing out.

2. Already made Proceed to Pay as a button. Also, my logic for check out is that. 1. User update the cart if necessary 2. User clicks on the address he want to ship the product (notice that second address is highlighted with white shadow and another visual cue is the pulsating effect on the selected address for a brief interval and a notification at the top header) 3. Proceed to Pay appear after that and final checkout can be done on clicking it
*h.dropcanvas.com/4199b/proceedtopay1.PNG

3, Will do that. I'll neeed to change the font as the current font is all caps. Can you suggest a good font.

 

[Mario]

The "glowing" address and the notifications are good ideas, but the notification is putting off the overall theme - probably because of its layout? Not sure where to put it exactly, but perhaps may be better placed?

Also, instead of "Shipping Address set to 3", will it be better to have "Shipping Address set to <City> - <Zip>"?

Finally, you really don't want my suggestions on fonts, colors, lines, basically anything to do with "design", "aesthetics", "beauty" etc....you get the drift! I could select colors and fonts on a website and make the predator in "Predator" appear handsome in contrast to my "design". Perhaps, nbaztec could help.





I checked Amazon and what fonts are these? Arial? They look ok to me.

Edit: Darn, the images don't show! How do you make attachments display as images! Or you cant?

 

[chethanr]

It has its own admin interface? just curious. One question. Why anyone need to build store from scratch than using tools like OpenCart.

 

[Mario]

It has its own admin interface? just curious. One question. Why anyone need to build store from scratch than using tools like OpenCart.

Its a build-and-learn exercise.

 

[Faun]

One question. Why anyone need to build store from scratch than using tools like OpenCart.

Because I feel that it gives more control and experience to build it from scratch.

Did some UI changes and backend change for order management:

*farm9.staticflickr.com/8425/7803671284_002afc4102_o.png

*farm9.staticflickr.com/8286/7803670530_5632b62c8c_o.png

*farm9.staticflickr.com/8283/7803669728_b8c070c1d8_o.png

*farm9.staticflickr.com/8306/7803669052_7b8b087d60_o.png

*farm8.staticflickr.com/7130/7803668444_1fd2e3754e_o.png

 

[Faun]

Blocked access to pages which are not to be visible to a guest without log in
*dropcanvas.com/files/1000000/52000/51872/big/redirect.PNG

Did some UI designing and here is the result for button anchors:
Button idle:
*dropcanvas.com/files/1000000/52000/51872/big/buttonidle.PNG

Button hover:
*dropcanvas.com/files/1000000/52000/51875/big/buttonhover.PNG

Button pressed
*dropcanvas.com/files/1000000/52000/51872/big/buttonpressed.PNG

Initially I went for glossy design but then this understated design looks better IMO.

 

[Faun]

Done with multiple image upload. Then setting the primary display image and deleting the ones the admin doesn't want using ajax. It was fun to do.

*s.dropcanvas.com/1000000/54000/53346/big/primaryimage.PNG