Jump to content
Mark
 Share


IP.Nexus Dev Update: Storefront

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:


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.


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


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:



Viewing Your Cart

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


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:

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:

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.

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.

After selecting a payment method, the appropriate fields will automatically be shown:



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


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


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:

 Share

Comments

Recommended Comments



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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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:

Link to comment
Share on other sites

[quote name='JimDut' date='25 May 2010 - 10:56 AM']
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:


If I go into Mens:


Then if I go into Shoes:


Do you still think it needs more separation?

[quote name='seax' date='25 May 2010 - 11:07 AM']
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).

Link to comment
Share on other sites

20100525-ke9s4ex472fy37jyu4ap5iwfni.jpg

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

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




Link to comment
Share on other sites

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:


20100525-ke9s4ex472fy37jyu4ap5iwfni.jpg

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

gallery_49404_1322_2706.png

Link to comment
Share on other sites

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:
9-css-menu-copy-files.jpg

Link to comment
Share on other sites

[quote name='Tanax' date='25 May 2010 - 10:58 AM']
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:

Link to comment
Share on other sites

[quote name='Tanax' date='25 May 2010 - 03:58 PM']
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:



That was a typo on my behalf, the message is configurable, and you can display the transaction ID in that message.

Link to comment
Share on other sites

[quote name='Abomination' date='25 May 2010 - 11:19 PM']
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.

Link to comment
Share on other sites

[quote name='JimDut' date='26 May 2010 - 05:42 AM']
shopmenu.png

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.

Link to comment
Share on other sites

Does it have an option for mailing address and address where purchase will be sent? Because a person might purchase a product for a friend and want that product to be mailed directly to their friend instead of to them.

Link to comment
Share on other sites

I think the 'Red' and 'Yellow' T-Shirts in the cart should be separate, this way it would be easy to change the quantity of each, not to mention that's how a lot of other e-commerce platforms do it.

Link to comment
Share on other sites

[quote name='Nick²' date='26 May 2010 - 08:04 PM']
I think the 'Red' and 'Yellow' T-Shirts in the cart should be separate, this way it would be easy to change the quantity of each, not to mention that's how a lot of other e-commerce platforms do it.

It's an example of what you can do with it, nothing saying that you must do it the same way. You could have each shirt listed separately based on size, color, etc.

Link to comment
Share on other sites

[quote name='Mark' date='26 May 2010 - 12:04 AM']
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.

Understood about the changing of account privileges. :thumbsup:

We sell physical items that need to be shipped. At this time 1/3 of my current customers are not members and have no interest in becoming members. Some specifically want to remain anonymous and do not want screen name associated with real name. Currently we are using paypal buttons and unless they specify their screen name, I've no idea what member they may be.

For example an important person in our industry gets product shipped to their workplace, but still want to remain anonymous on the forum.

Link to comment
Share on other sites

[quote name='Abomination' date='27 May 2010 - 12:56 PM']
Understood about the changing of account privileges. :thumbsup:

We sell physical items that need to be shipped. At this time 1/3 of my current customers are not members and have no interest in becoming members. Some specifically want to remain anonymous and do not want screen name associated with real name. Currently we are using paypal buttons and unless they specify their screen name, I've no idea what member they may be.

For example an important person in our industry gets product shipped to their workplace, but still want to remain anonymous on the forum.

Just have the default group hidden from the member list. Of course, they could always pick a display name that no one would guess is them. :)

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.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   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.

Loading...

×
×
  • Create New...