By popular demand, a new plug-in is introduced at BlogrCart MNMLIS theme. Automated calculated shipping cost by average weight for items in cart with alert handlers comes pre-installed.
Below is an example mark-up to handle the selection option when shippingCustom is activated at BlogrCart MNMLIS theme.
<select class='form-control' data-maxweight='10.0' id='shippingSelect'> <option data-avgweight='0.25' data-weightmetric='kg' value='N/A'>-Please Choose-</option> <option data-avgweight='0.25' data-weightmetric='kg' value='0.5=7;1.0=9;1.5=12;2.0=14;2.5=22;3.0=24;3.5=27;4.0=30; 4.5=32;5.0=35;5.5=38;6.0=40;6.5=43;7.0=46;7.5=48;8.0=51;8.5=53;9.0=56;9.5=59;10.0=61;'>Within S. Malaysia, Within Sarawak, Within Sabah</option> <option data-avgweight='0.25' data-weightmetric='kg' value='0.5=9; 1.0=13; 1.5=17; 2.0=21; 2.5=26; 3.0=40; 3.5=44; 4.0=49; 4.5=53; 5.0=58; 5.5=62; 6.0=68; 6.5=72; 7.0=78; 7.5=82; 8.0=88; 8.5=90; 9.0=95; 9.5=100; 10.0=105; '>S. Malaysia to Sarawak</option> <option data-avgweight='0.25' data-weightmetric='kg' value='0.5=10;1.0=15; 1.5=20; 2.0=26; 2.5=41; 3.0=47; 3.5=52; 4.0=57; 4.5=63; 5.0=68; 5.5=74; 6.0=79; 6.5=85; 7.0=89; 7.5=96; 8.0=100; 8.5=106; 9.0=110; 9.5=116; 10.0=121; '>S. Malaysia to Sabah</option> <option data-avgweight='0.25' data-weightmetric='kg' value=''>Others (Please state in message box)</option> </select>
For each
<select> <option>
the values from attributes data-*
is used to handle the options & calculates at shopping cart summary section.Understanding the Custom Shipping Functions
- The custom shipping functions uses the
data-*
attributes values as data for finding the weight value to shipping rate pairs in each optionvalue=""
string. - The function pre-calculate the total weight of items in cart by multiplying the items quantity with the
data-avgweight
set in each option. This total cart weight value is rounded to the nearest.5
value to search for a round up weight to shipping rate pairings provided at the optionvalue data
. - For instance if the total cart weight is
8.3
, then the function will round the total weight value to the nearest.5
which would be8.5
. Then the custom function will search thevalue data
in the option and when match found, extracts its shipping rate pairing. Same principles if the total item weight is4.8
, then it will round up to5.0
. Then the function searches the shipping rate pairing for5.0
.
Let's break the mark-up one by one.
Below is the default option. Required to handle usages if select option is not in used. No customization required.
<option data-avgweight='0.25' data-weightmetric='kg' value='N/A'>-Please Choose-</option>
Replace/edit the
data-*
values (highlighted yellow) for custom shipping settings. Details value references below.An example option mark-up broken down into individual lines as follows:-
<option
data-avgweight='0.25'
data-weightmetric='kg'
value='0.5=7;1.0=9;1.5=12;2.0=14;2.5=22;3.0=24;3.5=27;4.0=30; 4.5=32;5.0=35;5.5=38;6.0=40;6.5=43;7.0=46;7.5=48;8.0=51;8.5=53;9.0=56;9.5=59;10.0=61;'>
Within S. Malaysia, Within Sarawak, Within Sabah
</option>
Weight Metric (kg or lb) - Required
The weight metric that is used for the items in cart, Thedata-weightmetric='kg'
indicates that kg (kilograms) is used. This weight metric will render/display at shopping cart summary when a shipping option is selected.kg or lb (pounds)
. Other weight metric is not tested but we love to here your feedback. Or, share it here in the comment section below.Average Weight - Required
Average weight means the average weight per item in cart. Used atdata-avgweight='0.25'
. In this example 0.25[weightmetric]
is the average weight per items in cart. In this case 0.25kg
(kilograms) is the average weight for an item in cart.Weight & Shipping Rate Values - Required
Here is an example of a weight to shipping rate pairing (highlighted in yellow, cyan & green).value='0.5=7;1.0=9;1.5=12;2.0=14;2.5=22;3.0=24;3.5=27;4.0=30; 4.5=32;5.0=35;5.5=38;6.0=40;6.5=43;7.0=46;7.5=48;8.0=51;8.5=53;9.0=56;9.5=59;10.0=61;'
A weight & shipping rate pairing values as follows highlighted yellow
0.5=7;
Each pairing must begin with a weight value (0.5) equals (=) a rounded shipping rate value (7) and ending with a colon as separator (;)The next occurring value will have a weight increase by .5 paired with next rounded shipping rate value (without decimal points).
In laymen terms, if items calculated in cart (average weight x cart item quantity) equals or does exceeds
0.5[weightmetric]
, the shipping rate is 7[currency]
.The same example for highlighted in cyan. If the items in cart weighs equal 5.0kg but does not exceeds the next weight increase (5.5kg) the shipping charges is
RM35.00
.The format for extracting the weight to shipping rate value pairs is as follows:-
[integer in one decimal point]=[integer rounded];[next increase integer in one decimal point]=[next increase integer rounded];
This is important as the function searches a match weight value by one decimal point to differentiate with the shipping rate pairs. All weight values are ascending rounded to 0.5 values begining at 0.5 onwards.
Each format pairings ends with a colon
(;)
to separate the occurring (next increase) value pairs.Option Text Displayed - Required
The text to display at the select drop down options. An example is highlighted magenta at the above mark-up.Adding More Options
Adding more options for custom shipping is endless. Use tthe same technique and markup-ups to add options. Several working examples is also included in BlogCart MNMLIS theme.Which means:-
- This shipping by weight have unlimited options of choices depending on preferred service providers. Adding one option shipping by weight using Provider A, or create another option for a service Provider B.
- Unlimited shipping by weight select options depending on locations or zoning. For example adding one option for weight by value shipping for Zone X & another select option for Zone Y.
- Or add both types of options selection (Provider , Zoning, Provider by Zoning) in one select options. This way gives more selection for your users.
- The price pairings can be used in unlimited number of integers without trailing decimels (rounded) as values, for instance using Rupiah or Rupee thousands ie 15,000 using 15000 is sufficient.
Error Handling Helpers
This custom shipping by weight select option comes with error handling. Below is the brief description on the Error handler events:-- If user select option
value="N/A"
, an alert event will occur with the custom error text. The checkout button & form will automatically hide. - If blog owner has an empty option value (
value=""
), an alert event fires with a custom error text. The checkout button & the form displays. - If there is a formatting error at the weight to shipping rate value pairs, an alert event will fire to indicate which value pairs has error(s).
- If a
data-weightmetric
is not set (data-weightmetric=""
), the data values will not display. - If a
data-avgweight
is not set (data-avgweight=""
), an alert event fires indicate values not found.
Quick Notes:-
- Spaces in value pairings strings has no effect to calculate(or find) the shipping rate.
- Special characters & alphabets can not be used.
- Weight values always with a single decimal rounded format of .5 increase (ascending)
- Shipping rate values are rounded. Decimal point will throw errors.
- Weight values must increase by
0.5
with the lowest value is0.5
. The increase is as follows using kg as weight metric:0.5kg, 1.0kg, 1.5kg, 2.0kg, 2.5kg etc.
- Each weight values must have a single decimal point. Other than that it may return errors.
- Leave option
value=''
empty to allow manual shipping rate & users can continue sending orders. - The maxWeight values must equals the same values as highlighted in red at the above mark-up. In the example 10.0 set to the maximum weight at shopping cart.
Currently this demo is using Intense Debate commenting system. By default Blogger comment system is activated.