Removing unwanted shipping options

[Mike Hughes]

There can be times when Sellerdeck includes too many shipping options in the checkout and you'd rather they weren't there.

An example would be when you use shipping by weight and you end up with options that are there for heavy items being shown for orders that only include light items.

In my case I use product weights as a proxy for size and allow three delivery options.

- Royal Mail Large Letter
- Royal Mail Small Parcel
- Courier

The only problem is that orders suitable for the Large Letter service will also give the customer the other two options as well.

After thinking about this, I've created some simple javascript that will remove the unwanted options. In this case the code identifies how many options there are and then deletes the 2nd option (index of 1) a number of times so that just the first one is remaining.

It would be quite simple to enhance the code with some additional logic to delete certain options based on the text or number of options that are present.

Here's the code that removes all but the first option:

<script type="text/javascript">
// This script removes all but the first shipping option
// First get the ID for the shipping class select
var elements = document.getElementsByName( 'ShippingClass' );
var shippingid = elements[0].getAttribute( 'id' );
// remove any extra options
var x = document.getElementById(shippingid);
var optioncount = x.length;
for (i = 1; i < optioncount; i++) {
x.remove(1);
}

</script>

Note: This javascript must be placed somewhere after the select statement on the page or called as a function after the page is loaded.

I've tested this has on V11 and it looks fine to me.

I should really remove the whole select object for my usage as a drop down with just a single object is superfluous but then the code would be less usable elsewhere.

Let me know what you think.

[NormanRouxel]

Here's a jQuery way that looks for a shipping option containing "Large" and, if it finds it, removes all other options.:

<script type="text/javascript">
	$(document).ready(function(){
		var shippingOpts = $( "select[name='ShippingClass'] option" );	// all shipping options
		if ( shippingOpts.filter( ":contains('Large')" ).length )	// do we have a "Large" entry	
			{
			shippingOpts.not( ":contains('Large')" ).remove(); // if so delete all but it
			}
		});	
</script>

This code runs automatically when the document is loaded so can be placed anywhere. Somewhere on the relevant checkout page (e.g. bottom of Order 01 Bulk Area RWD) would make sense.

[Mike Hughes]

Here's another version that complete removes the drop down and replaces it with the first option that was in the drop down list.

For simplicity and safety, this version has been written to only overwrite the HTML of the element with a specific id. To make this work you'll need to set the id of the <td> that contains the shipping selection drop down by adding id='checkout-field-input-id' to it. For example in the Advanced Shipping Class Selection layout.

<script type="text/javascript">
// This script replaces the drop down shipping selection with the first option from the list
var exists = document.getElementsByTagName('SELECT').length;
if (exists > 0) {
var elements = document.getElementsByName( 'ShippingClass' );
var shippingid = elements[0].id;
var x = document.getElementById(shippingid);
var shippingtext = x.options[0].text;
var shippingvalue = x.options[0].value;
// build the new html content and replace the select element
shippingtext = shippingtext + "<INPUT TYPE=HIDDEN NAME=ShippingClass VALUE='" + shippingvalue + "'>";
document.getElementById('checkout-field-input-id').innerHTML = shippingtext;
}
</script>

This has been tested and verified on V11.