Shipping options as radio buttons in Swift

[AdamKing]

Hi everyone. Has anyone tried to change how the shipping options are displayed in the swift template? I would like to display them as radio buttons instead of a dropdown.

I followed the KB article https://community.sellerdeck.com/for...-radio-buttons but alas it didn't work and i had to change it back.

Does anyone know if the code in that KB article needs changing for Swift?

Cheers, Adam

[John Ennals]

I'd like to know this too. Customers need to see all the shipping options, otherwise they'll often just go with the default.

John

[graphicz]

I think I have cracked it.

The new input lines have single quotes not double ones.

name=ShippingClass has NO quotes

There is also a DPD paragraph which I changed more in hope than being sure what I was doing!

Here is my revison in full:

This is 'ShippingTemplate.pl', which you will find within your 'ShipControl' folder. Open the file in Notepad or an equivalent text editor.

Look for this line

$sSelectHTML = "<SELECT ID='lstClass' NAME='ShippingClass'>\n";

Change it to (ie: comment out)

# $sSelectHTML = "<SELECT ID='lstClass' NAME='ShippingClass'>\n";

Next, look for this line

$sSelectHTML .= "</SELECT>\n";

and replace it with (ie: comment out)

# $sSelectHTML .= "</SELECT>\n";

Next, look for

'SELECTED ':

and replace it with

'checked="checked" ':

Look for

$sSelectHTML .= sprintf("<OPTION %s Value='%s'%s data-filter='%s'>%s\n",

Change to:

#$sSelectHTML .= sprintf("<OPTION %s Value='%s'%s data-filter='%s'>%s\n",
$sSelectHTML .= sprintf("< type='radio' name=ShippingClass data-filter='%s' %s value='%s'>%s<br />\n",

Look for

$sSelectHTML .= sprintf("<OPTION %s Value='%s'>%s\n",

Change to:

#$sSelectHTML .= sprintf("<OPTION %s Value='%s'>%s\n",
$sSelectHTML .= sprintf("<input type='radio' name=ShippingClass %s value='%s'>%s<br />\n",

Try it at https://www.gpxdev.co.uk/ship/ - (choose invoice with order).

All without warranty etc and in good will.

[AdamKing]

Hi Jonathan, great, many thanks for having a look at this. I will give this a go shortly, and will report back - I appreciate you posting a solution.

Cheers, Adam

[AdamKing]

Your solution works very well, Jonathan. Thanks. The options look much better laid this way and better for the customer as they can see what is available.
Adam

[SPDGUY]

I think I have cracked it.

The new input lines have single quotes not double ones.

name=ShippingClass has NO quotes

There is also a DPD paragraph which I changed more in hope than being sure what I was doing!

Here is my revison in full:

Look for this line

$sSelectHTML = "<SELECT ID='lstClass' NAME='ShippingClass'>\n";

Change it to (ie: comment out)

# $sSelectHTML = "<SELECT ID='lstClass' NAME='ShippingClass'>\n";

Next, look for this line

$sSelectHTML .= "</SELECT>\n";

and replace it with (ie: comment out)

# $sSelectHTML .= "</SELECT>\n";

Next, look for

'SELECTED ':

and replace it with

'checked="checked" ':

Look for

$sSelectHTML .= sprintf("<OPTION %s Value='%s'%s data-filter='%s'>%s\n",

Change to:

#$sSelectHTML .= sprintf("<OPTION %s Value='%s'%s data-filter='%s'>%s\n",
$sSelectHTML .= sprintf("< type='radio' name=ShippingClass data-filter='%s' %s value='%s'>%s<br />\n",

Look for

$sSelectHTML .= sprintf("<OPTION %s Value='%s'>%s\n",

Change to:

#$sSelectHTML .= sprintf("<OPTION %s Value='%s'>%s\n",
$sSelectHTML .= sprintf("<input type='radio' name=ShippingClass %s value='%s'>%s<br />\n",

Try it at https://www.gpxdev.co.uk/ship/ - (choose invoice with order).

All without warranty etc and in good will.

Thank you so much, it works a charm, been batting my request forward and backwards with TechS with no fix, guess they have to earn their wages somehow. Just paid our annual, next year I'll get one of you guys to take care of everything.

[graphicz]

If you would prefer tick boxes reference Font-Awesome in the head code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

And add this to the style sheet:

.shipping-class input[type=radio] {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
outline: none;
content: none;
margin-left: 5px;
}

.shipping-class input[type=radio]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 25px;
color: transparent !important;
background: #fff;
width: 25px;
height: 25px;
border: 1px solid #eee;
margin-right: 5px;
cursor: pointer;
}

.shipping-class input[type=radio]:checked:before {
color: <actinic:variable name="PaletteBG" />!Important;
}