Shipping Drop Down to Radio List

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
User avatar
William_firefold
Commander (CMDR)
Commander (CMDR)
Posts: 186
Joined: Fri Aug 01, 2008 8:38 am

Shipping Drop Down to Radio List

Post by William_firefold » Wed Oct 15, 2008 1:01 pm

Our customers seem to be having problems when choosing their shipping.
On OnePageCheckout we need to convert the drop down list to a list of radio buttons.
We think that we can use the Shipping Selector from ShipMethodPage.ascx but because of the complexity of Onepagecheckout, I have been unable to port the code over.
Can I get some help finding a safe way to do change it?

For clarity: Left is what we have, right is what we want.
Image

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

Re: Shipping Drop Down to Radio List

Post by compunerdy » Wed Oct 15, 2008 1:24 pm

I tried this before as well. I got it to display the radio list but the code wasnt correct to make it work. I would really like to see this get done as well.

User avatar
draneb
Captain (CAPT)
Captain (CAPT)
Posts: 314
Joined: Sun Jun 12, 2005 4:07 pm
Location: Texas
Contact:

Re: Shipping Drop Down to Radio List

Post by draneb » Wed Oct 15, 2008 1:58 pm

The exact same thing I was wanting to do and posted about this morning.

If you have the ship to multiple addresses enabled you probably have seen that you have a layout of the shipping methods which looks similar to this:
Image

On the One Page Checkout, I am assuming in order to save space, the shipping methods are all included in a drop down menu and the instructions box is a single line.

I don't offer very many shipping options so it doesn't save that much space for me and I like the look, and the countown character box, in the example above. I would like to replace the pulldown menu and single instructions line to the same look as in the picture above.

I am not a programmer and not all that good at reading code either. I found the code for the radio button list of shipping methods in ShipMethodPage.ascx and ShipMethodPage.ascx.cs. I would like to implement that into the OnePageCheckout.ascx and OnePageCheckout.ascx.cs pages.

If someone who knows what they are doing would like the same look would you please post the code? Copying the code from the ShipMethodPage.ascx to OnePageCheckout.ascx is relatively simple but it is the .cs page which is giving me fits.

Thank you very much in advance.
Last edited by draneb on Wed Oct 15, 2008 3:22 pm, edited 1 time in total.
AC 7.0.3 build 13937

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

Re: Shipping Drop Down to Radio List

Post by jmestep » Wed Oct 15, 2008 2:42 pm

I looked at it briefly for draneb, but it was more involved than just a quick change, especially putting the countdown on the text box. I'm hoping to take a whack at it this weekend.
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Shipping Drop Down to Radio List

Post by Robbie@FireFold » Wed Oct 15, 2008 3:09 pm

Sounds good. Our customers have a seriously hard time looking at this box.

Not because it doesn't support it.. I guess they just don't see it?

Can't miss a big list of radio buttons!
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

Re: Shipping Drop Down to Radio List

Post by compunerdy » Wed Oct 15, 2008 5:51 pm

Same here..We like to ship UPS over USPS so we just made it default to UPS 8)

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Shipping Drop Down to Radio List

Post by Robbie@FireFold » Wed Oct 15, 2008 6:11 pm

We thought about that. Problem is we do a large amount of smaller orders that people would freak out to see a UPS Ground charge on.
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5169
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Shipping Drop Down to Radio List

Post by AbleMods » Wed Oct 15, 2008 11:14 pm

Who wants a working OnePageCheckout with Radio Button List shipping methods? 8)
Shipping Methods Radio List.jpg
(48.4 KiB) Downloaded 29952 times
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
draneb
Captain (CAPT)
Captain (CAPT)
Posts: 314
Joined: Sun Jun 12, 2005 4:07 pm
Location: Texas
Contact:

Re: Shipping Drop Down to Radio List

Post by draneb » Wed Oct 15, 2008 11:23 pm

Hi Joe,

Right here, Right here! I would like to volunteer to be a beta tester. :)

Benard
AC 7.0.3 build 13937

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3054
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

Re: Shipping Drop Down to Radio List

Post by Shopping Cart Admin » Wed Oct 15, 2008 11:32 pm

Hello Joe,

This used to be a simple change in html ! Glad I'm not a programmer anymore, or should I say lucky for you all I don't write code any longer :)
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

evanb@firefold.com
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 36
Joined: Mon Jul 21, 2008 3:45 pm

Re: Shipping Drop Down to Radio List

Post by evanb@firefold.com » Thu Oct 16, 2008 6:43 am

Hello Joe, we'd like to take part in your script as well! Let us know what we can do!

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Shipping Drop Down to Radio List

Post by Robbie@FireFold » Thu Oct 16, 2008 10:39 am

Joe FTW.
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5169
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Shipping Drop Down to Radio List

Post by AbleMods » Thu Oct 16, 2008 2:35 pm

Made you look :P

Sorry, I couldn't resist.

Actually I'm polishing it up now. I've finished adding code to sort the available shipping methods so that the least expensive method is first and selected. Thought some of you folks would enjoy that functionality as well.

Some more testing is necessary - mess up the checkout page and you've messed up your whole business. I'm taking my time so I don't get yelled at :wink:
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Shipping Drop Down to Radio List

Post by Robbie@FireFold » Thu Oct 16, 2008 2:42 pm

Now that's mean. I was like Oh Sweet! He responded. hah.
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5169
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Shipping Drop Down to Radio List

Post by AbleMods » Thu Oct 16, 2008 4:41 pm

Ok, here goes.

First, the disclamers...

MAKE A BACKUP COPY OF YOUR OnePageCheckout USER CONTROL FILES BEFORE INSTALLING THIS MODIFIED VERSION

Now...

MAKE ANOTHER BACKUP COPY OF YOUR OnePageCheckout USER CONTROL FILES BEFORE INSTALLING THIS MODIFIED VERSION AND PUT IT SOMEWHERE ELSE BESIDES THE FIRST COPY

You're messing with the single most important page on your site aside from the home page. If this doesn't work, take it out and put your old files back in place.

The rules
1. This is the OnePageCheckout from AC7 Final SR1. If you aren't running that, use with (even more) caution.
2. This is the single thickest programming code I've ever dug into. That means two things: I'm going drinking tonight and I might have just bugged a perfectly good Checkout page.
3. I tested the snot out of this, both locally and live. You need to do the same.
4. If you get a lot of multiple-shipment orders, be prepared for a REALLY tall checkout page.
5. If there's ever a sure-fire way to completely tick off your customers, screw up your checkout page. Even better, they probably won't tell you. See # 3.

The Joys
1. It works really slick - I like it alot. Radio buttons populate vertically for each possible shipping method. I'm dying to play with a horizontal layout that uses actual UPS, DHL images to represent each shipper. Perhaps next week.
2. It auto-selects the first possible shipping method.
3. It SORTS the shipping methods in order of cost, putting the least expensive shipping methods first with the cheapest possible method being the default selection.
4. I have commented where I made revisions in the code-behind. Search for AbleMods to find them.

Installation
These files go into your ~/ConLib/ folder.

The Effort
This little 1-hour project turned into 9 hours. If you like, there's always my AbleMods.com store chocked full of low-cost ways to reward me :)

The Files
OnePageCheckout.zip
(18.73 KiB) Downloaded 406 times
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3054
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

Re: Shipping Drop Down to Radio List

Post by Shopping Cart Admin » Thu Oct 16, 2008 4:45 pm

Hello Joe,

Nice effort, thank you for sharing!
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

Re: Shipping Drop Down to Radio List

Post by compunerdy » Thu Oct 16, 2008 5:07 pm

Looks perfect!!! Great work yet again bud. Adding the logos would be cool as well.

Now I just need to find someone who can dropship a case of Pepsi to Joe for me.

User avatar
draneb
Captain (CAPT)
Captain (CAPT)
Posts: 314
Joined: Sun Jun 12, 2005 4:07 pm
Location: Texas
Contact:

Re: Shipping Drop Down to Radio List

Post by draneb » Thu Oct 16, 2008 6:16 pm

Beautiful... Thank you Joe!.

Is there any way you could implement the 255 characters or less countown box as well?

Reason being is on my version 5.5 I used to not have a character countown box and customers would type over 255 and cause an internal server error so I added one with javascript.

I don't know if AC7 functions the same way, but the countdown box would ensure that they couldn't enter more than 255 and cause a possible server error, and it's just cool looking! ha

You can find the single line box in the OnePageCheckout.ascx file

Code: Select all

<asp:Label ID="ShipMessageLabel" runat="server" Text="Delivery Instructions?" SkinID="FieldHeader"></asp:Label>&nbsp;
<asp:TextBox ID="ShipMessage" runat="server" Text="" MaxLength="200" Width="200px"></asp:TextBox>
and replace it with this code:

Code: Select all

<asp:Label ID="ShipMessageCaption" runat="server" Text="Comments/Delivery Instructions:" SkinID="FieldHeader"></asp:Label><br/ >
<asp:TextBox ID="TextBox1" MaxLength="255" runat="server" TextMode="MultiLine" Columns="20" Rows="3"></asp:TextBox>
<asp:Label ID="ShipMessageCount"  runat="server" Text="255" ></asp:Label>
<asp:Label ID="ShipMessageHelp"  runat="server" Text=" characters remaining" ></asp:Label>
But code will need to be written or pulled from the ShipMethod.ascx.cs file and put in the OnePageCheckout.ascx.cs file in order to get the countdown box to work. But of course that is the hard part :?
Last edited by draneb on Fri Oct 17, 2008 2:34 am, edited 1 time in total.
AC 7.0.3 build 13937

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

Re: Shipping Drop Down to Radio List

Post by jmestep » Thu Oct 16, 2008 7:35 pm

Congratulations, Joe! I looked at it some this morning while I was drinking coffee and ran into the same problem you ran into- it wasn't picking up the selected shipping option. Then I had to get to work on other things.
I think I can rival you for the longest time put on a "small" customization. I've spent over 15 hours trying to get a datalist to nest inside a repeater and haven't got it working yet. I can see how to do it with examples I can find, but not in Able. There are gridviews in Able that nest inside repeaters, but I need a datalist to get the columnar format.
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5169
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Shipping Drop Down to Radio List

Post by AbleMods » Thu Oct 16, 2008 8:55 pm

The really tricky issue was in the postback code. During Postback, Able tests for "ShipMethodList" as the event that triggered the postback. If it was that control that fired the postback, the basket is recalculated using the selected ship method.

But the issue was they were testing using .EndsWith("ShipMethodList")

That works dandy with a Dropdownlist control. But if you set it as a RadioButtonList, the control is actually "ShipMethodList$1" so the test fails and the page acts as if the postback event on the RadioButtonList isn't firing at all.

Changing .EndsWith() to .Contains() resolves it.

Embedding any control within a repeater encapsulates the control. So you have to reference it like an item for example (DropDrownList)Repeater1.Items.FindControl("DropDownList1")
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

evanb@firefold.com
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 36
Joined: Mon Jul 21, 2008 3:45 pm

Re: Shipping Drop Down to Radio List

Post by evanb@firefold.com » Thu Oct 16, 2008 10:57 pm

Hey Joe, just wanted to say thank you for taking the time to write this. Hopefully this will be a big improvement for us! I implemented it tonight and seems to work perfectly minus some mods that we need to carry over from our other checkout page. Thanks again!

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Shipping Drop Down to Radio List

Post by Robbie@FireFold » Fri Oct 17, 2008 6:28 am

A big thanks to Joe!

The radio buttons are going to help us customers actually see their selected method. A large amount of my customer base didn't even try the drop down and just went with whatever.

I love the arrange from lowest to highest. Stuff like this really helps keep the conversion rates up.
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

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

Re: Shipping Drop Down to Radio List

Post by jmestep » Fri Oct 17, 2008 6:44 am

Joe, you might have just answered the problem I was having with my datalist nested in a repeater.

Embedding any control within a repeater encapsulates the control. So you have to reference it like an item for example (DropDrownList)Repeater1.Items.FindControl("DropDownList1")
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
draneb
Captain (CAPT)
Captain (CAPT)
Posts: 314
Joined: Sun Jun 12, 2005 4:07 pm
Location: Texas
Contact:

Re: Shipping Drop Down to Radio List

Post by draneb » Fri Oct 17, 2008 8:14 am

Hi Joe,

Is there any way you could implement the 255 characters or less countown box as well?

I already have the box in the .ascx file, just need the .cs file.

If I am the only one that wants it I can pay you for customization.

Thank you,
Benard
AC 7.0.3 build 13937

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5169
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Shipping Drop Down to Radio List

Post by AbleMods » Fri Oct 17, 2008 9:19 am

draneb wrote:Is there any way you could implement the 255 characters or less countown box as well?
I don't think this is necessary in AC7. You can limit any text field size to a specific number of characters. This automatically prevents a text field overload.

Are you experiencing something different?
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

Post Reply