Page 1 of 3

Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 1:01 pm
by William_firefold
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

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 1:24 pm
by compunerdy
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.

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 1:58 pm
by draneb
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.

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 2:42 pm
by jmestep
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.

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 3:09 pm
by Robbie@FireFold
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!

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 5:51 pm
by compunerdy
Same here..We like to ship UPS over USPS so we just made it default to UPS 8)

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 6:11 pm
by Robbie@FireFold
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.

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 11:14 pm
by AbleMods
Who wants a working OnePageCheckout with Radio Button List shipping methods? 8)
Shipping Methods Radio List.jpg

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 11:23 pm
by draneb
Hi Joe,

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

Benard

Re: Shipping Drop Down to Radio List

Posted: Wed Oct 15, 2008 11:32 pm
by Shopping Cart Admin
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 :)

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 6:43 am
by evanb@firefold.com
Hello Joe, we'd like to take part in your script as well! Let us know what we can do!

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 10:39 am
by Robbie@FireFold
Joe FTW.

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 2:35 pm
by AbleMods
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:

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 2:42 pm
by Robbie@FireFold
Now that's mean. I was like Oh Sweet! He responded. hah.

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 4:41 pm
by AbleMods
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

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 4:45 pm
by Shopping Cart Admin
Hello Joe,

Nice effort, thank you for sharing!

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 5:07 pm
by compunerdy
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.

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 6:16 pm
by draneb
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 :?

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 7:35 pm
by jmestep
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.

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 8:55 pm
by AbleMods
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")

Re: Shipping Drop Down to Radio List

Posted: Thu Oct 16, 2008 10:57 pm
by evanb@firefold.com
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!

Re: Shipping Drop Down to Radio List

Posted: Fri Oct 17, 2008 6:28 am
by Robbie@FireFold
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.

Re: Shipping Drop Down to Radio List

Posted: Fri Oct 17, 2008 6:44 am
by jmestep
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")

Re: Shipping Drop Down to Radio List

Posted: Fri Oct 17, 2008 8:14 am
by draneb
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

Re: Shipping Drop Down to Radio List

Posted: Fri Oct 17, 2008 9:19 am
by AbleMods
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?