Something Cool with AbleCommerce

[heinscott]

Hello.
This is just a note to kind of "show off" some of the cool things we were able to implement with our AbleCommerce package. For the last few months, we've been hard at work creating content, and functionality for a step-by-step "Pool Builder", that would take an online customer through the process of assembling and building an above-ground pool kit. Most of the what you can see in the builder we were able to implement without extending core AC, utilizing custom fields to hold extra data, and normal category and product node structure to determine what items should be available at any given step.
Here is the URL for the opening page of our "Standard" above ground pools.
http://www.poolgeek.com/Standard-Above- ... -C820.aspx
If any of you have the time and inclination, please give it a test drive and let me know what you think.
Thanks to everyone in the forums that have helped me with all of my numerous issues, and helped us get this all working. Thanks also to AbleCommerce, too, for providing a great package that was easy build upon.

Scott

[compunerdy]

That is very cool.

[jmestep]

That is very nice!

[William M]

Very nice. Reminds me of the computer builder at Dell. i just built a laptop...

Very nicely done. I'm getting ready to pull the trigger for a re-do of my site in AC. This one's going in my 'examples' bookmarks.

[calvis]

I like the order flow.

The only thing I would change is for the user to have the ability to click on the picture to travel back to the cross sell category instead of having to go backwards.

[dappy2]

That is really cool.

I think the single biggest thing that is going to help your users is to properly implement the "radiobutton / label" functionality. Since rolling over the various options changes the pictures, I want to be able to click on the text to select an option when I see the one I want. Unfortunately you need to click on the actual radio button which can be frustrating. I see you have the label rendering in the code but it isn't wrapping anything.

Perhaps change your <div> wrappers to <span>'s then wrap the <label></label> around the span. (I don't think a <div> wrapped with a label is very W3C compliant.)

Overall that is pretty awesome!

Dappy

[nickc]

Alas, my user agent is too long to view this page: viewtopic.php?f=47&t=9684
Nice work.
Oh yeah - I *really* want to click on the icons across the bottom of the form

[William M]

I like the order flow.

The only thing I would change is for the user to have the ability to click on the picture to travel back to the cross sell category instead of having to go backwards.

Agreed. I clicked on the images at the bottom first.

[heinscott]

Hey, thanks for the reviews! As far as the step pictures on the bottom, they were originally clickable. The only problem with that, however, was that steps that required previous steps to determine what should be available might be unable to function correctly. For instance, if someone selects a certain pool size, goes through the process, and then decides to go back and choose a new size pool, everything would have to be taken out of the temp cart in case some of the options were size based options. We thought this might be confusing for a lot of users. I think we could probably figure out a better way to work that in, however.
As far as clicking on the text of an option to select it... I know that it is the default behavior in IE, but, Firefox doesn't seem to like it. Is anyone familiar with how to have the click on a label of a radio button actually select the option?
Thanks again everyone.

Scott

[mazhar]

Hi Scott great work! I have noticed one thing there is some z-index problem with Installation video and horizontal navigation menu on your posted page. I am using FF3.

[jmestep]

You might try a search on google for .net image radio button or similar. One of the guys at work found a way to show an image in place of a radio button, so something similar might work. I just don't have the code that he found.

[mazhar]

It may be helpful
viewtopic.php?f=44&t=9510

[heinscott]

Thanks Mazhar, I appreciate the help! You're right, I didn't even notice that particular issue. I'll start re-working my z-indexes and see if I can fix it (quick, before my boss notices!). Ahh... I just got the update too. Yes, that post should fix everything! Thanks!!!!
Thanks Judy, too for the info. I'll google around a bit and see what I can find.

Scott

[dappy2]

I know that it is the default behavior in IE, but, Firefox doesn't seem to like it. Is anyone familiar with how to have the click on a label of a radio button actually select the option?

The problem is with the way the code is rendered. IE is accepting the incorrect use/syntax of the <label> tag.
This rendered code:

Code: Select all

<tr>
<td>
<input id="ctl00_wpm_ShowProduct_ctl03_ProductOptionDD_1" type="radio" onclick="ChangeStuff('Assets/ProductImages/operaSTR-2t.jpg'); SetStuff();" value="974" name="ctl00$wpm$ShowProduct$ctl03$ProductOptionDD"/>

<!-- Here is your label tag - it is wrong-->
<label for="ctl00_wpm_ShowProduct_ctl03_ProductOptionDD_1"/>

<div class="HighlightOption" onmouseover="ChangeStuff('Assets/ProductImages/operaSTR-2t.jpg')">
52 Inch Depth - 24 ft Round -
<span style="color: red;">$1,519.44</span>
-
<a class="MoreInfoText" href="ProductData.aspx?ProductId=4152" title="More Information" rel="shadowbox;width=775;height=395">More Info</a>
</div>
</td>
</tr>

Needs to look like this:

Code: Select all

<tr>
<td>
<input id="ctl00_wpm_ShowProduct_ctl03_ProductOptionDD_1" type="radio" onclick="ChangeStuff('Assets/ProductImages/operaSTR-2t.jpg'); SetStuff();" value="974" name="ctl00$wpm$ShowProduct$ctl03$ProductOptionDD"/>

<div class="HighlightOption" onmouseover="ChangeStuff('Assets/ProductImages/operaSTR-2t.jpg')">

<!-- Here is the label tag - inside the <div> wrapping the text -->
<label for="ctl00_wpm_ShowProduct_ctl03_ProductOptionDD_1">
52 Inch Depth - 24 ft Round -
<span style="color: red;">$1,519.44</span></label>
<!-- End -->

-
<a class="MoreInfoText" href="ProductData.aspx?ProductId=4152" title="More Information" rel="shadowbox;width=775;height=395">More Info</a>
</div>
</td>
</tr>

Notice where the label tag is - and actually in what is rendered right now - that isn't a proper <label> tag. A label tag is supposed to wrap around some text. The default <asp:RadioButtonList> (or whatever it is) actually renders proper HTML to allow the user to click on the text (label) to select a radio button. I suspect that your customizations to how that renders may have broke that?

For your icons at the bottom - maybe you could fade out the buttons that people can't click on - or make them less like icons and more like a "you are here in the process" type of thing?

Dappy

[kastnerd]

In the steps that have check boxes it always have the "skip this step" radio button marked. Im not sure how it would be better. But it did work vary well.

[heinscott]

Thanks for the info here too, Dappy.
The reason that I chose to embed the <div> inside of the Label tags is, simply, because I couldn't figure out another way to get my roll-over (and roll-out) behaviors to work correctly any other way. Because I am adding my options from code, and needed to have the clickable "More Info" links inside of the option text, I had the hardest time in the world getting everything to wrap correctly (when really long options exist), have the highlight take up the entire width, make the default (or last selected) pic appear on roll-off (due to event bubbling, rolling off of a table cell would trigger a roll-out event for the table as a whole), have the links in the option. Basically the only way I could come up with to handle all these issues was to write code and stick it into the Text property of the dynamic option.
What a nightmare!
I think, though, the options being selected or not by clicking the text is a firefox thing. Both the HP and Dell computer builder radio options function in the same manner.