Jump to content






- - - - -

IP.Nexus Dev Update: Storefront

Posted by Mark, 25 May 2010 · 1,113 views

In our previous blog entry, we covered how to create packages in IP.Nexus. This blog entry will cover the storefront and ordering process for the products that you sell.


The Store

The front page of the store looks like this:
Attached Image

The front page allows users to view products items (you can configure which products are featured in the Admin CP) or the most popular (i.e. most sold) products.

Users can navigate the store using the category menu on the left. When you navigate into a category, it opens a tree with subcategories.
Attached Image

The bar on the left shows the products currently in your shopping cart, including any tax and discount costs.
Attached Image

As discussed in a previous blog entry, you can configure products to have custom fields or associations with other products. When adding these products, you will see a screen like this:
Attached Image


Viewing Your Cart

After adding an item, or by clicking the "Edit Cart" link the sidebar, you'll see a page like this:
Attached Image

As you can see, you can edit quantities for products which do not require custom fields by entering a new number in the box (or remove all of that product by clicking the remove link). For products which have custom fields, each item is listed individually, so you can remove the one you want.


Checkout Process

The checkout process is only available to registered members. If a guest clicks "Checkout" on the store, IP.Nexus will remember their cart and direct them to the registration screen. After registration is complete, when the user logs in, IP.Nexus will redirect them to the checkout page.

All steps of the checkout process have a cancel button that the user can use to cancel the purchase.

Clicking checkout from the cart screen, the user will be asked to enter their shipping address:
Attached Image
Of course, if the items the user is purchasing are not physical, or the user has already provided this information in a previous order, this step will be skipped.

Next, the user will be asked to select their shipping method:
Attached Image
The available shipping methods and shipping costs are calculated automatically based on what the user is purchasing. If the user purchases several items which have different available shipping options, more than one dropdown may be available.
Attached Image
In this case, IP.Nexus will automatically work out the minimum number of shipping orders to create based on the selections.
Again, if the items the user is purchasing are not physical, this step will be skipped.

The next page will show the user the total cost with shipping included and allow them to enter any coupon codes they have or apply account credit.
Attached Image
After selecting a payment method, the appropriate fields will automatically be shown:
Attached Image
Attached Image

After submitting, the user will either be taken back to the payment page if payment failed, or be shown a success page.
Attached Image

If you have configured IP.Nexus to hold all payments until you manually approve them, the success page will indicate this:
Attached Image

And of course if the user chooses to pay by a manual method (such as a check) they will be shown information how to pay:
Attached Image

Attached Thumbnails

  • Attached Image





If the credit-card option uses a credit card processor such as authorize.net or paypal payment pro, we would need to have the site have SSL?
It uses authorize.net which requires SSL, yes (we may add PayPal Pro in the future of course but at the moment, it's authorize.net).

There is a setting in the Admin CP to make just that page serve over https (much like the setting for the login page) if you don't want your entire site to be.
Very please to see a simple, clean layout with obvious buttons, so refreshing to see. very well done guys.

The only thing I'm not too keen on is the category menu, based on the screenshot, visually it isn't all that obvious which is top level (apart from using common sense which some lack) some kind of visual separator (be it bold, lines, background colour etc), or ajax extension when you click on a top level to reveal sub levels would be good, especially as you could end up with a very long category list pending number of products.

Very please to see a good use of the checkout system, along with the step by step meter along the top.

Really impressed :)
Looking great, I'd buy it "as is" if I could now. Just what I need.

When the user puts in their address etc, are those details saved automatically for future orders?

Oh, and I do have one issue.....

....I think your creased t-shirt for $5 is a major rip-off :thumbsup: :whistle:

Very please to see a simple, clean layout with obvious buttons, so refreshing to see. very well done guys.

The only thing I'm not too keen on is the category menu, based on the screenshot, visually it isn't all that obvious which is top level (apart from using common sense which some lack) some kind of visual separator (be it bold, lines, background colour etc), or ajax extension when you click on a top level to reveal sub levels would be good, especially as you could end up with a very long category list pending number of products.

Very please to see a good use of the checkout system, along with the step by step meter along the top.

Really impressed :)


Great to hear :D

For the category, it only actually shows the subcategories of the category you're in and the top level category.

For example, let's say I have a category tree like this:
- Men
- - Shirts
- - Pants
- - Shoes
- - - Trainers
- - - Dress Shoes
- Women
- - Dresses
- - Shoes

On the top level, it looks like this:
Posted Image

If I go into Mens:
Posted Image

Then if I go into Shoes:
Posted Image

Do you still think it needs more separation?

Looking great, I'd buy it "as is" if I could now. Just what I need.

When the user puts in their address etc, are those details saved automatically for future orders?

Oh, and I do have one issue.....

....I think your creased t-shirt for $5 is a major rip-off :thumbsup: :whistle:


Yes, address is saved for future and users can edit what is stored in the client area if you have that setting enabled (which is on by default).
Posted Image

Personally I'd agree with the spacing issue, it looks a bit odd to the eye. I personally think it would look better with a spacing character, i.e a hyphen etc

Men
- Shirts
- Pants
- Shoes
--- Trainers
--- Dress Shoes

Womens
Yeah the category menu does need a little update. We'll improve that :)
Looking great Mark.

I really like the checkout process. Can I suggest perhaps adding arrows to each step. for example -

Posted Image

Other than that I think the simple layout will be great for anyone trying to skin nexus.
Looks really great..

re categories - I think it would nicer if

if you had say (the numbers show items in that category or below)

Mens (45)
Womens (75)

Click on Mens and you would get

Shirts (10)
Pants (20)
Shoes (15)

The along the top you would see

You are in: Home >> Men's

So clicking on Men's in the breadcrumbs would take you back.

So rather than seeing a full tree you only see the section you are interested in.

With a lot of categories a tree could become unwieldy rather than neat and tidy, and would allow for multiple categories and sub-categories.

With say 100 categories a tree will be hard to navigate.

Clicking checkout from the cart screen, the user will be asked to enter their shipping address:


Of course, if the items the user is purchasing are not physical, or the user has already provided this information in a previous order, this step will be skipped.

What if a user has moved? What if they're ordering a gift to be sent to a different person? Rather than skip this step, wouldn't it be wiser just to ask them to verify the shipping address, and if it has changed to update it?
You mention that the bar on the left shows the shopping cart. In the first screenshot, the shopping cart box is on the right. :lol:


Posted Image

Along with showing numbers (as .Ian points out), I think bolding the category names and condensing the spacing would help...

Posted Image
I'm a bit confused about the last screenshot.
"Please send make checks payable.." ??

Also, you mention a transaction ID to write on the check, where is that ID shown??

Regarding categories, I'd say it definitely needs some kind of symbol to show the ones you're able to drop down and the ones you have already dropped down. Like the arrows on this picture:
Posted Image

Regarding categories, I'd say it definitely needs some kind of symbol to show the ones you're able to drop down and the ones you have already dropped down. Like the arrows on this picture:

When you click on one of the categories to view what's in there, I would imagine that as it does that, it will also expand that category to show subcategories as well. Not like using Windows Explorer, where you can open up folders and subfolders by clicking the [+] (or arrow as in W7) next to the folders.

I'm a bit confused about the last screenshot.
"Please send make checks payable.." ??

Also, you mention a transaction ID to write on the check, where is that ID shown??

Regarding categories, I'd say it definitely needs some kind of symbol to show the ones you're able to drop down and the ones you have already dropped down. Like the arrows on this picture:
Posted Image


That was a typo on my behalf, the message is configurable, and you can display the transaction ID in that message.
Would it be possible for people to purchase items when they are not logged into the forum? Could that be something we could change/modify after we download it?
impressed.

Nice work. looking forward to seeing a finished product.

do we get a free shirt if we purchase IP.Nexus?

Would it be possible for people to purchase items when they are not logged into the forum? Could that be something we could change/modify after we download it?


Due to the different options available (for example, you can have it automatically move users into a different usergroup after purchase) they do need to have an account. If a guest tries to purchase, they will be asked to register, and once registered, be taken back to the checkout process where they left off.
Hi,

Its actually really difficult thinking of ways to create a navigation menu.

Here's my suggestion:

Posted Image

Posted Image

Bold the opened categories (like footwear and whichever subcategory the person is in, if any) and add inventory counts after each and it's got my vote.
I'd just increase the indentation and bold the current category, that should suffice to make things stand out more without detracting from the simplicity of the design.

May 2013

S M T W T F S
   1234
567891011
12131415161718
1920212223 24 25
262728293031 

Recent Entries

Latest Visitors

Search My Blog