Displaying Extra Shipping Info in Checkout

[bart]

I have a range of shipping methods and would like to display further info about each method when it is selected in the checkout. Useful to show terms for specific methods...
I have got this to work in so far that when different radio buttons are selected a different <div> is displayed. However i can't get it to work when the zone changes. e.g. if the country is changed i can't see any way of showing different info.



I have modified the file Snippets/ExpressCheckoutChooseShipper.html
The code is a bit messy but you should get the idea, the complete code i now have for this template is:

Code: Select all

<div id="shipterm" style="width:360px;margin-right:20px;border:2px solid #000;padding:5px;float:right;">
<style type="text/css">    .descso { display: none; }  </style>
    <div id="1" class="descso"><ul><li>Usually arrives in two working days</li><li>Compensation is not available</li><li>Recommended maximum order value is £35</li></ul>
    </div>
    <div id="2" class="descso"><ul><li>Sent by Royal Mail Special Delivery</li><li>A signature is required upon delivery</li><li>Saturday delivery not guaranteed</li><li>Compensation available for lost/damaged packages</li></ul><span style="font-size:0.8em">Service only available to England, Wales and parts of Scotland excl. Highlands & Islands. More info</span>
    </div>
        <div id="3" class="descso"><ul><li>Sent by Royal Mail Special Delivery</li><li>A signature is required upon delivery</li><li>Compensation for lost packages can be made up to a value of £500</li></ul>
    </div>    
        <div id="0" class="descso"><ul><li>Sent by Royal Mail Tracked or Parcel Force depending on the weight of the order</li><li>A signature maybe required upon delivery</li><li>Saturday delivery not guaranteed</li><li>Compensation available for lost/damaged packages</li></ul>
    </div>    
</div>

<div style="width:500px;float:left">
<form method="post" action="#" onsubmit="ExpressCheckout.ChooseShippingProvider(); return false;">
    <p>%%LNG_ExpressCheckoutSelectShippingProvider%%</p>
    %%GLOBAL_ShippingQuotes%%
    <p><a href='pages/Delivery-Options.html' style='color:red;font-size:0.8em;text-decoration:none !important'>*Delivery Terms - Please Read*</a></p>
    <div class="ML20">
        <input type="submit" value="%%LNG_Continue%%" />
    </div>
    %%GLOBAL_DeliveryDisclaimer%%
</form></div>




<script type="text/javascript">
$(document).ready(function(){
    $("input[name$='selectedShippingMethod[%%GLOBAL_AddressId%%]']").click(function() {
        var test = $(this).val();
        $("div.descso").hide();
        $("#"+test).show();
    });
});
</script>  

The code works with a unique input value on each <li> for the shipping methods. However these values are not unique across zones.

Any ideas how i could create or access unique identifiers for the shipping methods. I can see methodid in the database table shipping_methods but not sure how to access these.

If anyone could help or point me in the right direction that would be great.
Thanks

Bart

[pitorian]

Bart,

Did you get any further with this, I am looking to achieve the same thing.

[bart]

Unfortunately not. I could not work out how to set a unique identifier for all the different methods. The code here would work if you only have 1 zone set up so if you only ship to your country this would be ok.
I do keep trying to get it to work so hopefully i'll make a breakthrough at some point.

[Martin]

I had a look at this and to be honest it looks like you could be making a huge rod for your back with this...

It seems the way the shipping quote system works is to generate a cache of shipping options, and it then references the submitted value cache to get the data it needs. Various hoops have to be jumped through to figure out where you are in world for your quoted figures.


Given that the quote list includes a label with:
name of the provider (service)

... Instead of trying to associate things with the radio input field data, it should be possible to do some careful jquery reading of the labels, and show/hide based on what's there.

Granted, not perfect given that any changing of the service names would break the link but looking at the backend code for getting shipping quotes, a LOT easier than trying to inject an extra field to carry the information for you... The word is "nightmare"!!

[bart]

Hi Martin,

If i understand you correctly, do you mean to search for the Shipping Method name such as "Special Delivery" and then use this info to select the info? This does seem like a better method.
Unfortunately i am unable to do this as I have a few international shipping zones with the same shipping method name...

[bart]

Ok, so i have gone with Martin's advice and changed the code slightly. It now searches on the Shipping Method name. However the code currently requires that the Shipping Method name is inserted into a <div> id. This however means that the Shipping Method name cannot contain a space. I'm currently trying to work around this but i cant quite get to play ball...
This code does work across all shipping zones.

My updated code is:
for Snippets/ExpressCheckoutChooseShipper.html

Code: Select all

<div id=Free_Shipping" class="descso"><p>Free Shipping Info</p><ul><li>Sent by Royal Mail 1st Class Post</li><li>Usually arrives in two working days</li><li>Compensation is not available</li><li>Recommended maximum order value is £35</li></ul></div>
<div id="Next_Day" class="descso"><p>Next Day Delivery Info</p><ul><li>Sent by Royal Mail Special Delivery</li><li>A signature is required upon delivery</li><li>Saturday delivery not guaranteed</li><li>Compensation available for lost/damaged packages</li></ul><span style="font-size:0.8em">Service only available to England, Wales and parts of Scotland excl. Highlands & Islands. More info</span></div>
<div id="Saturday_Delivery" class="descso"><p>Saturday Delivery Info</p><ul><li>Sent by Royal Mail Special Delivery</li><li>A signature is required upon delivery</li><li>Compensation for lost packages can be made up to a value of £500</li></ul></div>    
<div id="Next_Day_by_9am" class="descso"><p>Next Day by 9am Delivery Info</p><ul><li>Sent by Royal Mail Tracked or Parcel Force depending on the weight of the order</li><li>A signature maybe required upon delivery</li><li>Saturday delivery not guaranteed</li><li>Compensation available for lost/damaged packages</li></ul></div>
<div id="Airsure" class="descso"><p>Airsure Delivery Info</p><ul><li>Sent by Royal Mail Airsure</li><li>more...</li></ul></div>
<div id="Courier" class="descso"><p>Courier Delivery Info</p><ul><li>Sent by Parcel Force Courier</li><li>Usually arrives in 2-3 working days</li><li>Compensation available</li><li> Herbal Incense and some leisure products cannot be sent via Parcel Force</li><li>If a package is returned to us additional charges may be incurred</li></ul></div>
<div id="Airmail" class="descso"><p>Airmail Delivery Info</p><ul><li>Sent by Royal Mail Airmail</li><li>Usually arrives in 10 working days, can take over a month</li><li>Compensation is not available</li><li>Recommended maximum order value is &pound;25</li></ul></div>
<div id="Signed_For" class="descso"><p>International Signed For Delivery Info</p><ul><li>Sent by Royal Mail International Signed For</li><li>Usually arrives in 3-7 working days</li><li>A signature is required upon delivery</li><li>Compensation for lost packages can be made up to a value of &pound;39</li></ul></div>
    
<div style="width:450px;float:left">
<form method="post" action="#" onsubmit="ExpressCheckout.ChooseShippingProvider(); return false;">
    <p>%%LNG_ExpressCheckoutSelectShippingProvider%%</p>
    %%GLOBAL_ShippingQuotes%%
    <p><a href='pages/Delivery-Options.html' style='color:red;font-size:0.8em;text-decoration:none !important'>*Delivery Terms - Please Read*</a></p>
    <div class="ML20">
        <input type="submit" value="%%LNG_Continue%%" />
    </div>
    %%GLOBAL_DeliveryDisclaimer%%
</form></div>

<script type="text/javascript">
$(document).ready(function(){
    $("input[name$='selectedShippingMethod[%%GLOBAL_AddressId%%]']").click(function() {
    var test = $(this).attr('title');
    $("div.descso").hide();
    $("#"+test).show();
    });
});
</script> 

Also the following template will need a slight change.

for Snippets/ExpressCheckoutShippingMethod.html

Code: Select all

<li>
    <label id="shippingMethod_%%GLOBAL_AddressId%%_%%GLOBAL_ShipperName%%">
        <input type="radio" name="selectedShippingMethod[%%GLOBAL_AddressId%%]" id="shippingCheck_%%GLOBAL_AddressId%%" value="%%GLOBAL_ShippingQuoteId%%" title="%%GLOBAL_ShipperName%%" />
        <span class="ShipperName">%%GLOBAL_ShipperName%%</span>
        %%GLOBAL_TransitTime%% <em class="ShipperPrice ProductPrice">%%GLOBAL_ShippingPrice%%</em>
    </label>
</li>

You will also need to put a couple of entries in your style sheet:

Code: Select all

.descso {width:450px;margin-right:0px;border:4px solid #efefef;padding:5px;float:right;display:none;}
.descso p {font-weight:900;}

Your Shipping Method Name must match the id in the <div> in ExpressCheckoutChooseShipper.html that you want to display. e.g. <div id=Free_Shipping"

[bart]

Had a quick brainwave and managed to sort the spaces in the names.

If you change the script in Snippets/ExpressCheckoutChooseShipper.html to:

Code: Select all

$(document).ready(function(){
    $("input[name$='selectedShippingMethod[%%GLOBAL_AddressId%%]']").click(function() {
    var test = $(this).attr('title').replace(/ /g,'_');
    $("div.descso").hide();
    $("#"+test).show();
    });
});

The spaces are replaced by _ so if you have a Shipping Method of 'Next Day' this will map to a <div> id="Next_Day"