August 25, 2011
Updated: March 1, 2020
Below is an example of how you can set up a product/shipping method relationship easily within your web forms that you download from sticky.io Platform for each campaign. This code can be applied to any multi-product campaign that you build within sticky.io Platform.
To integrate this into your web form code, you will need to first create a multi-product campaign, as well as any shipping methods that you wish to be available.
Once you have created the campaign and shipping methods you can easily add the code below into your web forms. The code must be added between the javascript <script> tags surrounding existing functions on your web form, or wrapped with their own script tags as in the example. If you are creating a one page campaign then you will add this piece of code on page one; if you are creating a two page campaign then you will add it to your page two. Use the rule that you will always be adding this piece of code on your billing page wherever it applies. You will need to adjust the ‘map’ variable to tailor it to your campaign.
The format for the mapping function is as follows:
<script type='text/javascript'>
function ProductShippingMap()
{
var map = {
product_id_x : [shipping_id_a,shipping_id_b],
product_id_y : [shipping_id_c]
};
return map;
}
</script>
This format may be used for any number of products, however all products must be included and mapped to all applicable shipping methods. In the above example, the campaign has two products (x and y) and three shipping methods (a,b, and c). Shipping methods ‘a’ and ‘b’ will be available when product ‘x’ is chosen, while shipping method ‘c’ will be hidden. When product ‘y’ is chosen, only shipping method ‘c’ will be visible. Replace these values with the IDs generated by sticky.io Platform.
2) Hide the shipping methods that are not associated with the default product (first product on form) so they cannot be selected normally. On your web form you will find a shipping method dropdown with all options. Add the following attribute to the option tag(s) that you wish to hide. For this example, option 3 is hidden because it is NOT allowed for product ‘1’ (the default product).
<select id="shipping" onchange="SetShippingValue()" name="shipping">
<option value="1" title="1.00">First Class Mail</option>
<option value="2" title="1.00">Priority USPS</option>
<option style="display:none;" value="3" title="5.00">UPS Ground</option>
</select>
Once these have been adjusted, you should be able to execute this page and have your products mapped to allowed shipping methods.
Here is an example code addition with numbers:
function ProductShippingMap()
{
var map = {
1 : [1,2],
5 : [3]
};
return map;
}
Note :
If you have an older version of the web forms, check for the change_products() function. If this function exists in your web form, it is recommended that you download an updated version of your web forms. If you prefer to keep the existing form, the function must be modified as follows:
Function change_products(price,id)
{
(…existing function logic…)
ProductShippingToggle(id);
}